How does Javascript store arrays

Question

Consider the following code:

var arr = [];
arr["abc"] = 1;
arr["bcd"] = 2;
console.log(arr.length); // outputs 0
arr["1"] = "one"; // notice the subscript content is in quotes
console.log(arr.length); // outputs 2
console.log(arr); // outputs [undifined, "one"]
console.log(arr["abc"]); // outputs 1

In the above program, I have defined the array arr which is first assigned with string indexes, so the array length stays 0. I read somewhere that when string value is used for subscript, the array object is treated as an ordinary object. So, I can understand if the length is zero (Should probably be undefined).

Then, when I use a subscript of "1", which should be of string type is taken as a Number and the length is incremented. Then when the array is printed there is a value of undefined for the index 0 and index 1 has the value "one" ( Note that the indexes "abc" and "bcd" are not shown when printed.

Finally, when I try to access the "abc" value, I get the value.

So my questions are the following:

1. What happens when an array is assigned with a string index and why does the length remain the same?
2. Does the javascript interpreter tries convert the index to a Number before using it?
3. Where are the values of the array string indexes stored and why are they not shown when I try to print the array?
4. Finally, can someone point me to a good article which explains the implementation details of javascript's features.

Thanks in advance.

Answer 1

This is an interesting question. JavaScript treats arrays and structures in similar ways.

var arr = [];

This created a new variable and set it to an empty array.

arr["abc"] = 1;

This created a property of arr called abc and assigned it the value 1. arr is now an array with a user-defined property.

arr["bcd"] = 2;

This created a second property of arr called bcd and assigned it the value 2. arr now has two user-defined properties.

console.log(arr.length); // outputs 0

The array still doesn't have any elements, so its length is zero.

arr["1"] = "one"; // notice the subscript content is in quotes

"1" evaluates to an integer and, since arr is an array (though it has some user-defined properties), it assigns "one" to the second (zero-based) element of the array.

console.log(arr.length); // outputs 2

arr[0] doesn't exist, but index 1 does, so the array has length 2.

console.log(arr); // outputs [undefined, "one"]

No definition was provided for index 0.

console.log(arr["abc"]); // outputs 1

Now we're accessing the user-defined property.

Thank you to Peter Flannery for providing the link to MDN's documentation on this.

Answer 2

1. JavaScript arrays are just a regular object that treat numerical indexes specially. When using strings as indexes, the object behaves like any other JavaScript object and adds them as properties on the object.

   When you use numerical indexes, the Array behavior kicks in.

   arr.abc = 1;
   arr.bcd = 2;
   arr[1] = 'one';
   

2. Nope. Quite the opposite actually. Numbers are coerced to strings.

3. The first two properties are stored as regular object properties. Printing an object doesn't typically print its properties, so you don't see them. You instead see [undefined, "one"] because you haven't assigned anything to arr[0] (so it's undefined).

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript