JavaScript Associative Arrays

URL: http://persistent.info/archives/2004/08/27/js-associative-arrays

There seems to be some confusion regarding associative arrays in JavaScript (i.e. doing searches on the matter turns up many pages giving wrong information). First of all, these arrays (which act as hash tables) have nothing to do with the built-in Array object. They simply rely on the fact that object.property is the same as object["property"]. This means that the length property is not used, nor do any Array methods (such as join) do anything. In fact, it is better to create the associative array using the generic Object() constructor to make this clearer.

The way to iterate over the items in an associate array is to use the for (value in array) construct, allowing you to access each item's value via array[value]. It appears that the order in which properties (i.e. items) are traversed is implementation dependent. The ECMAScript specification is pretty vague on the matter, saying (in section 12.6.4) "Get name of the next property of [the object] that doesn't have the DontEnum attribute. If there is no such property, go to [the end]". Firefox, Safari and MSIE appear to traverse items in the order in which they were inserted, while KHTML (within KDE 3.1) and Opera (at least through 7.54) use a seemingly random order that presumably reflects their respective hashtable implementations.

<script type="text/javascript"> function RunTest() { var items = {"dioxanes": 0, "shunning": 1, "plowed": 2, "hoodlumism": 3, "cull": 4, "learnings": 5, "transmutes": 6, "cornels": 7, "undergrowths": 8, "hobble": 9, "peplumed": 10, "fluffily": 11, "leadoff": 12, "dilemmas": 13, "firers": 14, "farmworks": 15, "anterior": 16, "flagpole": 17}; listString = ""; for (var word in items) listString += items[word] + ", "; alert(listString); } </script>

The iteration order can be tested using a very simple code snippet such as this (click here to run it):

var items = {"dioxanes": 0,  "shunning": 1,  "plowed": 2,
             "hoodlumism": 3, "cull": 4,      "learnings": 5,
             "transmutes": 6, "cornels": 7,   "undergrowths": 8,
             "hobble": 9,     "peplumed": 10, "fluffily": 11,
             "leadoff": 12,   "dilemmas": 13, "firers": 14,
             "farmworks": 15, "anterior": 16, "flagpole": 17};
	
listString = "";
  for (var word in items)
    listString += items[word] + ", ";

alert(listString);

If the list of numbers appears in ascending order, then the browser preserves the insertion order. If you are in fact looking to traverse the object's properties in the order they were inserted in, regardless of browser implementation, you'll have to create a (possibly double) linked list that you can use to jump from object to object.