Differences between using Array.from and a for loop to iterate through an array-like object

Question

Differences between using Array.from and a for loop to iterate through an array-like object

When traversing an array-like object, which method is more efficient for performance: using Array.from( ).forEach() or a traditional for loop?

An example of an array-like object would be:

let elements = document.querySelector('#someid').children;

Here is an example of iteration using Array.from().forEach():

Array.from(elements).forEach(element => {
  // do something with the element
})

Alternatively, here is an example of iteration using for:

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

javascript arrays performance

Answer 1

Answer №1

It's important to note that there are a couple of other interesting options as well:

You can use the Array.from function with a second argument, which is a callback that is called for each element. This method is expected to be faster than using the .forEach method, as it eliminates the need to create an intermediate array.
Another option is the ES6 for..of loop.

However, it is widely acknowledged that the traditional for loop surpasses all other alternatives. Here is a simple code snippet to measure their performance:

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>

Answer 2

It's important to note that there are a couple of other interesting options as well:

You can use the Array.from function with a second argument, which is a callback that is called for each element. This method is expected to be faster than using the .forEach method, as it eliminates the need to create an intermediate array.
Another option is the ES6 for..of loop.

However, it is widely acknowledged that the traditional for loop surpasses all other alternatives. Here is a simple code snippet to measure their performance:

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>

Answer 3

Answer №2

Your query is not quite accurate.

Rather than comparing: Array.from and for(..) It would be more appropriate to compare: Array.forEach and for(...)

You can discover insightful answers to this question on StackOverflow or simply by conducting a quick Google search.

tl;dr;

for loop is quicker. forEach may be slower, but aligns better with functional programming concepts.

Answer 4

Your query is not quite accurate.

Rather than comparing: Array.from and for(..) It would be more appropriate to compare: Array.forEach and for(...)

You can discover insightful answers to this question on StackOverflow or simply by conducting a quick Google search.

tl;dr;

for loop is quicker. forEach may be slower, but aligns better with functional programming concepts.

Answer 5

Answer №3

After analyzing performance on a jsperf test, it was determined that a for loop outperforms a forEach loop, while a for...in loop is the slowest option.

It should be noted that the use of Array.from is inconsequential as it is only executed once.

Additionally, in practical scenarios, the bottleneck is often attributed to operations like document.querySelector. Research on jsperf suggests that using getElementById yields better performance.

The key lesson here is to prioritize understanding use cases and maintainability over immediate performance concerns; when performance becomes a focus, it should be approached from a comprehensive perspective.

Answer 6

After analyzing performance on a jsperf test, it was determined that a for loop outperforms a forEach loop, while a for...in loop is the slowest option.

It should be noted that the use of Array.from is inconsequential as it is only executed once.

Additionally, in practical scenarios, the bottleneck is often attributed to operations like document.querySelector. Research on jsperf suggests that using getElementById yields better performance.

The key lesson here is to prioritize understanding use cases and maintainability over immediate performance concerns; when performance becomes a focus, it should be approached from a comprehensive perspective.

Differences between using Array.from and a for loop to iterate through an array-like object

Answer №1

Answer №2

tl;dr;

Answer №3

Similar questions

Chaining promises: The benefits of attaching an error handler during Promise creation versus appending it to a variable containing a promise

Customizing multi select in MUIv5 AutoComplete feature

Downloading files from a Blob in NodeJS: A step-by-step guide

Issues have been identified with the functionality of the Am charts v3 XY in conjunction with a

Submit a form utilizing jQuery's ajax function

CSS - starting fresh with animations

Is it possible that the passing of Form Serialize and list to the controller is not functioning properly?

Creating a POST request in Rails 3

The current environment does not recognize the term 'ScriptManager'

Navigate through a JSON data structure containing nested arrays

Is there a way for me to control the permissions granted to jhipster's authorities?

Can you explain the meaning of the code provided below?

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

Is it possible to exponentiate an array by another array's power?

What is the process for extracting JSON values by specifying keys within a nested JSON structure?

Comparison of Angular.js formsets to Django's formset

JQuery Datatables: Struggling to make JQuery function work following AJAX update

Divide the linear dataset and compute the maximum value using PHP

Error: unable to locate the react-redux context value; make sure the component is enclosed in a < Provider > tag

User retrieval failed following successful passport authentication