Which loop is the fastest in JavaScript?

Knowing which for loop or iterator is right for our needs prevents us from making some stupid mistakes that affect the performance of our application.

JavaScript is the evergreen in the field of web development. Whether it is JavaScript frameworks (such as Node.js, React, Angular, Vue, etc.) or native JavaScript, they all have a very large fan base. Let's talk about modern JavaScript. Loops have always been an important part of most programming languages, and modern JavaScript provides us with many ways to iterate or loop over values.
But the question is whether we really know which loop or iteration is best suited for our needs. There are many variations of the for loop, such as for, for (reverse), for...of, forEach, for...in, and for...await. This article will discuss these.

Which loop is faster?

The answer is actually: for (in reverse order)

The most surprising thing to me is that after I tested it on my local machine, I had to accept the fact that for (reverse) is the fastest of all for loops. Below I will give an example of performing a loop over an array containing more than one million elements.
Disclaimer: The accuracy of console.time() results depends heavily on the configuration of the system we run the tests on. You can learn more about accuracy here.

const million = 1000000; 
const arr = Array(million);

// Note: This is a sparse array and its contents should be specified, otherwise different loops will handle it differently:
// const arr = [...Array(million)]

console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for (reverse order): - 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 reason for this result is simple. In the code, the forward and reverse for loops take almost the same time, with a difference of only 0.1 milliseconds. The reason is that for (reverse order) only needs to calculate the starting variable let i = arr.length once, while in the forward for loop, it checks the condition i<arr.length after each variable increase. This subtle difference is not very important and you can ignore it. (Translator's note: We can ignore it for codes with small data volumes or that are not time-sensitive. However, according to the translator's tests, when the amount of data increases, such as billions or hundreds of billions, the gap increases significantly, and we need to consider the impact of time on application performance.)
And forEach is a method of the Array prototype. Compared with the ordinary for loop, forEach and for...of take more time to iterate the array. (Translator's note: But it is worth noting that for...of and forEach both get data from the object, but the prototype does not, so there is no comparability.)

Types of loops and where we should use them

1. For loop (forward and reverse order)

I think everyone should be very familiar with this basic cycle. We can use for loops anywhere we need to run a block of code a specified number of times. The basic for loop is the fastest, so we should use it every time, right? Not really, performance is not the only metric, code readability is often more important, so let's choose the variant that suits our application.

2. forEach

This method needs to accept a callback function as an input parameter, iterate over each element of the array, and execute our callback function (with the element itself and its index (optional parameter) as parameters given to the callback function). forEach also allows an optional parameter this to be used in the callback function.

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
  console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* Output have - 0
    fun-1
    coding - 2 */

It should be noted that if we want to use forEach, we cannot use JavaScript's short-circuit operator, that is, we cannot skip or end the loop in each loop.

3. for…of

for…of was standardized in ES6 (ECMAScript 6). It creates a loop for an iterable object (such as array, map, set, string, etc.), and has an outstanding advantage, that is, excellent readability.

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

It is important to note that you should not use for...of in a generator, even if the for...of loop terminates early. After exiting the loop, the generator is closed and attempting to iterate again will not produce any further results.

4. for in

for…in iterates over all enumerable properties of an object using the specified variable. For each distinct attribute, the for…in statement returns the name of the user-defined attribute in addition to the numeric index.

Therefore, it is better to use a traditional for loop with numeric indexes when iterating over an array. Because the for...in statement also iterates over user-defined properties in addition to array elements, this is true even if we modify the array object (for example, by adding custom properties or methods).

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
  fullName += details[i] + ' '; // fullName: john doe
}

for…of and for…in

The main difference between for…of and for…in is what they iterate over. for…in loops over the properties of an object, while for…of loops over the values ​​of an iterable object.

let arr = [4, 5, 6];
for (let i in arr) {
  console.log(i); // '0', '1', '2'
}
for (let i of arr) {
  console.log(i); // '4', '5', '6'
}

in conclusion

• for is the fastest, but less readable
• foreach is faster and can control the content
• for...of is slower but more interesting.
• for...in is slower and less convenient

Finally, a piece of sage advice - prioritize readability. This is especially necessary when we develop complex structural programs. Of course, we should also focus on performance. Try to avoid adding unnecessary, redundant fancy code as this can sometimes have a serious impact on the performance of your program. Happy coding!

Translator's Note

In the actual test of the translator, it was found that:

• Different browsers and even different versions will have different results (for example, Firefox seems not very friendly to native for-loop, and Safari likes while very much)
• Different platforms, operating systems, and processors will have different results
  

This is the end of this article about which kind of loop is the fastest in JavaScript. For more information about which kind of loop is the fastest in JavaScript, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

Original article: Which type of loop is fastest in JavaScript?
Original author: kushsavani