I had queried a bunch of tags, using querySelectorAll(), and received a NodeList in return.
NodeLists are like arrays (i.e. they have a length property, they are accessed by an index in brackets: NodeList) however, try using .map, or .filter, or .forEach on one.
The options out there were varied. From looping through and filling an Array to some more clever es6 options like:
var elements = [... nodelist]
var elements = Array.from(nodelist)
However, these have a problem... they worked too well. You now had an array INSTEAD of a NodeList. Sure, it had all the data from the NodeList but it no longer identified itself as a NodeList.
What's the problem with that?
This will error out because the argument is not a true NodeListItem.
We don't need our NodeList to be an Array, we just need those properties from Arrays. This is the perfect place for object composition.
Our NodeList remains a NodeList, and it acquires those Array traits we need while not modifying its prototype. I didn't see this solution anywhere, likely because it's never what is asked for. So instead of asking, how do I make A become B, ask how can I get A to behave like B, and the answer will likely be 'Object Composition'
This series of posts document a high-level process to use when planning a modern web application, from project organization, collaboration considerations and tooling choices during development, all the way through deployment and performance strategies.