Simplify your JavaScript – Use .map(), .reduce(), and .filter()

This is not best practices, but it certainly does work to globally monkey-patch the more useful Array# functions into NodeLists.

(({ prototype: l }, { prototype: c }, { prototype: { forEach, map, find, filter, reduce, slice } }) => 
  [l, c].forEach(p => 
    !p.map && Object.assign(p, { forEach, map, find, filter, reduce, slice })
  )
)(NodeList, HTMLCollection, Array);

They also perform better called this way than Array.from(NodeList)..., [...NodeList]..., and Array.prototype.slice.call(NodeList)..., since the list doesn’t have to be copied.

The down side is that the node list changes under you if the underlying DOM changes (e.g., NodeList.forEach(el => el.parentNode.removeChild(el)) will not work like you think). So adding slice to the list of copied functions is useful in cases where you intend to change the DOM.

Mind, I rarely have to do jQuery-style direct DOM manipulation anymore. React-style stuff helps a lot with that (though, I also don’t really use React in my personal work anymore either; I’ve been using buildless).

About: admin