Javascript array length incorrect on array of objects

JavascriptArrays

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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 hand, 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.. :-)

Solution 2 - Javascript

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

In a the largest key is 2 so 1+2 is 3.

In b there are no integer keys (the keys there are key1 and key2 which cannot be converted into ints) so Javascript 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

Solution 3 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSerentiView Question on Stackoverflow
Solution 1 - JavascriptThe Code PimpView Answer on Stackoverflow
Solution 2 - JavascriptItay MamanView Answer on Stackoverflow
Solution 3 - JavascriptoutisView Answer on Stackoverflow