Associative Array in JavaScript

Associative arrays are dynamic objects that  the user redefines as needed. When you assign values ​​to keys in a variable of type Array, the array is transformed into an object, and it loses the attributes and methods of Array. The length attribute has no effect because the variable is not longer of Array type.

We will demonstrate all that and also show how to add a key method to an object to have the number of items it holds when it becomes an associative array.

An associative array is declared or dynamically created

We can create it by assigning a literal to a variable. 

var arr = { "one": 1, "two": 2, "three": 3 };

Unlike simple arrays, we use curly braces instead of square brackets.

This has implicitly created a variable of type Object.

The content is accessed by keys, whatever the method used to declare the array. 

var y = arr["one"];

An associative array is also an object

So we can create an associative array with the Object reserved word, then and assign keys and values: 

var o = new Object();
o["one"] = 1;
o["two"] = 2;
o["three"] = 3;
for(var i in o)
{
     document.write(i + "=" + o[i] + '<br>');
}

Attributes of a JavaScript object are also keys

What is specific to objects in JavaScript is that attributes are also keys as we shall see in the demonstration.
Thus, the same array can be created more simply: 

var oa = new Object();
oa.one = 1;
oa.two = 2;
oa.three = 3;
for(var i in oa)
{
     document.write(i + "=" + x[i] + '<br>');
}

But we have to use the index form if we use a variable as a key ...

Recall that the length attribute has no value.

An associative array is scanned with for in

We can not use a simple for loop because the elements are not accessible by an index (besides the fact that we must use a special function to determine the position of the last), but the simpler for in loop is ideal.

Keys are assigned to the variable "key", and with the key we access the value. 

var arr = { "one" : 1, "two" : 2, "three": 3 };  
for(var key in arr)
{
  var value = arr[key];
  document.write(key + " = " + value + '<br>');
}

Number of items

Since we no longer have the length attribute of the Array object, it remains to add a method to Object that returns the size of the list: 

Object.size = function(arr) 
{
    var size = 0;
    for (var key in arr) 
    {
        if (arr.hasOwnProperty(key)) size++;
    }
    return size;
};

This gives the number of items as well: 

var s = Object.size(x);
document.write("Size=" + s);

List of properties

Since the 1.8.5 version of ECMAScript, we can get the list of attributes of an object in a single statement:

Object.keys(arr)

From there, to get the number of keys is simple:

Object.keys(arr).length

The keys method returns an array of all the attributes, so keys, and we can apply the length attribute of Array.

var a2 = { "a":1, "b":2, "c":3 }
document.write("Size=" + Object.keys(a2).length

List of values

We can transform an associative array, ie an object, into a simple array. With the method that returns the list of keys, and the map method (ECMAScript 1.6), we also obtain the values:

var a3 = Object.keys(a2).map(function (k) { return a2[k];})
document.write(a3)

Results:

See also

© 2010-2014 Xul.fr