What is the use of map object in javascript?

Javascript Front End Technology Object Oriented Programming

A Map holds key−value pairs where the key can be of any type. A map can remember the original insertion order of the key. A map has the properties to get the size of the map. A map can be used for any value both an object or primitive data type.

In general, an object can also be used as a key in the map. This is not the case for JavaScript objects it only allows primitive data types to be used as a key.

A key in the map may only occur once, it is unique in the map collection. A map object is iterated by key-value pairs a for…of loop returns a two-member array of [key, value] for each iteration.

Creating a Map

You can create a JavaScript map by −

1. Passing an array ay to the constructor new map()

Const name-of-variable (object) = new Map();

2. Create a map and use the map.set()

name-of-variable(object).set();

Map Methods

Following are the various methods provided by JavaScript.

S.No	Method and Description
1	new map() Creates a new map object
2	Set() Set the value for a key in the map
3	Get() Get the value for a key in the map
4	Clear() Removes all the elements from a map
5	Delete() Removes a map element specified by a key
6	Has() Returns true if a key exists in a map
7	ForEach() Invokes a call back for each key/value pair in a map
8	Entries() Returns an iterator object with the [key, value] pairs in a map
9	Keys() Returns an iterator object with the keys in a map
10	Values() Returns an iterator object of the values in the map

The JavaScript Map class also has a property “size” which Returns the number of map elements.

Example 1

In the following example, we are creating a map by passing an array to the constructor of the Map class.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map function</title>
</head>
<body>
   <h4>Creating a map from an array:</h4>
   <p id="demo"></p>
   <script>
      const myMap = new Map([["Rahul", 22],["Akash", 23],["Aman", 23]]);
      document.getElementById("demo").innerHTML = myMap.get("Aman");
   </script>
</body>
</html>

Example 2

In the following example, we have created an empty map and set the map value using the Map.set() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map function</title>
</head>
<body>
   <h4>using Map.set()</h4>
   <p id="demo"></p>
   <script>
      const myMap = new Map(); //creating empty map
      //set the value of the map
      myMap.set("Aman", 23);
      myMap.set("Akash", 22);
      myMap.set("Rahul", 21);
      document.getElementById("demo").innerHTML = myMap.get("Akash");
   </script>
</body>
</html>

Example 3

In the following example, we are getting the size of the map and deleting the element from the map. After deleting we are again checking the size.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map Function</title>
</head>
<body>
   <h4>using Map.delete()</h4>
   <p id="demo"></p>
   <p>After Deletion</p>
   <p id="del"></p>
   <script>
      //creating empty map
      const myMap = new Map();
      
      //set the value of the map
      myMap.set("Aman", 23);
      myMap.set("Akash", 22);
      myMap.set("Rahul", 21);
      document.getElementById("demo").innerHTML = "Size of Map " + myMap.size;
      
      //Deleting one element
      myMap.delete("Aman");
      document.getElementById("del").innerHTML = "Size of Map " + myMap.size;
   </script>
</body>
</html>

Example 4

In the following example, we are demonstrating the Map.has() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map function</title>
</head>
<body>
   <h4>using Map.has()</h4>
   <p id="demo1"></p>
   <p id="demo2"></p>
   <p id="demo3"></p>
   <p id="demo4"></p>
   <script>
      const myMap = new Map(); //creating empty map
      //set the value of the map
      myMap.set("Aman", 23);
      myMap.set("Akash", 22);
      myMap.set("Rahul", 21);
      document.getElementById("demo1").innerHTML = myMap.has("Aman"); //true
      document.getElementById("demo2").innerHTML = myMap.has("Akash"); //true
      document.getElementById("demo3").innerHTML = myMap.has("Rahul"); //true
      document.getElementById("demo4").innerHTML = myMap.has("Anil"); //false because anil is not available on the map.
   </script>
</body>
</html>