JavaScript Map
last modified October 18, 2023
In this article we show how to work with a Map collection in JavaScript.
Map
A Map is a container which stores key/value pairs. It remembers the
original insertion order of the keys. Any value may be used as either a key or a
value.
We can use the for/of form and the forEach method to
iterate over a Map.
JS Map methods
The following methods are used to work with a map:
- new Map() - creates a new map
- set(key, value) - sets the value for the key
- get(key) - returns the value by the key
- has(key) - checks if key exists
- delete(key) - removes the value by the key
- clear() - deletes the whole map
Also, the size property returns the size of the map.
JS Map simple example
The following is a simple example using Map.
let stones = new Map(); stones.set(0, "citrine"); stones.set(1, "garnet"); stones.set(2, "topaz"); stones.set(3, "opal"); stones.set(4, "amethyst"); console.log(stones); console.log(stones.get(0)); console.log(stones.get(3)); console.log(stones.get(9));
We have a map of stones. The keys are integers and the values are strings.
let stones = new Map();
An empty map is created.
stones.set(0, "citrine");
A new key/value pair is inserted with set.
console.log(stones.get(0));
We get the value which has key equal to 0.
$ node simple.js
Map {
0 => 'citrine',
1 => 'garnet',
2 => 'topaz',
3 => 'opal',
4 => 'amethyst'
}
citrine
opal
undefined
If the value is not present, the get method returns
undefined.
JS initiating Map
There are several ways to initiate an Map.
let stones = new Map(); stones.set(0, "citrine"); stones.set(1, "garnet"); stones.set(2, "topaz"); let stones2 = new Map(stones); console.log(stones); console.log(stones2); let items = new Map([["coin", 3], ["pen", 4], ["cup", 3]]); console.log(items);
The example creates a new map from an empty map, from an existing map, and from an array.
$ node initiate.js
Map { 0 => 'citrine', 1 => 'garnet', 2 => 'topaz' }
Map { 0 => 'citrine', 1 => 'garnet', 2 => 'topaz' }
Map { 'coin' => 3, 'pen' => 4, 'cup' => 3 }
JS Map size
The size of the Map is determined with the size property.
let stones = new Map();
console.log(`The size is ${stones.size}`);
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
console.log(`The size is ${stones.size}`);
stones.set(3, "opal");
stones.set(4, "amethyst");
console.log(`The size is ${stones.size}`);
stones.clear();
console.log(`The size is ${stones.size}`);
We initiate a new empty map, add new pairs and determine the current size
with the size property.
$ node map_size.js The size is 0 The size is 3 The size is 5 The size is 0
JS Map loop
We can easily loop over the key, values, and key/value pairs with
for/of form.
let stones = new Map();
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
stones.set(3, "opal");
stones.set(4, "amethyst");
for (const entry of stones)) {
console.log(entry);
}
console.log('-------------------------------');
for (const [k, v] of stones.entries()) {
console.log(`${k}: ${v}`);
}
console.log('-------------------------------');
for (const val of stones.values()) {
console.log(val);
}
console.log('-------------------------------');
for (const key of stones.keys()) {
console.log(key);
}
We define a new map and loop over it in various ways.
$ node looping.js [ 0, 'citrine' ] [ 1, 'garnet' ] [ 2, 'topaz' ] [ 3, 'opal' ] [ 4, 'amethyst' ] ------------------------------- 0: citrine 1: garnet 2: topaz 3: opal 4: amethyst ------------------------------- citrine garnet topaz opal amethyst ------------------------------- 0 1 2 3 4
Another way to loop over a map is to use the forEach method.
let stones = new Map();
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
stones.set(3, "opal");
stones.set(4, "amethyst");
stones.forEach((v, k) => {
console.log(`${k} has value ${v}`);
});
We loop over a map of stones with forEach.
$node looping2.js 0 has value citrine 1 has value garnet 2 has value topaz 3 has value opal 4 has value amethyst
JS Map transform into array
The Array.from method creates an array from an iterable object.
let stones = new Map();
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
stones.set(3, "opal");
stones.set(4, "amethyst");
let stones2d = Array.from(stones);
let keys = Array.from(stones.keys());
let values = Array.from(stones.values());
console.log(stones2d);
console.log([...stones]);
console.log('--------------------');
console.log(keys);
console.log(values);
In the example, we turn the map into arrays.
let stones2d = Array.from(stones);
We create a 2D array from the stones map. Each subarray is a pair
from the map.
let keys = Array.from(stones.keys());
We create an array of map keys.
let values = Array.from(stones.values());
We create an array of map values.
console.log([...stones]);
Another way to create a 2D array is to use the spread operator.
$ node array_from.js
[
[ 0, 'citrine' ],
[ 1, 'garnet' ],
[ 2, 'topaz' ],
[ 3, 'opal' ],
[ 4, 'amethyst' ]
]
[
[ 0, 'citrine' ],
[ 1, 'garnet' ],
[ 2, 'topaz' ],
[ 3, 'opal' ],
[ 4, 'amethyst' ]
]
--------------------
[ 0, 1, 2, 3, 4 ]
[ 'citrine', 'garnet', 'topaz', 'opal', 'amethyst' ]
JS Map combine
In the following example, we combine two maps. The maps are combined with the
spread ... operator.
const assert = require('assert');
let stones1 = new Map();
stones1.set(0, "citrine");
stones1.set(1, "garnet");
stones1.set(2, "topaz");
let stones2 = new Map();
stones2.set(3, "opal");
stones2.set(4, "amethyst");
let stones = new Map([...stones1, ...stones2])
console.log(stones);
assert.deepStrictEqual(
[...stones],
[ [ 0, 'citrine' ],
[ 1, 'garnet' ],
[ 2, 'topaz' ],
[ 3, 'opal' ],
[ 4, 'amethyst' ] ]
);
We combine two maps and verify that the actual and expected values are equal.
The assert.deepStrictEqual throws an exception it the values
differ.
$ node combining.js
Map {
0 => 'citrine',
1 => 'garnet',
2 => 'topaz',
3 => 'opal',
4 => 'amethyst'
}
Source
In this article we have worked with the maps in JavaScript.
