CODEWITHSUNDEEP
javascriptarraysperformance
asv
asv

Reputation: 3792

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

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]
}

Upvotes: 2

Views: 2330

Answers (3)

trincot
trincot

Reputation: 350137

Note that there are two more interesting variants:

  1. 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

  2. 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>

Upvotes: 5

goldins
goldins

Reputation: 1376

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.

Upvotes: 0

Rabbi Shuki Gur
Rabbi Shuki Gur

Reputation: 1716

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.

Upvotes: 0

Related Questions