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.
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?