Polyfill Symbol and prototype[Symbol.iterator] to allow for..of loops in frontend code

I recently started to work on adding a polyfill for Object so that we can use for..of properly and I've run into a roadblock.

Screen_Shot_2016-11-30_at_2.43.09_PM

It seems that the most recent version of AirBnB's javascript lint rules explicitly disallows for..of loops:

http://airbnb.io/javascript/#iterators--nope
https://github.com/airbnb/javascript/issues/1122

Their reasoning is that iterators are not "pure functions" and are harder to reason about, and map(), reduce(), and forEach() methods should always be preferred. However, I disagree. I still think for..of is an elegant solution for array-like objects (like NodeList) that don't have access to those higher order methods.

Take iterating over the results of querySelectorAll as an example:

vanilla for loop

const elmList = document.querySelectorAll('.foo');

for (let i = 0; i < elmList.length; i += 1) {
  elmList[i].addEventListener('click', e => this.handleClickEvent(e));
}

array conversion hack

const elmList = Array.prototype.splice.call(document.querySelectorAll('.foo'));

elmList.forEach(function (elm) {
  elm.addEventListener('click', e => this.handleClickEvent(e));
});

array method call hack

const elmList = document.querySelectorAll('.foo');

Array.prototype.forEach.call(elmList, function (elm) {
  elm.addEventListener('click', e => this.handleClickEvent(e));
});

for..of loop

const elmList = document.querySelectorAll('.foo');

for (const elm of elmList) {
  elm.addEventListener('click', e => this.handleClickEvent(e));
}

I'm proposing that we disable the no-restricted-syntax rule for ForOfStatement in our .eslintrc file. Does anyone else want to weigh in?