JavaScript Associative Arrays

An associative array is an array with string keys rather than numeric keys. Does JavaScript support associative arrays? Let's explore the subject through examples and see.

In JavaScript, you can't use array literal syntax or the array constructor to initialize an array with elements having string keys. An empty array must be declared first and then elements[1] can be added individually:

var ar = []; // empty array
// add elements with string keys
ar['name'] = 'Jon';
ar['age'] = 25;
ar['city'] = 'Portland';
ar['state'] = 'OR';

alert( ar.length ); // 0
console.log( ar );
/*
Array[0]
age: 25
city: "Portland"
length: 0
name: "Jon"
state: "OR"
*/

Notice that the length of the array is zero. Also notice that the output of console.log (in Chrome) includes the length property with the list of elements we added to the array.

Here we add an element with a string key to a previously defined numerically indexed array:

// numerically indexed array
var ar = ["apple", "orange", "pear", "banana"];
//  add element with string key
ar['fav'] = 'fig';
alert( ar.length ); // 4
console.log (ar);
/*
Array[4]
0: "apple"
1: "orange"
2: "pear"
3: "banana"
fav: "fig"
length: 4
*/

Again, notice that the addition of an element with a string key does not affect the length property. Notice the output of console.log: the elements with numeric indexes, the element with the string index, and the length property are all listed as properties of the array object.

Arrays as Objects, Elements as Properties

Arrays are objects in JavaScript, a specialized type of object with a length property and methods that are convenient for working with array elements. But these methods do not work on the associative elements we have added.

The following shows the results of applying the join and pop array methods to the array just above:

console.log( ar.join(', ') ); // apple, orange, pear, banana
console.log( ar.pop() ); // banana (element removed)
console.log( ar ); // display ar after pop
/*
Array[3]
0: "apple"
1: "orange"
2: "pear"
fav: "fig"
length: 3
*/

The join method ignores the element with the string index. The pop method removes the last numerically indexed element, not the associative element that was added last.

Notice what happens if we declare an object with the same properties as our array:

var obj = {
    0: 'apple',
    1: 'orange',
    2: 'pear',
    3: 'banana',
    'fav': 'fig'
}

Whether we do a for/in loop on the array or on the object, the output is the same:

// loop over array elements/properties
for (var i in ar) {
    console.log( i + ': ' + ar[i] );
}

// loop over obj properties
for (var prop in obj) {
    console.log( prop + ': ' + obj[prop] );
}

// output is same for both
/*
0: apple
1: orange
2: pear
3: banana
fav: fig
*/

Drawing Conclusions

The point: elements added to an array, whether using numeric or string indexes, are properties of the array object, as our for/in loops demonstrate above. However, the length property as well as array methods are only applied to the elements with numeric indexes. Therefore, elements added using string indexes can only be regarded as properties of the array object and not true array elements.

There is certainly no problem with adding properties to an array object using associative array syntax. After all, this is one of the standard choices for adding properties to an object in JavaScript (dot syntax being the other option). It may occasionally be useful to have a property added to your array objects. But, if your purpose is to work with name/value pairs, why not just use an object instead of an array?