Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Performance Check on Different Type of Loops Available in Javascript

DZone's Guide to

Performance Check on Different Type of Loops Available in Javascript

In this article, we review the results of a performance test using jsPerf to see how well each type of JS loop performs.

· Performance Zone ·
Free Resource

Maintain Application Performance with real-time monitoring and instrumentation for any application. Learn More!

Performance check

For loops plays a major role in software development, irrespective of programming language and a small mistake in the loop might collapse the entire application. So we should be really careful while handling loops.

In this post, we will look into different loops and the performance of each loop available in JavaScript. To measure the performance, we are going to use jsPerf.

Here's a description of jsPerf, per their website.

jsPerf — JavaScript performance playground!!

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Let's check different loops available in JavaScript and analyze the performance of each code snippet.

for...loop

The ordinary for...loop. This loop is based on the length of the array that we will iterate through, going through each element, and access it using its index.

var loopArrayVariable = new Array(10000);
loopArrayVariable.fill(1);

for (i = 0; i < loopArrayVariable.length; i++) {
console.log(loopVariable);
}

Note: If the loop is not properly implemented, we may end up accessing data that is out of the bounds of the index.

for...each

Using for..each we can iterate through each and every element in an array. Easy to use.

var loopArrayVariable = new Array(10000);
loopArrayVariable.fill(1);

loopArrayVariable.forEach(function(loopVariable){
console.log(loopVariable);
});

for...of

The for...of statement creates a loop iterating over iterable objects.

var loopArrayVariable = new Array(10000);
loopArrayVariable.fill(1);

for (let loopVariable of loopArrayVariable) {
console.log(loopVariable);
}

for...in

The for...in statement iterates over the enumerable properties of an object.

var loopArrayVariable = new Array(10000);
loopArrayVariable.fill(1);

for (let loopVariable in loopArrayVariable) {
console.log(loopVariable);
}

Performance Results

To check the performance, I have implemented 10000 iterations on above loop types.

Javascript For loop performance

Here's how the different loops stacked up, based on Jsperf emulation performance results.

  1. for...in
  2. for...of
  3. for...each
  4. ordinary for loop 

Conclusion

There are different types of loops available with ES6 standards. the for...of statement should be preferred whenever possible.

Even though the for...in statement got better performance, it includes a few unwanted prototype properties, so it should not be used for looping.

Prefer for...of over for...in whenever possible.

If you enjoyed this article, please share with your developer friends. Thanks for reading!

Collect, analyze, and visualize performance data from mobile to mainframe with AutoPilot APM. Learn More!

Topics:
performance analysis ,performance ,javascript loops ,javascript performance ,web application performance

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}