CODEWITHSUNDEEP
javascriptfor-loop
Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

For loop Variations in javascript

In this website there are a list of for loop variations. I can understand the usage of for(var i=0, len=arr.length; i<len ;i++) loop (where arr is an array), since the arr.length isn't calculated in every step there appears to be a marginal performance gain. However what are the advantages of using the other variants? For instance, loops like

  1. for (var i=arr.length; i--;)
  2. for (var i=0, each; each = arr[i]; i++)

Are there any noticeable changes in performance when using different for loop variations? I generally use for(var i=0, len=arr.length; i<len ;i++) even for very big arrays. So I just want to know if there is something I am missing out here.

Upvotes: 13

Views: 2577

Answers (4)

jAndy
jAndy

Reputation: 236012

It is widely considered that a reversed while loop

var loop = arr.length;
while( loop-- ) {
}

is the fastest loop-type available in C-like languages (this also applied to ECMAscript for quite a while, but I think all up-to-date engines are pretty even on standard loops today). ( jsperf )

Your 'variations' are actually no variations, but just different usage of the conditional statement within the for-loop (which, actually makes it a variation..doh!). Like

1) for (var i=arr.length; i--;)

Just uses the conditional part from the for-loop to do both, iterating and checking if i has a truthy value. As soon as i becomes 0 the loop will end.

2) for (var i=0, each; each = arr[i]; i++)

Here we get the element from each iteration, so we can directly access that within the loop body. This is commonly used when you are tired of always repeating arr[ n ].

You're doing well in caching the .length property before looping. As you correctly mentioned, it is faster because we don't have to access that property in every iteration. Beyond that, it's also required sometimes in DOM scripting, when dealing with 'live structures' like HTMLCollections.

Upvotes: 7

Willem D&#39;Haeseleer
Willem D&#39;Haeseleer

Reputation: 20180

This is a poor use of a for each loop because it will fail on falsy values , breaking the loop.

for (var i=0, each; each = arr[i]; i++)

I also wouldn't use this loop ( even tough it may be faster... )

for (var i=arr.length; i--;)

It looks confusing and is less readable, you might as well write as reverse while loop then.

Upvotes: 1

Manse
Manse

Reputation: 38147

According to jsperf the fastest type of loop in JavaScript is 

var arr = new Array(10);
var i = 0;
while (i < arr.length) {
 arr[i];
 i++;
};

just ahead of (my default loop)

var arr = new Array(10);
for (var i = 0; i < arr.length; ++i) {
 arr[i];
};

With this being the slowest :

var arr = new Array(10);
arr.forEach(function(x) {
 x;
});

at least on Chrome 17 on OSX 10.7.3. So it seems the "default" loop is fine after all !!!

Upvotes: 2

Khodor
Khodor

Reputation: 1006

The point is when you're decrementing the iterator, you're actually comparing it to 0 rather than the length, which is faster since the "<, <=, >, >=" operators require type checks on both left and right sides of the operator to determine what comparison behaviour should be used.

the fastest loop is: (If you don't care about the order of course)

var i = arr.length
while(i--)
{
}

If you do care about the order, the method you're using is fine.

Upvotes: 2

Related Questions