• JavaScript Video Tutorials

JavaScript - Map.set() Method

The Map.set() method in JavaScript is used to add or update a key-value pair in a Map object. It takes two parameters: the key and the value. If the key already exist in the map, the value associated with the key will be updated to the new value provided. If the key does not exist, a new key-value pair will be added to the map. This method returns the Map object itself, allowing for method chaining.

This method is compatible on almost every browser such as Chrome, Edge, Firefox, Opera, and Safari.

Syntax

Following is the syntax of JavaScript Map.set() method −

set(key, value)

Parameters

This method accepts two parameters. The same is described below −

  • key − The key of the element that has to be added or updated in the Map object. The key can be any value, including objects or primitive values.

  • value − The value for the element that has to be added or updated in the Map object. The value can be any type, including objects or primitive values.

Return value

This method returns the Map object itself.

Examples

Example 1

In the following example, we are adding a key-value pair to an empty Map object using the JavaScript Map.set() method.

We used entries() method to create an iterator object containing the key-value pairs of the map. Then, the next() method is used to retrieve the next key-value pair from the iterator.

<html>
<body>
   <script>
      let map = new Map();
      map.set(1, 'apple');
      
      const iterator = map.entries();
      document.write(iterator.next().value);
   </script>
</body>
</html>

If we execute the above program, it returns the provided key-value pair as a result.

Example 2

In the example below, we are adding multiple key-value pairs into an empty Map object −

<html>
<body>
   <script>
      let map = new Map();
      map.set(1, 'apple');
      map.set(2, 'banana');
      map.set(3, 'cherry');
      
      const iterator = map.entries();
      document.write(iterator.next().value, "<br>");
      document.write(iterator.next().value, "<br>");
      document.write(iterator.next().value);
   </script>
</body>
</html>

As we can see in the output below, all the provided key-value pairs has been added to the Map object.

Example 3

Here, we are updating an existing key's value using the JavaScript set() method −

<html>
<body>
   <script>
      let map = new Map();
      map.set(1, 'apple');
      map.set(1, 'banana');
      
      document.write(map.get(1), "<br>");
   </script>
</body>
</html>

It will return the newly inserted "value" (banana) for the key "1" as result.

Example 4

In this example, the set() method is chained to add multiple key-value pairs to an empty Map in a single statement −

<html>
<body>
   <script>
      let map = new Map().set(1, 'apple').set(2, 'banana').set(3, 'cherry');
      document.write(map.get(1), "<br>");
      document.write(map.get(2), "<br>");
      document.write(map.get(3));
   </script>
</body>
</html>

If we execute the above program, it returns all key's "values" as result.

Advertisements