JavaScript Associative Array

Associative arrays serve as the foundation for the JavaScript language. Everything in JavaScript is referred to as an object, or it is more correct to say that everything declared in JavaScript is an associative array. For instance, a new object you create in JavaScript is an associative array, and to generate other JavaScript data structures, you must start with an associative array.

This write-up will explain the working of Associative arrays in JavaScript. So, let’s start!

JavaScript Associative Array

A JavaScript associative array is considered a collection of keys. These keys are associated with their respective values in such a way that when the key is passed to the array, it returns the corresponding value. That is what the term “association” signifies.

Associative arrays in JavaScript are considered as “Objects,” not normal arrays. That’s why only the methods and properties related to objects are assigned to it.

How to create JavaScript Associative array

To create a JavaScript associative array, you have to follow the below-given syntax:

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

Here, “array” is an associative array that comprises “key1” and “key2” as string indexes with their respective values as “value1” and “value2”.

For instance, we will create a JavaScript array named “employee” having two keys, “Employee Name” and “Age”. The “value” of the “Employee Name” key is set to “Alex” and its “Age” as “25”:

var employee = {

"Employee Name": 'Alex',

"Age": 25

};

That’s how you create a JavaScript associative array.

How to calculate the length of JavaScript Associative array

JavaScript Associative array is not a normal array; therefore, we can not utilize an array object’s “length” attribute to view its length.

For calculating the associative array’s length, we have to create an “Object.size()” function. The “Object.size()” function will iterate through the “keys” of the associative array and use the “hasOwnProperty()” method is to verify the existence of keys in it. In case, if the added condition evaluates to be “truthy”, then the size of array will be incremented, that was initially set to “0”:

Object.size = function(array) {

var size = 0;

for (var key in array) {

if (array.hasOwnProperty(key))

size++;

}

return size;

};

Next, we will invoke the “Object.size()” method to check the length of the created JavaScript associative array:

var length = Object.size(employee);

console.log("Length of Employee array is: " + length);

As you can see from the output, the length of the “employee” associative array is “2”:

Similarly, you can also use the “Object.keys()” method to calculate the length of an associative array:

console.log("Length of Employee array is: " + Object.keys(employee).length);

Output

How to retrieve values of JavaScript Associative array

In an associative array, you can retrieve the values of the added keys using “for” loop:

for (var key in employee)

{ var value = employee[key];

console.log(key + " = " + value + '');

}

The above-given “for” loop will iterate through the “employee” array and fetch values of added keys:

How to convert JavaScript Associative array into Normal array

Want to convert the JavaScript Associative array into a normal array? To do so, invoke the JavaScript “map()” function. The map() function will return a normal array from calling the function for every key “k” of the “employee” associative array:

var elements = Object.keys(employee).map(function(k) {

return employee[k];

})

console.log(elements);

The newly created array placed the values of the “employee” key at sequential indexes 0 and 1:

That was all about JavaScript Associative array. Before wind up, let’s check out the difference between an associative array and normal array in JavaScript.

Difference between Normal Array and Associative Array in JavaScript

Have a look at the following table to understand the difference between normal array and associative array in JavaScript:

Normal Array	Associative Array
A normal array is declared using curly brace “[ ].”	An associative array is created using square brackets “{ }”.
In a normal array, values are accessed using “indexes”.	In an associative array, values are accessed by utilizing “keys”.
A normal array comprises ordered values based on its indexes.	An associative array comprises unordered values based on its keys.
The normal array keys are of the “number” type.	The associative array keys can be of string or number type.
Example: var employee= [“Alex”, 25];	Example: var employee= { “Employee Name”: ‘Alex’, “Age”: 25 };

We have compiled the essential information related to the JavaScript Associative Array. Explore it according to your preferences.

Conclusion

A JavaScript associative array is considered a collection of keys. These keys are associated with their respective values in such a way that when the key is passed to the associative array, it returns the corresponding value. Associative arrays in JavaScript are considered Objects, not normal arrays; that’s why only the methods and properties related to objects are assigned to an associative array. This write-up explained JavaScript associative arrays.

JavaScript Associative Array | Explained