JavaScript - The Maps Object

---

---

A Map object in JavaScript is a collection of key-value pairs where the keys can be of any type, including objects or functions. The order of the map elements is the same as the insertion order of the key-value pairs.

To create a new Map object, you can use the new Map() constructor. You can then add key-value pairs to the map using the set() method. To get the value for a particular key, you can use the get() method. To remove a key-value pair from the map, you can use the delete() method.

Syntax

Following is the syntax to use the Map data structure in JavaScript −

const map = new Map([iterable]);

In the above syntax, we used the 'new' keyword with a Map() constructor to define an instance of the Map.

Parameters

• iterable − It is an iterable containing the key-value pairs to initialize the map with elements of the iterable. Also, it is an optional parameter.

The Map class in JavaScript contains a set of built-in methods that allow us to work with Map objects. Here, we have listed the properties and methods of the Map.

Map Properties

Following are the properties of Map object −

Map Methods

In the following table, we have listed all the methods of Map object and their description −

JavaScript Map Constructor()

Following is the constructor of Map in JavaScript −

Examples

Example: Creating new Map Object

In the example below, we have passed the 2D array containing the key-value pairs as an argument of the Map() constructor.

After that, we traverse the map to get each value of the map and show in the output.

<html>
<body>
   <div> Map elements are: </div>
   <div id = "output"> </div>
   <script>
      const map = new Map([["Apple", 100], ["Banana", 20], ["Orange", 50]]);
      for (let [key, value] of map) {
         document.getElementById("output").innerHTML += `${key} : ${value} <br>`;
      }
   </script>
</body>
</html>

Output

After executing the above program, it returns each value of the map.

Map elements are:
Apple : 100
Banana : 20
Orange : 50

Example: Inserting key-value pair in the Map

In the example below, we use the set() method to insert the key-value pair in the map. The set() method takes the key as the first argument and the value as the second argument.

<html>
<body>
   <div>After inserting 2 key-value pairs in the map: </div>
   <div id = "output"> </div>
   <script>
      const map = new Map();
      map.set("Grapes", 40);
      map.set("Apples", 50);
      for (let [key, value] of map) {
         document.getElementById("output").innerHTML += `${key} : ${value} <br>`;
      }
   </script>
</body>
</html>

Output

After inserting 2 key-value pairs in the map:
Grapes : 40
Apples : 50

As we can see in the output, the provided [key-value] pairs have been inserted in the Map object.

Example: Accessing Map Elements

The get() method can be used to access the map elements. Here, we have added elements to the set.

After that, we used the get() method to access the values of the name and RollId keys.

<html>
<body>
   <div id = "output1">Name: </div>
   <div id = "output2">Roll Id: </div>
   <script>
      const map = new Map();
      map.set("name", "John");
      map.set("rollId", 123);
      document.getElementById("output1").innerHTML += map.get("name");
      document.getElementById("output2").innerHTML += map.get("rollId");
   </script>
</body>
</html>

Output

After executing, it returns all the elements present in the Map object.

Name: John
Roll Id: 123

Example: Removing a Map Element

In the example below, we use the delete() method to delete the key-value pair having a key 20.

However, you can also use the clear() method to remove all elements from the map.

<html>
<body>
   <div>Map after deleting the [20,30] key-value pair: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const map = new Map([[10, 20], [20, 30], [30, 40]]);

      map.delete(20); // Deleting a [20,30] key-value pair from the map

      for (let [key, value] of map)
         output.innerHTML += "Key: " + key + " Value: " + value + "<br/>";
   </script>
</body>
</html>

Output

Map after deleting the [20,30] key-value pair:
Key: 10 Value: 20
Key: 30 Value: 40

Example: Size of the Map

In the below code, we used the 'size' property of the Map class to get the total number of key-value pairs in the map.

<html>
<body>
   <p id = "output">Size of the map object is: </p>
   <script>
      const map = new Map();
      map.set("Grapes", 40);
      map.set("Apples", 50);
      document.getElementById("output").innerHTML += map.size;
   </script>
</body>
</html>

Output

Size of the map object is: 2

Example: Use object as a key

The map allows developers to use the object as a key. Here, we have defined the laptop object containing two properties.

After that, we set the object as a key and the laptop's price as a value in the map.

<html>
<body>
   <p id = "output">The laptop price is: </p>
   <script>
      const map = new Map();
      const laptop = {
         brand: "HP",
         model: "Pavilion",
      }
      map.set(laptop, 100000);
      document.getElementById("output").innerHTML += map.get(laptop);
   </script>
</body>
</html>

Output

The laptop price is: 100000

Map vs. Object in JavaScript

A Map is similar to the Object in JavaScript, but there are some differences which we have explained here −