Painfully Obvious.

Jump to menu ↓
article
49

JavaScript “Associative Arrays” Considered Harmful

• Posted in Development, JavaScript, Web

I hesitate to add to the proliferation of “considered harmful” essays, but this is an important point, and it needs a URL, if only to cut down on the amount of typing I have to do.

The Problem

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.

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 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.

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 literal.
  • 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 History

This confusion has several other contributing factors:

  • In PHP, a language that many JavaScript users are also familiar with, numeric arrays and associative arrays are treated more or less identically. And since a set of key/value pairs goes by about eleven different names, depending on the language, this usage is quite often a result of unclear definitions of terms.
  • JavaScript is interpreted, not compiled, and many people have learned it by example. Thus a third‐party script that uses Array improperly might rub off on its users.
  • JavaScript started with no specification, then received a poor specification, and I know few people who spend their free time reading specifications. Especially bad ones.
  • Because there is no formal construct for key/value pairs, JavaScript cannot distinguish between creating a hash and setting properties on an object. As we’ve demonstrated, any object can have arbitrary properties, and a for..in loop simply iterates over each of these properties, so the code above is not explicitly incorrect.
  • The harmful side effects of using Array for key/value pairs are not experienced unless Array.prototype is extended. Since this is an underutilized feature of JavaScript, it hasn’t been done on a large scale until rather recently.

Why Prototype “breaks” this usage

Concurrent with Prototype‘s rise in popularity have been various blog posts complaining that the JavaScript framework “breaks” associative arrays — i.e. Arrays with string keys. It “breaks” them because it adds a handful of useful methods for working with arrays to Array.prototype, and these methods are also iterated over in a for..in loop. This means that when Prototype is included on a page the code above will loop 35 times instead of the original three.

Prototype also extends String with some methods for dealing with strings. If you try to use String as an associative array, your code will loop 20 times instead of three.

I am aware of the mitigating factors — hell, I just enumerated them — but complaining that Prototype “breaks” your ability to use Array as a hash is like complaining that Prototype “breaks” your ability to use String as a hash. It is not Prototype’s fault that JavaScript does not deter this improper use, and it certainly does not mean that Prototype does not “play well with others.” You are free to reject Prototype and keep using Array improperly, but then you give up your right to bitch and moan.

Actually, we’ve been here before: before version 1.4, Prototype added a couple methods onto Object.prototype, meaning that Object couldn’t even be used in the manner I describe, and a bunch of people rightly took Sam Stephenson to task for it. Object.prototype is verboten. Since version 1.4, however, this is no longer an issue, and therefore there is no longer an excuse.

So I will say it again: Array is not meant to be used for key/value pairs. Luckily, there is a dead‐simple way to fix this. In the above example, you need only change Array to Object. (Or, if you’re using literal syntax, change [] to {}.) There. Your wrong code is no longer wrong, and it took only a little more work than a simple find‐and‐replace.

There are plenty of JavaScript frameworks to choose from, and many of them are excellent. I use Prototype because it works for me, and I do not take it personally when other people decide they don’t like it. But I believe Prototype deserves to be hated on its merits, dammit, not because it makes wrong code stop working — especially when the wrong code can be made right in ten seconds.

Comments

  1. Pingback
    erik’s weblog » Blog Archive » Associative Arrays Must Die
  2. Pingback
    alexander kirk » Blog Archive » Misuse of the Array Object in JavaScript
  3. Pingback
    Ajaxian » Javascript Associative Arrays considered harmful
  4. Pingback
    the rasx() context » Blog Archive » Grilling through Some Links
  5. Pingback
    Painfully Obvious » Blog Archive » More on JavaScript prototypes and for..in