JavaScript “Associative Arrays” Considered Harmful

The Problem

Try the following code on an empty page, one without any JavaScript libraries added: Try the following code on an empty page, one without any JavaScript libraries added:

 var associative_array = new Array (); 
 associative_array[ "one" ] = "Lorem" ; 
 associative_array[ "two" ] = "Ipsum" ; 
 associative_array[ "three" ] = "dolor" ; 
 for (i in associative_array) { alert (i) };

You'll get three sequential alert boxes: “one”; “two”; “three.” This code has a predictable output and looks logically sound: you're declaring a new array, giving it three string keys, then iterating over them. You'll get three sequential alert boxes: “one”; “two”; “three.” This code has a predictable output and looks logically sound: you're declaring a new array, giving it three string keys, then iterating over them .

Now do this: replace “Array” with “RegExp” and run the code again . As if by magic, this also works! It's not the only one. Try Boolean , or Date , or String , and you'll find they all work as well. It works because all you're doing is setting properties on an object (in JS, foo["bar"] is the same as foo.bar ), and a for..in loop simply iterates over an object's properties. All data types in JS are objects (or have object representations), so all of them can have arbitrary properties set. Now do this: replace “Array” with “RegExp” and run the code again . As if by magic, this also works! It's not the only one. Try Boolean , or Date , or String , and you'll find they all work as well. It works because all you're doing is setting properties on an object (in JS, foo["bar"] is the same as foo.bar ), and a for..in loop simply iterates over an object's properties. All data types in JS are objects (or have object representations), so all of them can have arbitrary properties set.

In JavaScript, one really ought to use Object for a set of key/value pairs. But because Array works as demonstrated above, JavaScript arrays (which are meant to benumeric ) are often used to hold key/value pairs. This is bad practice. Object should be used instead. In JavaScript, one really ought to use Object for a set of key/value pairs. But because Array works as demonstrated above, JavaScript arrays (which are meant to be numeric ) are often used to hold key/value pairs. This is bad practice .Object should be used instead.

I'm not trying to ridicule or scold. This misconception is too common to attribute it to stupidity, and there are many legitimate reasons for the confusion. But this is something that needs to be cleared up if JavaScript is ever to be used on a grand scale. I'm not trying to ridicule or scold. This misconception is too common to attribute it to stupidity, and there are many legitimate reasons for the confusion. But this is something that needs to be cleared up if JavaScript is ever to be used on a grand scale.

If you need further evidence that Array is not meant to be used this way, consider: If you need further evidence that Array is not meant to be used this way, consider:

• There is no way to specify string keys in an array constructor. There is no way to specify string keys in an array constructor.
• There is no way to specify string keys in an array literal. There is no way to specify string keys in an array literal.
• Array.length does not count them as items. In the above example, associative_array.length will return 0 . Array.length does not count them as items. In the above example, associative_array.length will return 0 .
• The page on Arrays in the Mozilla JavaScript reference makes no mention of this usage. (Nor does the ECMAScript specification, by the way, but you'll have to do your own legwork to verify that, because I'm not linking to page 88 of a kajillion-page PDF.) The page on Arrays in the Mozilla JavaScript reference makes no mention of this usage. (Nor does the ECMAScript specification, by the way, but you'll have to do your own legwork to verify that, because I'm not linking to page 88 of a kajillion-page PDF.)