To be clear in the second example we are not using an array. We are calling forEach on the htmlcollection, which is an array-like object. It's almost like tricking it into believing it's working on a real array.
To illustrate
// not an array
// has no array methods forEach, map, filter etc.
const arrayLikeObject = {
0 : 'apples',
1 : 'pears',
2 : 'bananas',
length: 3
}
// Like out htmlcollection this approach fails.
// Uncaught TypeError: arrayLikeObject.forEach is not a function
console.log(arrayLikeObject.forEach((fruit) => console.log(fruit)))
// This time using call to bind our arrayLikeObject to forEach's 'this' property
console.log(
Array.prototype.forEach.call(arrayLikeObject, (fruit) => console.log(fruit))
)
// apples, pears, bananas
Again I am just having a scan, it's been a long day, but look at the following from the second example
function onInputEvent(e) {
input = e.target;
var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
Arr.forEach.call(table1, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, filter);
});
});
}
We have a loop with two nested loops. A loop, with a loop inside of that, with a loop inside of that. That is far from efficient.
Your first example has one loop. The function is 6 lines long and looking at the jsfiddle does the trick. I accept I am possibly missing details, but without digging deeper that is the one I would opt for.
