What's the fastest way to loop through an arra

Question

I learned from books that you should write for loop like this：

for(var i=0, len=arr.length; i < len; i++){
    // blah blah
}

so the arr.length will not be calculated each time.

Others say that the compiler will do some optimization to this, so you can just write:

for(var i=0; i < arr.length; i++){
    // blah blah
}

I just want to know which is the best way in practice?

Answer 1

While loop is a bit faster than for loop.

var len = arr.length;
while (len--) {
    // blah blah
}

Use while loop instead

Answer 2

var arr = []; // The array
var i = 0;
while (i < arr.length) {
    // Do something with arr[i]
    i++;
}

i++ is faster than ++i, --i and i--

Also, you can save the last line doing arr[i++] the last time you need to access i (but this can be hard to debug).

You can test it here (with other loop tests): http://jsperf.com/for-vs-whilepop/5

Answer 3

The most elegant solution I know of is using map.

var arr = [1,2,3];
arr.map(function(input){console.log(input);});

Answer 4

As of June 2016, doing some tests in latest Chrome (71% of the browser market in May 2016, and increasing):

• The fastest loop is a for loop, both with and without caching length delivering really similar performance. (The for loop with cached length sometimes delivered better results than the one without caching, but the difference is almost negligible, which means the engine might be already optimized to favor the standard and probably most straightforward for loop without caching).
• The while loop with decrements was approximately 1.5 times slower than the for loop.
• A loop using a callback function (like the standard forEach), was approximately 10 times slower than the for loop.

I believe this thread is too old and it is misleading programmers to think they need to cache length, or use reverse traversing whiles with decrements to achieve better performance, writing code that is less legible and more prone to errors than a simple straightforward for loop. Therefore, I recommend:

• If your app iterates over a lot of items or your loop code is inside a function that is used often, a straightforward for loop is the answer:

  for (var i = 0; i < arr.length; i++) {
    // Do stuff with arr[i] or i
  }
  

• If your app doesn't really iterate through lots of items or you just need to do small iterations here and there, using the standard forEach callback or any similar function from your JS library of choice might be more understandable and less prone to errors, since index variable scope is closed and you don't need to use brackets, accessing the array value directly:

  arr.forEach(function(value, index) {
    // Do stuff with value or index
  });
  

• If you really need to scratch a few milliseconds while iterating over billions of rows and the length of your array doesn't change through the process, you might consider caching the length in your for loop. Although I think this is really not necessary nowadays:

  for (var i = 0, len = arr.length; i < len; i++) {
    // Do stuff with arr[i]
  }
  

Answer 5

A basic while loop is often the fastest. jsperf.com is a great sandbox to test these types of concepts.

https://jsperf.com/fastest-array-loops-in-javascript/24

Answer 6

"Best" as in pure performance? or performance AND readability?

Pure performance "best" is this, which uses a cache and the ++prefix operator (my data: http://jsperf.com/caching-array-length/189)

for (var i = 0, len = myArray.length; i < len; ++i) {
  // blah blah
}

I would argue that the cache-less for-loop is the best balance in execution time and programmer reading time. Every programmer that started with C/C++/Java won't waste a ms having to read through this one

for(var i=0; i < arr.length; i++){
  // blah blah
}