In this section, we will learn what the Map object is and how to use it in JavaScript.

What is Map in JavaScript?

A map represents a type of collection that is different from the collections, like arrays that we have worked on so far. It contains key-value mapping. It is easy to visualize a map as a table with two columns. The first column of the table contains keys; the second column contains the values associated with the keys.

The table below shows person names as keys and their phone numbers as values. We can think of this table representing a map that contains a mapping between names and phone numbers. Sometimes a map is also known as a dictionary. In a dictionary, we can have a word and we look up its meaning. Similarly, in a map, we have a key and we look up its value.

JavaScript Map Key

As mentioned before, the key in a map is basically the identity of a value, and we can use that key to get to the target value.

JavaScript Map Value

The `value` on a map is basically the association of a key! It’s the reason we have keys in Maps.

How to Create Map in JavaScript?

To create a map, we use the construction function `Map`. Basically, we create a new object from this constructor and use a set of methods to add or remove keys and values to the map.

Note: these methods belong to the prototype object of the `Map` constructor.

Example: creating Map in JavaScript

const map = new Map();
map.set("John","222-22222222"); 
map.set("Jack", "333-3234232");

console.log(map.get("John"));
console.log(map.get("Jack"));

Output:

222-22222222

333-3234232

First, we used the constructor function `Map` to create a new map object.

Then via the `set()` method we’ve assigned two entries to the map.

Notes:

• A pair of key-value is called an entry.
• The `set()` method takes two arguments. The first one is the key and the second one is the value.

After that, we’ve used the `get()` method to get the values of the two keys that we’ve inserted into the map. The get() method is explained in later sections, but in short, the argument that we set for this method is the name of the key that we’ve entered into the map; if the key is in the map, its related value will be returned.

For the keys and values in a map, we can use the values of primitive and object types.

Example: JavaScript Map Object

const map = new Map();
map.set("John","222-22222222");
map.set(22 , 2000);
map.set(true, false); 
map.set("Jack", "333-3234232");

console.log(map.get("John"));
console.log(map.get("Jack"));
console.log(map.get(true));
console.log(map.get(22));

Output:

222-22222222

333-3234232

false

2000

Alright, in the next couple of sections, we will explain each of the methods and properties that are represented in the `Map` constructor function.

JavaScript Map Methods