Six Ways to Iterate Through an Array (or Chrome’s V8 is a Monster)

There are actually all kinds of ways to iterate through an array in JavaScript. Here, I will concentrate on six of them, describe their advantages, and do performance testing to actually prove which of them is the faster.

Loop 1 – the native for loop

for (var i=0; i < arrTestData.length; i++) {
	/* do stuff */
};

We’ve all seen this a million times. It is the easiest to read, and the most common. It is also the least efficient.

Loop 2 – the native for loop improved

for (var i=0,j=arrTestData.length; i<j; i++) {
	/* do stuff */
};

The improvement here, is that a second variable j is employed, to stop us having to query the length property of the array with every iteration. Getting the length can be a costly process and it makes more sense to just do this once. Where it is important that iterate incrementally, and in ascending order (i.e. 0,1,2,3,4,5) this is the fastest method.

Loop 3 – the native for loop in reverse

for (var i = arrTestData.length - 1; i >= 0; i--){
	/* do stuff */
};

The main advantage of this method is that only one variable is employed. It is slightly faster than the other for loops, but goes in descending order (i.e. 5,4,3,2,1,0) which may make it inappropriate for your needs.

Loop 4 – the native while loop

var i = 0;
while (i < arrTestData.length) {
	/* do stuff */
	i++;
};

This is essentially the same as Loop 1. We are still querying the length of the array with every iteration.

Loop 5 – the native while loop in reverse

var i = arrTestData.length - 1;
while (i > 0) {
	/* do stuff */
	i--;
}

This is essentially the same as Loop 2. We are storing the length of the array, to avoid querying with every iteration.

Loop 6 – the native while loop in reverse improved

var i=arrTestData.length;
while (i--) {
	/* do stuff */
}

This is the tidiest code, and the fastest. Since a zero integeric value is falsy, our condition is as simple as it could be, and only one variable is employed. I give credit to Richard Hubbard (get a blog already, Richard!) for showing me this.

Below, are the results of my testing.

I did every test three times, and took the average as the result. Internet Explorer 6 and 7 both presented a confirm dialogue box, asking if I wanted to keep running the script, which paused execution of the code. This resulted in two vastly bloated results, which I have generously ignored. It didn’t help – IE is the obvious loser here in every instance, surprisingly showing very little improvement between IE6 and IE7.

Copying the data was a pain – although in OSX I could copy and paste from pretty much any source, including alert dialogue boxes. In Windows only Firefox would let me do this.

A shock in all of this, was just how fast Chrome performed, clocking in at 100,000 iterations per millisecond! I actually wrote different versions of the code just for Chrome, just to ensure it was actually doing something. That V8 engine they have in there is amazing.

The point of this, though, is not to compare browser speed. Of course, we can’t compare between OSX and Windows XP in this instance, the hardware was different. Also, this is just a very specific and small set of tests and cannot be considered a fair test of browser speed. Really, what we wanted to achieve was to see which method of iterating through an array is the most efficient.

To that end, here is a final table, showing the average result across browsers for each loop.

The obvious conclusion is that although Loop 6 is the fastest, there is not that much in it – whereas Loop 1 and Loop 4 are dramatically slower than the others, demonstrating just how expensive the querying of the length property is.