Running a loop in Javascript

Question

How my research leads me to think that for loops is the fastest iterative construct in JavaScript. I thought that declaring a conditional length for a for loop would also be faster ... to make it clearer, which of the following, in your opinion, would be faster?

Example ONE

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

TWO strong example>

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

my logic follows that at each iteration in the example, one access to the length of myLargeArray at each iteration is more expensive than the computational cost, and then access to a simple integer value, as in example two?

Answer 1

Unlike some of the instructions below, the length of the array is not calculated at each iteration. Array length is a property that is set by modifying operations such as pop , push , shift , unshift , splice , etc.

You will see a slight increase in performance because, since property searches have a higher cost than a local variable . Therefore, caching lengths is a good idea. However, you will not see much difference if you are not dealing with huge data sets.

There is a special case where the length is actually calculated at each iteration. This happens with HTML node collections. Since these are living objects, length is not a property in the sense that it is with an array. If you do this:

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

Then the collection is analyzed at each iteration.

As for optimizing the for loop, I usually use these methods 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 is a great resource for the fad of JavaScript.

Although the length property is defined on the array itself, there is still overhead for performing a search on each iteration of the loop. Although the latest JavaScript engines can apply optimization in this case, there is no way to find out if the code will work on one of these new engines or not.

Answer 3

I don’t think you need to lose anything by going with the second version every time, although I would be surprised if the length of the array was actually calculated from scratch every time using the first approach, unless the array actually mutated the loop.

Remember that you can declare more than one variable in the first part of for :

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

Answer 4

From High Performance JavaScript

Reduced 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--); 

Reduce 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 calculated at each iteration of the loop (first example). link1 link2

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