How are javascript arrays implemented?

Question

Namely, how does the following code:

var sup = new Array(5);
sup[0] = 'z3ero';
sup[1] = 'o3ne';
sup[4] = 'f3our';
document.write(sup.length + "<br />");

output '5' for the length, when all you've done is set various elements?

EDIT: Forget the comparison to using it like a hashmap. I think this was confusing the issue.

My 'problem' with this code is that I don't understand how length changes without calling a getLength() or a setLength() method. When I do any of the following:

a.length
a['length']
a.length = 4
a['length'] = 5

on a non-array object, it behaves like a dict / associative array. When I do this on the array object, it has special meaning. What mechanism in JavaScript allows this to happen? Does javascript have some type of property system which translates

a.length
a['length']

into "get" methods and

a.length = 4
a['length'] = 5

into "set" methods?

Answer 1

If you're intending to implement objects with array-like access, the Array Mozilla dev center article is a great resource. Unfortunately I don't know the in depth details of Array implementation but there are a lot of details in that article.

Answer 2

Important to know is that when you do sup['look'] = 4; you are not using an associative array, but rather modify properties on the object sup. It is equivalent to sup.look = 4; since you can dynamically add properties on javascript objects at any time. sup['length'] would for an instance output 5 in your first example.

Answer 3

Everything in javascript is an object. In the case of an Array, the length property returns the size of the internal storage area for indexed items of the array. Some of the confusion may come into play in that the [] operator is overloaded. For an array, if you use it with a numeric index, it returns/sets the proper indexed item. If you use it with a string, it returns/sets the named property on the array object.

The actual underlying representation may differ between browsers (or it may not). I wouldn't rely on anything other than the interface that is supplied when working with it.

You can find out more about Javascript arrays at w3schools.com.

Answer 4

Array object inherits caller, constructor, length, and name properties from Function.prototype.

Answer 5

To add to tvanfosson's answer: In ECMA-262 (the 3.0 specification, I believe), arrays are simply defined as having this behavior for setting properties (See 15.4.5.1). There's no general mechanism underlying it (at least as of now) - this is just how it's defined, and how javascript interpreters must behave.