For loop Variations in javascript

Question

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

for (var i=arr.length; i--;)
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.

"decrementing" loop are much much faster in js. as for the last one i would not use it , since in js false==0=="" . — mpm, Mar 30 '12 at 09:41
possible duplicate of [JavaScript - Are loops really faster in reverse...?](http://stackoverflow.com/questions/1340589/javascript-are-loops-really-faster-in-reverse) — Matt, Mar 30 '12 at 09:43
@camus The second one can be useful when looping through eg. a collection of DOM elements. — Rob W, Mar 30 '12 at 09:45
This [jsperf](http://jsperf.com/loops/32) tests all loops ... — Manse, Mar 30 '12 at 09:45
@ManseUK +1 for JSPerf. It's the first result for googling "jsperf for loops" — Rob W, Mar 30 '12 at 09:47
Hi Ashwin. I'm the author of the referenced post. Most of the examples were done for fun and exploration and carry no special benefit aside from demonstrating the flexibility of for loop syntax — AngusC, Mar 30 '12 at 15:32

jAndy · Accepted Answer · 2012-03-30T11:17:29.147

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.

score 2 · Answer 2 · answered Mar 30 '12 at 09:41

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.

score 2 · Answer 3 · answered Mar 30 '12 at 09:50

2

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 !!!

answered Mar 30 '12 at 09:50

Manse

37,765
10
83
108

These jsperf tests are very useful. Thank you! – Ashwin Krishnamurthy Mar 30 '12 at 11:41

Willem D'Haeseleer · Answer 4 · 2012-03-30T09:52:52.787

1

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.

edited Mar 30 '12 at 09:52

answered Mar 30 '12 at 09:42

Willem D'Haeseleer

19,661
9
66
99

For loop Variations in javascript

4 Answers4