JavaScript Map introduced in ES6 is similar to objects in JavaScript. A map is used to store elements in a key/value pair. Unlike objects, maps can contain other data types as key. Elements in a map are inserted in an insertion order.

Creating a JavaScript Map

The new Map() constructor can be used to create a map in JavaScript.

const myMap = new Map();

Inserting elements into a Map

Elements can be inserted into a map using the set() method or by passing an array into the new map() construction function.

Using the set() method

The set() method can be used to insert an element into a map, this is done by passing the key and value of the element as arguments to the set() method. The key does not necessarily have to be a string, you can use other data types such as objects, functions, etc as key.

let myMap = new Map();
// insert elements
myMap.set("item1", 100);
myMap.set("item2", 200);
console.log("The Map contains " + myMap.size + " elements");

Passing an array into the new map() constructor

Elements can also be inserted into a map by passing an array into the new map() constructor function. Each array should contain the key and value of the element. The number of arrays passed into the constructor corresponds to the number of elements in the map.

let myMap = new Map([ 
    ["item1", 10],
    ["item2", 20]
]);
console.log("The Map contains " + myMap.size + " elements");

Assessing Map Elements

The get() method can be used to access the elements in a JavaScript map. An element can be assessed by passing the key as an argument to the get() method.

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
let output = myMap.get("item1");
console.log(output); // 10

The has() method can be used to check if a specific element is available in a map. The has() method returns a boolean indicating the availability of the element in the map.

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
let output = myMap.has("item1");
console.log(output); // true

JavaScript Map Size

The size property can be used to get the number of elements in a map.

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
let size = myMap.size;
console.log(size); // 2

Removing Map Elements

JavaScript map elements can be removed using the clear() and the delete() methods.

The clear() method removes all elements in a map.

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
myMap.clear();

The delete() method can be used to remove a specific element from a map. The delete() method returns true if the specified element exists and has been deleted, otherwise, it returns false.

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
myMap.delete("item1"); // true

Iterating through a Map

The for...of loop or foreach() method can be used to iterate through the elements in a map. The elements in the map are accessed in the insertion order.

Using the for...of loop

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

for(let [key, value] of myMap) {
    console.log(key + ": " + value);
}

Using the foreach() method

The foreach() method invokes a function for each key/value pair in a map

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

myMap.forEach(function(value, key) {
    console.log(key + ": " + value);
});

Iterating over map keys

The key() method can be used to iterate over the keys in a map.

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

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

Iterating over map values

The values() method can be used to iterate over the values in a map

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

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

Iterating over a map's key/value pair

The entries() method can be used to iterate over a map's key/value pair

let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

for(let element of myMap.entries()) {
    console.log(element[0] + ": " + element[1]);
}

JavaScript WeakMap

A JavaScript map can contain any data type as a key, whereas a weakmap can only allow an object as a key.

let myWeakMap = new WeakMap();
obj = {};
myWeakMap.set(obj, "WeakMap");
let output = myWeakMap.has(obj);
console.log(output);

Note: WeakMaps are not iterable.

JavaScript Map vs Object

Below are some of the differences between a JavaScript map and an object

Learn more about JavaScript