Javascript array length incorrect on array of objects

Question

Could someone explain this (strange) behavior? Why is the length in the first example 3 and not 2, and most importantly, why is the length in the second example 0? As long as the keys are numerical, length works. When they are not, length is 0. How can I get the correct length from the second example? Thank you.

a = [];
a["1"] = {"string1":"string","string2":"string"};
a["2"] = {"string1":"string","string2":"string"};
alert(a.length); // returns 3

b = [];
b["key1"] = {"string1":"string","string2":"string"};
b["key2"] = {"string1":"string","string2":"string"};
alert(b.length); // returns 0

Answer 1

From the ECMAScript standard, ECMA-262, 5th ed.

15.4.5.2 length

The length property of this Array object is a data property whose value is always numerically greater than the name of every deletable property whose name is an array index.

Note the length property of an array only takes into account array indices, which are integers; setting other properties doesn't affect length.

For an array, a["3"] is equivalent to a[3] (this behavior is specified by § 15.4.5.1); 3 is an array index rather than a property. Thus setting a["3"] affects the array's length. b["key1"] is equivalent to b.key1. Setting properties don't affect the length of a collection.

Answer 2

length returns 1 + the largest integer key in the object.

In a the largest key is 2 so 1+2 is 3 In b the there are no integer keys (the keys there are "key1" and "key2" which cannot be converted into ints) so it assumes that the largest key is -1, and 1 + -1 yields 0.

This program will help you see that:

a = [];
a["1"] = {};
a["4"] = {};
alert(a.length); // Prints 5

Answer 3

One thing to note is that there is a difference between regular arrays and associative arrays. In regular arrays (real arrays), the index has to be an integer. On the other had, associative arrays can use strings as an index. You can think of associative arrays as a map if you like. Now, also note, true arrays always start from zero. Thus in your example, you created an array in the following manner:

a = [];
a["1"] = {"string1":"string","string2":"string"};
a["2"] = {"string1":"string","string2":"string"}

Javascript was able to convert your string indexes into numbers, hence, your code above becomes:

a = [];
a[1] = {"blah"};
a[2] = {"blah"};

But remember what i said earlier: True arrays start from zero. Therefore, the javascript interpreter automatically assigned a[0] to the undefined. Try it out in either firebug or the chrome/safari console, and you will see something like this when you try to print "a". You should get something like "[undefined, Object, Object]. Hence the size 3 not 2 as you expected.

In your second example, i am pretty sure you are trying to simulate the use of an associated array, which essentially is adding properties to an object. Remember associated arrays enable you to use strings as a key. So in other terms, you are adding a property to the object. So in your example:

b["key1"] = {"string1":"string","string2":"string"};

this really means:

b.key1 = {"string1":"string","string2":"string"};

Initializing b =[] simply creates an array, but your assignment doesn't populate the array. It simply gives "b" extra properties. Hope this helps.. :-)