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

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.

Answer 1

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.