Why Do Arrays Behave This Way When I Add Named Properties?

I did following experiment in browsers console I created a new Array. Added 'foo' to the Array as named index 'name'. Added 'bar' to the Array using push method. 4 & 5 are te

Solution 1:

.push() returns 1 which is the length of the Array, but it must be 2 as the Array has two values "foo" & "bar"

No, because arrays in JavaScript are not associative data structures (even though you can attach arbitrary properties to them). The only items that count as "array contents" are those whose property names satisfy certain conditions.

You should also be aware that length may also report a number greater than what you expect if the array has "holes". For example:

var a = [1, 2, 3];
console.log(a.join(" "), a.length); // "1 2 3", 3delete a[1];
console.log(a.join(" "), a.length); // "1  3", still 3!

Test 4 shows that the Array has only one value "bar" but test 5 oppose it showing that it also has a value "bar".

That's irrelevant. The array also has many other properties, but join will only touch those mentioned earlier.

Why doesn't Array methods (push, join etc) works on key/value pairs ?

Because that's what the spec says.

Then how does associative Array works and how we can handle it(methods, properties etc).

Use a plain object instead of an array if you want string keys.

Solution 2:

JavaScript doesn't really have associative arrays. Being able to do myArray["foo"] = "bar" is a side effect of arrays simply being objects, and objects having properties.

Only numeric properties count as elements of the array. If you do myArray["foo"] = "bar" you are not adding an element to the array, you're simply adding a property to the object. That's different to doing myArray[0] = "bar" which is adding an element, and will accordingly update the length property of the array object.

Solution 3:

In JavaScript you cannot address array elements with a string, only integers. So,

1.var myArray = [];            // undefined2. myArray["name"] = "foo";     // "foo"3. myArray.push("bar");

myArray will only contain "bar" since it ignores myArray["name"] = "foo"; which is why you get length 1.

Solution 4:

Just like functions, Arrays are objects. But there are many Array prototype functions which purposefully do not access the properties of object. There is no 'associative array' in JavaScript, other than object and arrays depending on the function or code can behave or be leveraged in the same way you would use an associative array. You will encounter the same confusion in for loops when iterating over object key/pairs vs array values. In general though they are quite effective, there is a good book called Java Script the good parts. Which also then highlights the features or 'bad parts' to avoid or are dangerous. Googling about the sharp edges of objects and arrays in Javascript yields some good reads. They are not complex, but you do have to understand the more subtle ways Java is not like JavaScript.

Solution 5:

Arrays in Javascript are not meant to be associative - when you add a property via a key you're actually adding it to the array object, not to the array itself.

If you want a key:value pair, use an Object