FOR loop performance in Javascript

Question

As my research leads me to believe that for loops are the fastest iteration construct in javascript language. I was thinking that also declaring a conditional length value for the for loop would be faster... to make it clearer, which of the following do you think would be faster?

Example ONE

for(var i = 0; i < myLargeArray.length; i++ ) {
    console.log(myLargeArray[i]);
} 

Example TWO

var count = myLargeArray.length;
for(var i = 0; i < count; i++ ) {
    console.log(myLargeArray[i]);
} 

my logic follows that on each iteration in example one accessing the length of myLargeArray on each iteration is more computationally expensive then accessing a simple integer value as in example two?

Answer 1

Contrary to some of the statements below, the length of an Array is not calculated on each iteration. The length of an Array is a property which is set by modifying operations such as pop, push, shift, unshift, splice and so forth.

You will see a minor performance hit though since a property lookup has a higher cost than a local variable. Therefore caching the length is a good idea. However you won't see a big difference unless you are dealing with huge datasets.

There is a special case though where the length is indeed calculated on each iteration. This is the case with HTML node collections. Since these are live objects, the length is not a property in the sense it is with an array. If you do this:

for (var i=0; i < collection.length; i++) {
    collection[i]
};

Then the collection is parsed on each iteration.

As for optimizing a for loop, I usually use these techniques for caching:

// if order is of no concern, just iterate from length-1 to 0
for (var i = arr.length - 1; i >= 0; i--){
    arr[i]
};

// use the for loop statement to set up scoped variables
for (var i=0, length = arr.length; i < length; i++) {
    // do something
}

Answer 2

From JavaScript Garden, a great resource on the quirks of JavaScript.

Although the length property is defined on the array itself, there is still an overhead for doing the lookup on each iteration of the loop. And while recent JavaScript engines may apply optimization in this case, there is no way of telling whether the code will run on one of these newer engines or not.

Answer 3

I don't think you have anything to lose by going with the second version every time, although I would be surprised if the array length actually got calculated from scratch each time with the first approach unless the array actually gets mutated by the loop.

Don't forget that you can declare more than one variable in the first part of the for:

for(var i = 0, count = myLargeArray.length; i < count; i++ ) {
    console.log(myLargeArray[i]);
}

Answer 4

From High Performance JavaScript

Decreasing the work per iteration:

//original loops
for (var i=0; i < items.length; i++){
process(items[i]);
}

var j=0;
while (j < items.length){
process(items[j++]]);
}

var k=0;
do {
process(items[k++]);
} while (k < items.length);



//minimizing property lookups
for (var i=0, len=items.length; i < len; i++){
process(items[i]);
}

var j=0,
count = items.length;
while (j < count){
process(items[j++]]);
}

var k=0,
num = items.length;
do {
process(items[k++]);
} while (k < num);


//minimizing property lookups and reversing
for (var i=items.length; i--; ){
process(items[i]);
}

var j = items.length;
while (j--){
process(items[j]]);
}

var k = items.length-1;
do {
process(items[k]);
} while (k--);

Decreasing the number of iterations:

//credit: Jeff Greenberg
var i = items.length % 8;
while(i){
process(items[i--]);
}
i = Math.floor(items.length / 8);
while(i){
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
}

See JavaScript Optimization

Answer 5

Yes you are right myLargeArray.length is being calculate in each iteration of loop ( first example). link1 link2

for(var i = 0; i < myLargeArray.length; i++ ) {
    console.log(myLargeArray[i]); 
}