Performance of Array Iteration in JavaScript — Which Method is the Fastest?

JavaScript offers various methods for iterating over arrays. However, when dealing with large datasets or performance-sensitive applications, choosing the right method can make a significant difference.

In this article, we will compare the most popular methods in terms of speed, readability, and use cases.

---

Test Participants

Method	Description
for	Classic for loop
while	Standard while loop
for...of	ES6 feature for iterables
forEach	Array method with a callback
map	Returns a new array
reduce	For value accumulation
for...in	Works on indexes (not recommended for arrays)

---

Simple Test

    const arr = Array.from({ length: 1_000_000 }, (_, i) => i);

    console.time('for');
    for (let i = 0; i < arr.length; i++) {
      arr[i] * 2;
    }
    console.timeEnd('for');
    
    console.time('for-of');
    for (const num of arr) {
      num * 2;
    }
    console.timeEnd('for-of');
    
    console.time('forEach');
    arr.forEach(num => num * 2);
    console.timeEnd('forEach');
    
    console.time('map');
    arr.map(num => num * 2);
    console.timeEnd('map');   

All methods perform the same operation: multiplying by 2. We only measure execution time.

---

Results (tested in browsers and Node.js)

Method	Speed	Clean Syntax
for	🏆 Fastest	High
while	Very Fast	Medium
for...of	Medium	High
forEach	Slow	High
map	Slow	High
reduce	Slowest	Medium
for...in	❌ Bad for arrays	Medium

---

Why "for" is the Fastest

The classic for loop has the lowest abstraction level, and JavaScript engines (like V8 in Chrome) optimize it heavily. Additionally, it avoids callbacks, reducing function call overhead.

---

Recommendations by Use Case

Scenario	Recommended Method
Maximum speed	for or while
Clean and readable code	map, forEach
Value accumulation	reduce
Dynamic break/continue	for, for...of
Functional style	map, filter, reduce

---

Important Note: forEach Doesn’t Work with async/await

    await array.forEach(async (item) => {
      await something(item); // ❌ async won't work as expected
    });

Use for...of with async/await instead:

    for (const item of array) {
      await something(item); // ✅ async works
    }

---

Conclusion

When working with large arrays or performance-critical code, use for or while. If readability is more important and data size is small, prefer map, forEach, or reduce. For performance-sensitive applications (e.g., games, visualizations, real-time dashboards), always benchmark different approaches.