Associative Arrays in JavaScript

Methods for creating associative arrays

Map Collection

A Map is a key-value collection that can be used to create associative arrays.

Unlike an object, a Map allows values ​​of any type, both primitive and reference, to be used as keys.

Creating an empty collection:

// Create an empty associative array
const arr = new Map();

Creating a collection with initialized values:

// Creating an associative array and placing three key-value pairs into it
const arr = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);

In this example, the strings “key1,” “key2,” and “key3” are the keys, and “value1,” “value2,” and “value3” are their values, respectively.

The number of elements in an array can be found using the size property:

arr.size; // 3

Adding an element to an array (to a Map instance) is done using the set method: 

// Add one key-value pair to the array
arr.set('key4','value4');
// Add multiple key-value pairs to the array
arr.set('key5','value5');
arr.set('key6','value6');
// or like this
arr
.set('key5','value5')
.set('key6','value6');

Retrieving a value by key is done using the get method:

// Get the value associated with key 'key4'
arr.get('key4'); // 'value4'

You can check whether a key is in an array using the has method:

// Does array arr contain key key2?
arr.has('key2'); // true

You can delete an element from an associative array (Map instance) by key name using the delete method:

arr.delete('key1'); // true

Clearing an array (removing all elements) can be done using the clear method.

arr.clear(); // clear the arr array
arr.size; // 0 (number of elements)

Iterating over an associative array (Map object) is typically accomplished using a for…of loop. Iteration can be performed by keys, values, and records ([key, values]).

Iterating over keys can be accomplished using an iterable MapIterator object returned by the keys method:

for (let key of arr.keys()) {
console.log(key);
}

To iterate over values, you can use the iterable MapIterator object returned by the values ​​method:

for (let value of arr.values()) {
console.log(value);
}

Iterating over entries in an associative array using the entries method:

for (let pair of arr.entries()) {
// pair is an array [key, values]
console.log(pair[0]); // key
console.log(pair[1]); // value
console.log(`Key = ${pair[0]}, value = ${pair[1]}`);
}

This method is used by default in for…of, so it can be omitted:

for (let pair of arr) {
console.log(`Key = ${pair[0]}, value = ${pair[1]}`);
}

You can also iterate over an associative array using the forEach method.

arr.forEach(function(value,key) {
console.log('key = ' + key +', value = ' + value);
});

You can convert an associative array (Map object) to JSON and back like this:

let arr = new Map([
['question', 'Question text...'],
['answer1', 'Answer 1...'],
['answer2', 'Answer 2...'],
]);
// to JSON
jsonStr = JSON.stringify([...arr]);
// from JSON to Map
mapArr = new Map(JSON.parse(jsonStr));

Example

<script>
// create an associative array and place three key-value pairs into it
const arr1 = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
arr1.set('key5','value5').set('key6','value6');
console.log(arr1);
console.log(arr1.get('key5')); // 'value4'
</script>