Browsing an array in JavaScript and benchmark

Demonstration and benchmark of three ways to scan the contents of an array. We will calculate the execution time of for(), for in and forEach.

for ()

A simple loop that increments an index and accesses successive elements by this index.

var x = ["one", "two", "three" ];
for(var i= 0; i < x.length; i++)
{
     document.write(x[i]);
}

This is the fastest method.

for in

A for in loop is the equivalent of foreach in PHP and other languages, it assigns the array elements directly to a variable.

for(var i in x)
{
     document.write(x[i]);
}

This method is less efficient.

Firefox has another extra special syntax:

for each(var i in x)
{
     document.write(i);
}

But that is not compatible with other browsers and it is therefore unnecessary to dwell on it.

The forEach method

It was added in version 1.6 of JavaScript and is supported by Firefox and Chrome, then by Internet Explorer 9.

x.forEach(function(y) { 
   document.write(y); 
});

One can associate the method directly to a literal array:

["one", "two", "three"].forEach(function(y) { document.write(y); }); 

If you love compact code, it works well, but it is less efficient than the simple loop and the compatibility is limited.

Other methods are still possible again but not very readable.

Benchmarks...

To compare performances, we make a loop with each method. The start time is obtained by these instructions:

var newdate = new Date();
var fordiff = newdate.getTime();

This time is taken at the start and end of execution. The difference in milliseconds is what is displayed.

The comparative tests give the following order on all browsers:

1. for()
2. forEach (not supported by IE before IE9)
3. for in

The absolute values depend on hardware, only count the relative values. They are in the same proportion with all browsers.

If we exclude methods that are not compatible with all browsers, remain for () and for in.
The second is simpler but less efficient. It should only be used when the execution time is not critical.

Here is the effective demonstration...

For ()

var x = ["one", "two", "three" ];
for(var i= 0; i < x.length; i++)
{
     document.write(x[i]);
}

Result:

For in

for(var i in x)
{
   document.write(x[i]);
}

Result:

forEach method

It was added in JavaScript 1.6.

x.forEach(function(y) { 
   document.write(y); 
});

With a literal:

["one", "two", "three"].forEach(function(y) { document.write(y); }); 

Execution times...

Full source code:

var fortime = 0;
var forintime = 0;
var foreachtime = 0;
/* creating an array */
var x = new Array();
for(var i = 0; i < 100000; i++)
{
	x[i] = "12345";
}
function mainloop()
{
  var newdate = new Date();
  var fordiff = newdate.getTime();
  for(var j = 0; j < 10; j++)
  {
    for(var i= 0; i < x.length; i++)
    {
      var z = x[i];
    }
  }	
  newdate = new Date();
  fortime = fortime + (newdate.getTime() - fordiff);
  newdate = new Date();
  var forindiff = newdate.getTime();
  for(var j = 0; j < 10; j++)
  {
    for(var i in x)
    {
      var z = i;
    }
  }	
  newdate = new Date();
  forintime = forintime + (newdate.getTime() - forindiff);
  newdate = new Date();
  var foreachdiff = newdate.getTime();
  for(var j = 0; j < 10; j++)
  {
    x.forEach(function(y) 
    { 
      var z = y; 
    });
  }
  newdate = new Date();
  foreachtime = foreachtime+(newdate.getTime()-foreachdiff);	
}	
mainloop();