Question

When iterating over a string or array (or anything else with a length property), I’ve always used a loop like this:

var foo = [...];
var i;
for(i=0; i<foo.length; i++) {
    // do something
}

However, I just encountered someone who did this:

var foo = [...];
var fooLen = foo.length;
var i;
for(i=0; i<fooLen; i++) {
    // do something
}

He said he thought the “.length” was recalculating the length, thus the loop would recalculate the length of the string/array over and over, so by saving its length to a variable it would be more optimized.

I always assumed length was just a value property because of the way it’s used (it’s not "asdf".length(), it’s "asdf".length) but is this not the case?

Answer 1

There are some situations where putting the length into a local variable is faster than accessing the .length property and it varies by browser. There have been performance discussions about this here on SO and numerous jsperf tests. In a modern browser, the differences were not as much as I thought they would be, but they do exist in some cases (I can’t seem to find those previous threads).

There are also different types of objects that may have different performance characteristics. For example, a javascript array may have different performance characteristics than the array-like object returned from some DOM functions like getElementsByClassName().

And, there are some situations where you may be adding items to the end of the array and don’t want to be iterating through the items you add so you get the length before you start.