Today, a buddy of mine (Jeremy Daley) asked me a (seemingly) simple question: “Did we ever establish if it was more beneficial to grab the length of an array before a for loop?  instead of including <array>.length within the “for” params?”

Obviously if the question were related to PHP the answer is quite evident: get the length first, then loop on the result.  For Javascript, this is a bit more confusing of a subject.  In many articles, you’ll notice that the Javascript community in whole is split on if Length is, indeed, a Property or a Method.  This is very much true when associating this against the Array object.

Doing a simple query in Google for “Javascript is length a method or object” won’t really get you the results you want (unless you search now of course ;) ).  But instead you will see many articles that throw around “property” or “method” being what Length is, thus making the concept that much more difficult to understand.

After digging around, I finally came to the actual source for Mozilla’s SpiderMonkey (the Javascript Engine for FireFox) to find the answer.  First things first, what is the source code of Array?  That was the most intriguing question.  The second was, is Length defined as a method or does it hold a statically defined property for our array object?

The answer really surprised me.  I actually thought for sure that “length” would be its separate method entirely, but instead found that it was, in fact, a property inside the Array class itself.  But, wait a minute, that’s not entirely true.  While it is a property, it instead is a setter method property.  In other words, the “property” of the array object is never really determined until you actually call the “length” setter property itself.  So, while you’re able to say “my_array.length” to obtain the length of your array, it actually is calling the setter method that calculates what exactly your array length is.

There is no wonders this concept is so easily misconstrued as saying that “length” is a property.  Because on one side of the coin its exactly that: a property of an object.  But until we actually look at the source code itself to see how array is coded, we see immediately that it is, actually, just a normal calculation method.

What does this mean?  It means that our assumptions to begin with (which method is faster) were true.  If we get the length of an array and define that as a variable, and then loop and calculate on that var, we can in turn create a faster more optimized for loop.  If instead we decide to call “length” on every iteration, we’re actually creating more overhead!

Note: It is also good to note here that if we try to issue typeof() on say myArray.length (ie: alert(typeof(myArray.length));) you’ll just get an integer as a result.  This shouldn’t be too confusing as it’s doing a typeof on the return result here, which is, in fact, an integer.

A simple test case that Jeremy gave is the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myArray = new Array();

for (var j = 0; j < 1000000; j++) {

  myArray.push("dude");

}



var startTime = new Date().getTime();

//for (var i = 0; i < myArray.length; i++)



var arrayCount = myArray.length;

for (var i = 0; i < arrayCount; i++) { }



var endTime = new Date().getTime();



alert(endTime - startTime);

If we run this test (locally of course) we’ll see a 2millisecond average run-time.  If we comment out our length var and for loop, and instead uncomment the for loop that’s currently commented out, we’ll notice that we get an average load-time of 6milliseconds.

1
2
3
4
5
6
7
8
9
10
11
12
13
var myArray = new Array();

for (var j = 0; j < 1000000; j++) {

  myArray.push("dude");

}



var startTime = new Date().getTime();

for (var i = 0; i < myArray.length; i++) { }

//var arrayCount = myArray.length;

//for (var i = 0; i < arrayCount; i++) { }



var endTime = new Date().getTime();



alert(endTime - startTime);

It should also be noted here, that I did not check other Javascript Engines for other browsers.  I realize that this could be a bit of a discussion amongst the groups, but I’m quite satisfied relying on what Mozilla’s team is doing (I really, honestly, could care less what IE is doing).   So, maybe one day I’ll do this digging (or someone else could, either way..) but for now, I’m happy with what we have at the moment.

One may also ask the question “What does this even matter if length for an Array Object is a method or a property?”.  The answer should come to you almost immediately.  If length were, indeed, a property that always has the most updated information, then we could in turn treat the “property” as we would any variable.  This would be beneficial since we then could include the length property question (as we did in the second test example script above) and notice absolutely no difference in overhead versus the first example script.  But, since this is not a true variable, and instead is a method, that means every iteration of our for loop, we are constantly calling the length method to crunch the array and return the count of indexes it finds.  This in turn creates the overhead that we so desperately want to avoid when considering an optimized frontend when considering loadtime and speed.

Conclusion?  Both worlds are correct about “property” or “method”, but the more definitive answer is that it’s actually, at the end of the day, just a method.  Happy coding!