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?
