Array.from vs for loop to traverse an array-like object

Question

For traversing an array-like object, is better use -- for performance -- Array.from( ).forEach() or for loop?

Example of an array-like object:

let childeNodes = document.querySelector('#someid').childNodes;

Iteration with Array.from().forEach():

Array.from(childNodes).forEach(node => {
  // do something with node
})

Or iteration with for:

for (let i = 0; i < childNodes.length; i++) {
  // do something with childNodes[i]
}

for loop should have a bit better performance, but it doesn't mean you should always use for loop. If you wanna break the loop or make the use of index, then yes. — Charlie Ng, Dec 14 '17 at 21:53
`Array.from` and a `for` loop are not analogous. `from` is only called once. `forEach` is being called for each item. I would update your question to clarify this point. — goldins, Dec 14 '17 at 22:01

score 3 · Accepted Answer · answered Dec 14 '17 at 22:14

Note that there are two more interesting variants:

The Array.from function accepts a second argument which is a callback called for each element. We can expect that to work faster than the .forEach method appended to it, as no intermediate array has to be created
The ES6 for..of loop

But it is a known fact that the old-fashioned for loop beats all alternatives. Here is a little snippet that makes the measurements:

const childNodes = document.querySelector('#someid').childNodes;
let i, start, duration, times = 500000;

k = times;
start = performance.now();
while (k>0) {
    Array.from(childNodes).forEach(node => 
        k -= node ? 1 : 0
    );
}
duration = performance.now() - start;
console.log('Array.from with forEach: ', duration.toFixed(2));

k = times;
start = performance.now();
while (k>0) {
    Array.from(childNodes, node => 
        k -= node ? 1 : 0
    );
}
duration = performance.now() - start;
console.log('Array.from callback: ', duration.toFixed(2));

k = times;
start = performance.now();
while (k>0) {
    for (let i = 0; i < childNodes.length; i++) {
        k -= childNodes[i] ? 1 : 0;
    }
}
duration = performance.now() - start;
console.log('Oldfashioned for-loop: ', duration.toFixed(2));
    
k = times;
start = performance.now();
while (k>0) {
    for (const node of childNodes) {
        k -= node ? 1 : 0;
    }
}
duration = performance.now() - start;
console.log('for-of loop: ', duration.toFixed(2));

<ul id="someid">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>

score 0 · Answer 2 · answered Dec 14 '17 at 22:03

Your question is phrased wrong.

Instead of: Array.from vs for(..) It should be: Array.forEach vs for(...)

And for that question you can find very good answers in SO or a simple google search.

tl;dr;

for loop is faster. forEach is slower, but better fits functional programming paradigms.

Convert an array-like object with Array.from adds some overhead? — asv, Dec 14 '17 at 22:11

score 0 · Answer 3 · answered Dec 14 '17 at 22:11

According to this jsperf a for loop is faster than forEach, but a for...in is slowest.

As mentioned though, the Array.from is irrelevant as it's only called once.

Also worth mentioning is that in a real world use case of your example, the slowest operation is likely to be document.querySelector. According to this jsperf using getElementById is much faster.

A larger takeaway here is to understand use cases and maintainability before worrying about performance; and when you do worry about performance, think about it more holistically.

Array.from vs for loop to traverse an array-like object

3 Answers3

tl;dr;