Which JavaScript Loop Is Fastest? Benchmark Results and Best Use Cases

JavaScript plays a crucial role in web development, and loops are essential for iterating over data. The language offers several looping methods such as for, reverse for, for...of, forEach, for...in, and for...await. Choosing the most suitable loop depends on performance and readability.

Which loop is fastest?

The benchmark shows that the reverse for loop ( for(reverse)) is the fastest when iterating over an array of one million elements. The test code is:

const million = 1000000;
const arr = Array(million);
console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for(reverse) :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms
arr.forEach(v => v)                     // foreach      :- 2.1ms
for (const v of arr) {}                 // for...of     :- 11.7ms
console.timeEnd('⏳');

The forward for loop and the reverse version differ by only 0.1 ms because the reverse loop initializes the counter once, while the forward loop checks i < arr.length on each iteration. The forEach and for...of loops are noticeably slower, and for...in is the slowest for array traversal.

Translator note: If the classic for (let i = 0; i < arr.length; i++) {} is rewritten as for (let i = 0, length = arr.length; i < length; i++) {} , the performance difference becomes negligible.

Application scenarios for different loops

for loop

The traditional for loop is familiar and fast, but readability may suffer in complex code, so it should not be used indiscriminately.

forEach

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, index) => {
  console.log(`${item} - ${index}`);
};
things.forEach(callbackFun);

forEach

cannot be broken out of with break or return, limiting control flow.

for...of

Introduced in ES6, for...of works on any iterable (e.g., String, Array, Map, Set) and offers good readability.

const arr = [3, 5, 7];
const str = 'hello';
for (let i of arr) {
  console.log(i); // logs 3, 5, 7
}
for (let i of str) {
  console.log(i); // logs 'h', 'e', 'l', 'l', 'o'
}

Translator note: Airbnb’s style guide discourages for...of because it requires the heavy regenerator-runtime library; they prefer array iteration methods for better performance.

for...in

for...in

enumerates all enumerable properties of an object. When used on arrays, it also returns custom properties, which can cause unexpected results, so it’s not recommended for array iteration. Instead, use Object.keys, Object.values, or Object.entries.

Example:

const array = ['k', 'o', 'o'];
array.koo = true;
for (const key in array) {
  console.log(key); // prints '0', '1', '2', 'koo'
}

Airbnb also advises against for...in for object property iteration, recommending the Object utility methods instead.

Summary

for

is the fastest but can be less readable. forEach is fast and allows property control but cannot break early. for...of is slower but very readable and works on any iterable. for...in is the slowest and least suitable for arrays.

Overall, prioritize code readability, especially in complex systems, while still being aware of performance implications and avoiding unnecessary constructs that could degrade application speed.