JavaScript Map Complete Tutorial

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.

Key

Value

John

999-9999999

Richard

888-8888888

Omid

777-7777777

Jack

666-6666666

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

Method/Property Name

Description

size

The size property is used to return the current number of entries (pairs of key-value) in the target Map object.

set()

Using this method, we can add a new set of key-value pair to the target map or replace the value of a key (if the key is already in the target map).

get()

Using this method, we can get the value of a key in a map object.

has()

Using this method, we can check and see if a Map object has a specific key in it or not.

clear()

Using this method, we can remove the entire entries of the target map object.

delete()

Using this method, we can delete a specific key from the target map object.

keys()

Using this method, we can get the entire keys of the target map object.

values()

Using this method, we can get the entire values of a map object.

entries()

Using this method, we can get the entire entries of the target map object in a form of an iterator object.

forEach()

Using this method, we can run a set of instructions on each entry of the target map object.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies