Last Updated: 25 Jul 2023

   |   

Author: dordal

Associative Arrays in JavaScript

Unlike PHP (and many other languages), JavaScript doesn't support associative arrays. Period. It does support objects, which can be used somewhat like an associative array, but without a lot of the usual array goodness. It's an imperfect world, and it bugs me all the time, but it's just the way it is.

In JS, you can set up an array like so: 

var myArray = new Array();
myArray[0] = 'David';
myArray[1] = 'Jones';

But you can't do: 

var myArray = new Array();
myArray['firstname'] = 'David';             // not possible in JS
myArray['lastname'] = 'Jones';              // not possible in JS

That's because JavaScript doesn't support the associative (e.g. 'firstname' ) index. It only a numerical index (e.g. [0]).

However, you can create an object and assign arbitrarily named properties to it: 

var myObject = new Object();
myObject.firstname = 'David';
myObject.lastname = 'Jones';
// alternately, use the shorthand syntax:
var myObject2 = {firstname: 'David', lastname: 'Jones'};

You can access properties of this object with either the dot (myObject.firstname) or array (myObject['firstname']) notation. You can iterate over all its properties with a for…in loop: 

for (var index in myObject) {
  document.write ('key: ' + index + '; value: ' + myObject[index] + ' ');
}

The only thing you can't do is use the array functions, such as join() and splice(). Those only work on true Arrays, which were created with the Array constructor and have numerical indexes.

Discussion

~, May 25, 2010 07:04 PM

Javascript does supports associative arrays, at least to the point where you can specify names instead of indexes. For instance, the following will work perfectly with Firefox 3+ and Internet Explorer 6+:

[code]
var myArray = new Array();
myArray['firstname'] = 'David'; Possible in JS myArray['lastname'] = 'Jones'; Possible in JS

alert(myArray['firstname']);
alert(myArray['lastname']);
[/code]

Give it a try and you'll see that the code will have no errors.

1, May 28, 2010 03:35 PM

[code]
var myArray = new Array();
myArray['firstname'] = 'David';
myArray['lastname'] = 'Jones';

alert(myArray['firstname']);
alert(myArray['lastname']);
[/code]

Richard Muir-Gladman, Oct 2, 2010 09:47 AM

JavaScript does not support associative arrays. It does have behaviours that look similar if you don't examine them too closely. Take the code from the example above which sure does look like an associative array:

var myArray = new Array();
myArray['firstname'] = 'David';
myArray['lastname'] = 'Jones';

What this is actually doing is adding two new custom properties to an empty Array instance. This has a few drawbacks. Firstly, normal array methods may not work as expected.

var myArray = new Array();
myArray['firstname'] = 'David';
myArray['lastname'] = 'Jones';

alert (myArray.length);
alert (myArray['length']);

Oh dear.

Now let's consider prototyping and for .. in

Array.prototype.doMyAction = function() { 

  return this.join(' -:- ');

}

var myArray = new Array();
myArray['firstname'] = 'David';
myArray['lastname'] = 'Jones';

for(var item in myArray) { 

  alert(item);

}

Oh dear again.

For very basic usage, you may get away with this but overall, you will be far better off using the object as described in the original article.

Thanks for listening.

E.

Enter your comment. Wiki syntax is allowed: