Today I have research for the loop which is the very basic to make some operations in JavaScript.
In this research we will take a look, what is the fastest way loop method for handle big data array?

Problem in Loop

We all already know that there is a big problem in loop.
When you are want to iterate big data array, loop is blocking, so there is possibility to make your application freeze if you are not care to choose the loop method properly.

Myth in fastest loop

So far I have already searching through google and find the best answer from stackoverflow about fastest loop in javascript is :

  1. for loop cached length

    1
    2
    3
    for (var i = 0, len = array.length; i < len; i++) {
    // your code
    }
  2. while reverse cached length

    1
    2
    3
    var i = array.length; while (i--) {
    // your code
    }

A lot of my project is using this above answer for loop, and the second answer is the fastest loop method.
But actualy, there is still another fast loop way that I just found it yesterday. He found another fast loop method which is he described at medium here.

I very courious about his benchmark and I also want to create my own benchmark about loop in javascript.

The loop method in javascript

Before we going into the main benchmark, there is many loop method available in javascript, it is:

  • for
    A for loop repeats until a specified condition evaluates to false. This statements is very similar with Java and C for loop.
    Example
    1
    for(var i=0; i < array.length;i++) {}
  • for in
    The for in statement iterates a specified variable over all the enumerable properties of an object.
    Example
    1
    for(var i in array) {}
  • do while
    The do while statement repeats until a specified condition evaluates to false.
    Example
    1
    2
    3
    4
    var i = 0;
    do {
    i++;
    } while (i < array.length)
  • while
    A while statement executes its statements as long as a specified condition evaluates to true.
    Example
    1
    2
    3
    4
    var i = 0;
    while (i < array.length) {
    i++;
    }
  • forEach
    The forEach() method executes a provided function once for each array element.
    Example
    1
    2
    3
    array.forEach(function(value, key) {
    console.log(value);
    });

Benchmark Loop

Based on above loop statements, I will not benchmarked them all. I just choose 3 fastest loop only.

Setup boilerplate

This will create array for 1 million element and executed before the benchmark loop running.

1
2
3
4
5
var array = [];
for(let x=0;x<1000000;x++) {
array.push(x);
}
var result = '';

Setup block

I will use let than var because using let for loop is more faster than using var. Why? because in browser if you using var for benchmarking without function scope, var will be added to global object.

  • for with cached length (this is best stackoverflow answer)

    1
    2
    3
    for(let i=0, max=array.length;i<max;i++) {
    result = array[i];
    }
  • while reverse (most people assume this is fast for browser)

    1
    2
    3
    4
    let max = array.length;
    while (max--) {
    result = array[max];
    }
  • another for (this is the fastest loop)

    1
    2
    3
    4
    5
    let i = 0;
    const max = array.length;
    for(; i < max; i++) {
    result = array[i];
    }

Benchmark Result

Here is the benchmark result from jsperf.

Conclusion

Based on benchmark result, I can confirm that the fastest loop is

1
let i = 0;const max = array.length;for(; i < max; i++) {}

You can read in very detail how he found this fastest loop in here.

Thank You