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?
- Throughout this discussion, we will use the term elements rather loosely. In our conclusion, we will see whether they really are elements of the array. ^