Whenever you use querySelector or Node.childNodes, what’s returned is not actually an array but a NodeList. Its prototype does have the forEach property, along with additional iterator methods, but not other oft-used ones we almost expect because of its array-like structure – map() and filter() for Reactians.
Suppose I want to filter out links in a collection of them:
const links = document.querySelectorAll( 'a' );
Okay, lets filter out any links that don’t have an href attribute:
links.filter( l => !l.hasAttribute( 'href' ) );
Oops:
Uncaught TypeError: links.filter is not a function
So we can use one of two methods to convert it to an array before filtering:
Array.from( links ).filter( l => !l.hasAttribute( 'href' ) ); -- [...links].filter( l => !l.hasAttribute( 'href' ) );
Both do what we want, but using the spread operator in the second example is more terse and a bit more elegant.