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.

for of

for (let i of x) {
     document.write(i);
}

List the values ​​in the array directly, not the indices.

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
3. for on
4. for in

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

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:

for of

for(let i of x) {
     document.write(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 foroftime = 0;
var foreachtime = 0;

/* Making 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 forofdiff = newdate.getTime();
	for(var j = 0; j < 10; j++)	{
		for(let i of x)	{
    		var z = i;
		}
	}	
	newdate = new Date();
	foroftime = foroftime + (newdate.getTime() - forofdiff)

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