Associative array in JavaScript

Intro In this blog, we will be looking at what an associative array is, how it is different from a normal array, and how to calculate its length & retrieve all the elements

Table of Contents

• What is an associative array?
• Syntax & example
• Length of an associative array
• Retrieve the elements of an associative array
• How is it different from a normal array?
• Other Related Concepts

What is an associative array?

Associative arrays are basically objects in JavaScript where indexes are replaced by user-defined keys. They do not have a length property like a normal array and cannot be traversed using a normal for loop. Refer more about looping through an associative array in this blog

Syntax and example

var arr = {key1:'value1', key2:'value2'}

Here, arr, is an associative array with key1, key2 being its keys or string indexes and value1 & value 2 are its elements.

var arr = { "Company Name": ‘Flexiple’, "ID": 123}; 

Length of an associative array

Now that we know how to declare an associative array, let us see how we can calculate its length.

Since we will be no longer able to use the length attribute of the Array object, let us first define a method that returns the size of the array before we use it.

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

Refer to this article to know more about hasonwnproperty.

Now that we have the size method defined, let us use it

var len = Object.size(x);
document.write("Length=" + len);

//Output: Length = 2

Using the keys method

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

//Using the previous arr array
document.write("Length=" + Object.keys(arr).length

//Output: Length = 2

Retrieve the elements

To retrive all the elements of an associative array, cannot use a simple loop as in the case of a normal array because elements are not accessible by an index. Here’s how we can do it instead

var arr = {
    "Company Name": 'Flexiple',
    "ID": 123
};
for (var key in arr) {
    var value = arr[key];
    document.write(key + " = " + value + '
');
}
//Output: 
Company Name = Flexiple
ID = 123

Using the keys method

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 arr = {
    "Company Name": 'Flexiple',
    "ID": 123
};
var elements = Object.keys(arr).map(function(k) {
    return arr[k];
})
console.log(elements);

//Output: ['Flexple', 123]

How is it different from a normal array?

1. Unlike simple arrays, we use curly braces instead of square brackets.
2. The content or values of associative arrays is accessed by keys.
3. An associative array is an array with string keys rather than numeric keys.
   For example:
   

   var arrAssociative = {
       "Company Name": 'Flexiple',
       "ID": 123
   };
   var arrNormal = ["Flexiple", 123];
   

   Here, the keys of the associative array are “Company Name” & “ID” whereas in the normall array. The keys or index is 0 & 1
   
4. 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.
5. The length attribute has no effect because the variable is no longer of the Array type.
6. We can create an associative array with the Object reserved word, then and assign keys and values:
   

   var o = new Object();
   o["Company Name"] = 'Flexiple';
   o["ID"] = 123;