My New Favorite Loop
I recently discovered a new way to loop through an array in JavaScript that doesn’t use the standby Array.length property to determine the number of iterations:
var someArray = ["Dogs", "Cats", "Chickens"];
for (var a=0, o; o=someArray[a]; a++) {
document.write(o + ‘<br/>’);
}
Here is how it works. The initial expression part of the loop var a=0, o sets the initial value of a to zero, which is the first element in our array and at the same time initializes a variable named o. The o variable is important as it will eventually hold the individual elements from our array as we iterate through it.
The next part of the loop - the conditional - is probably different from the traditional condition used when iterating through a loop. Most texts have you test the the counter or iterator value against the total number of elements in the array. This normally look like a<someArray.length
In my example, we are assigning an element of the array into the o variable that was initialized in the initial expression. The element that is assigned, is based on the current value of the counter variable a. As long as there is an element in the array at the counter value, JavaScript evauates the for loop’s conditional statement as true, and the loop’s statement block executes. The best part here and in my opinion the clever aspect of this method, is that the variable o now contains the value of the array and can be used in the loop statement block without having to re-resolve the array element value.
The loop also performs quite well as JavaScript does not have to evaluate someArray.length each iteration through the loop. In fact I performed a few benchmark tests on the various versions of this loop and for iterations under 1000 the methods perform equally well. When I bump up the iterations to 10000 or more, the method I’ve described in this article, performs up to twice as fast!
I’ve also seen versions of this loop -
for (var a=0, len=someArray.length; a<len ; a++)
- where the array length is only evaluated once. This method performs slower in my benchmarks than the method described in this article.
One note here, this method is not appropriate for looping through arrays that contain either numbers or boolean values, as assigning the number 0 into a variable resolves as false in the conditional part of the loop.
Which browsers did you do your speed tests in? it’d be interested to see a comparison chart of the 3 methods in each of the major browsers (FF, IE, Safari)
I did my speed test in Firefox 1.5 PC. I will post my script tomorrow along with a table documenting those speeds.
sorry to sound like a dumb-ass but I don’t get it.
does the o=someArray[a] part resolve to “false” if the [a+1] element doesn’t exist? and that’s how it finishes?
This will loop also ends if you have an empty string as one of the member, or if you have an array of objects and one of the objects is undefined or null.
So to sumarize my understanding of the times you don’t want to use this type of looping is:
1. When there is the possiblity of a missing element within the array.
2. When you’re using numbers, as 0 will end the loop.
3. When you have boolean values as false will end the loop
4. When you’re using strings, as an empty string will end the loop.
5. When you’re using objects, as null or undefined object values will end the loop.
Given the above limitations, and on your statement that that improvements don’t appear until your go over 1000 items in the array, it seems to me that the very real potential of your code breaking by using this style of loop is simply not worth the a few processing cycles.
For the special case that you can actually use this type of loop with confidence, I suggest commenting your code profusely, including mentioning that it is subject to breaking under the above circumstances, so that when your array changes down the road, hopefully you will see that using this loop is what broke things.
Using a for/in loop can help with keeping things simple:
var aryTest = new Array(”Red”, “Green”, “Blue”);
for (var i in aryTest) {
alert(i + “: ” + aryTest[i]);
}
Nelson,
The for-in loop to iterate over an array has it’s own problems, in that you have to be very careful that the array your trying to iterate over has no extra properties added to it. These properties could be added by Array “helper” libraries that put additional methods on the array object to help with a variety of array related operations.
Plus the user can add properties to an array as simply as:
var arr = [ 1, 2, 3];
arr.myProperty = ‘hello’;
that will break your for-in loop.
Additionally, an array returned via a RegExp search using exec() will return an array with input and index properties (see: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp:exec ) and thos eextra properties will break your for-in loop.
In my experience, the way to iterate over the elements within a JavaScript array without having all sorts of pre-conditions on the array is to loop over the index of that array. The other methods mentioned here, the original post’s script and the for-in loop are quite likely to break, and under very typical usage scenarios.
Given all that, is it still better to evaluate the array’s length only once, as in the mentioned alternative?:
for (var a=0, len=someArray.length; a
Hmm. My comment was cut off, it seems. My question was whether it were better to use the form for (var i=0, len=myArray.length; i
Jonathan,
Unless the actions within the loop make modifications to the array (that is add or remove elements) then it is a good idea to store the array length in a variable and use that variable to to constrain the looping.
I don’t recommend this method at all. It would require extra documentation to alert programmers to what you’re doing and with all the aforementioned problems, it appears as little more than a cute hack.
Similarly, a while loop can be useful when iterating over a collection of elements:
var images = document.getElementsByTagName(’img’), i = 0;
while (img = images[i++]) {
//
}
That’s brilliant. Thank you.