Create associative array in javascript

JavaScript has no associative arrays, just objects. Even JavaScript arrays are basically just objects, just with the special thing that the property names are numbers (0,1,...).

So look at your code first:

var myArray = []; // Creating a new array object
myArray['a'] = 200; // Setting the attribute a to 200
myArray['b'] = 300; // Setting the attribute b to 300

It's important to understand that myArray['a'] = 200; is identical to myArray.a = 200;!

So to start with what you want: You can't create a JavaScript array and pass no number attributes to it in one statement.

But this is probably not what you need! Probably you just need a JavaScript object, what is basically the same as an associative array, dictionary, or map in other languages: It maps strings to values. And that can be done easily:

var myObj = {a: 200, b: 300};

But it's important to understand that this differs slightly from what you did. myObj instanceof Array will return false, because myObj is not an ancestor from Array in the prototype chain.

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] + '
');
}

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] + '
');
}

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 + '
');
}

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

• The Array type in JavaScript. Simple array.
• Scanning the content of an array. Benchmarks of every loops.
• Pitfalls in arrays. Has a function to sort the keys of an associative array in alphabetical order.

© 2010-2014 Xul.fr

What is associative array in JavaScript?

Are there associative arrays in JavaScript?

How do you create an array in JavaScript?

What is associative array in typescript?