Why doesn’t nodelist have forEach?

by

NodeList now has forEach() in all major browsers

See nodeList forEach() on MDN.

Original answer

None of these answers explain why NodeList doesn’t inherit from Array, thus allowing it to have forEach and all the rest.

The answer is found on this es-discuss thread. In short, it breaks the web:

The problem was code that incorrectly assumed instanceof to mean that the instance was an Array in combination with Array.prototype.concat.

There was a bug in Google’s Closure Library which caused almost all Google’s apps to fail due to this. The library was updated as soon as this was found but there might still be code out there that makes the same incorrect assumption in combination with concat.

That is, some code did something like

if (x instanceof Array) {
  otherArray.concat(x);
} else {
  doSomethingElseWith(x);
}

However, concat will treat “real” arrays (not instanceof Array) differently from other objects:

[1, 2, 3].concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
[1, 2, 3].concat(4) // [1, 2, 3, 4]

so that means that the above code broke when x was a NodeList, because before it went down the doSomethingElseWith(x) path, whereas afterward it went down the otherArray.concat(x) path, which did something weird since x wasn’t a real array.

For some time there was a proposal for an Elements class that was a real subclass of Array, and would be used as “the new NodeList”. However, that was removed from the DOM Standard, at least for now, since it wasn’t feasible to implement yet for a variety of technical and specification-related reasons.

More Related Contents:

  1. For-each over an array in JavaScript
  2. Short circuit Array.forEach like calling break
  3. JavaScript: Difference between .forEach() and .map()
  4. change values in array when doing foreach
  5. What does [].forEach.call() do in JavaScript?
  6. forEach on querySelectorAll not working in recent Microsoft browsers
  7. JavaScript, Node.js: is Array.forEach asynchronous?
  8. forEach on array of undefined created by Array constructor
  9. How to loop through all the elements returned from getElementsByTagName [duplicate]
  10. Check if object value exists within a Javascript array of objects and if not add a new object to array
  11. How to use promise in forEach loop of array to populate an object
  12. Why is the loop assigning a reference of the last index element to? [duplicate]
  13. Why doesn’t console.log work when passed as a parameter to forEach?
  14. Why Array.forEach is slower than for() loop in Javascript? [duplicate]
  15. In JavaScript, what is the best way to convert a NodeList to an array?
  16. Loop over an array in JavaScript
  17. Splicing a Javascript array from within the callback passed to forEach
  18. Loop (for each) over an array in JavaScript
  19. How to set DOM element as first child?
  20. Group javascript array object by same key
  21. JavaScript foreach loop on an associative array object
  22. Can forEach in JavaScript make a return? [duplicate]
  23. Sort out array of object using its value [duplicate]
  24. When does reflow happen in a DOM environment?
  25. Check if an element is present in an array [duplicate]
  26. How to get the element clicked (for the whole document)?
  27. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  28. Get elements from page.evaluate in Puppeteer? [duplicate]
  29. Can a JavaScript variable be used in plain HTML?
  30. Why is iframe.contentWindow == null?

Leave a Comment