How to convert Map keys to an array in JavaScript?

Javascript Web Development Front End Technology

There are different ways to convert a map keys to an array in JavaScript. You can use the map keys() method to access the keys in a map and then apply the Array form() method to create an array of the accessed keys. You can also apply the spread operator instead of the Array form() method to create an array of key.

You are given a javascript Map and the task is to convert the Map’s keys into array. Here is the example given below

Given Map −

{ 1: "India", 2: "Russia", 3: "USA", 4: "Japan", 5: "UK" };

Resulting Array −

[1, 2, 3, 4, 5]

There are multiple ways to Achieve this. Some of them are −

Using Array.form and Map.keys() method
Using Spread operator and Map.keys() method
Using for..of loop

Using Array.form() and Map.keys() Method

The Array.from() method returns an array from any iterable object. And the Map.keys method is used to return all the keys of a Map in an iterable form. To Convert Map keys into array we follow the following steps.

Get all the Map keys using Map.keys() method. It returns a MapIterator object which contains the Map keys
Extract Map keys from MapIterator using Array.from(). It returns an array containing all the Map keys.

Example

In this example we are having a Map whose keys are numbers and the values are country names. We are extracting all the keys (numbers) from the Map using Array.from method.

<html>
<head>
   <title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using Array.from method</h2>
   <p>Click the following button to get the Keys from the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert( ){
         let result = document.getElementById("result")
         let mp = new Map( );
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys;
         keys = Array.from( mp.keys( ) );
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>

Using Spread Operator and Map.keys() Method

The JavaScript spread operator allows us to expand an array into individual array elements. And the Map.keys method is used to return all the keys of a Map in an iterable form. To Convert Map keys into array we follow the following steps.

Get all the Map keys using Map.keys() method. It returns a MapIterator object which contains the Map keys
Extract Map keys from MapIterator using Spread Operator. It returns an array containing all the Map keys.

Example

In this example we are having a Map whose keys are numbers and the values are country names. We are extracting all the keys (numbers) from the Map using Spread Operator.

<html>
<head>
   <title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using Spread Operator</h2>
   <p>Click the following button to get the Keys from the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button><br>
   <p id="result"> </p>
   <script>
      function convert(){
         let result = document.getElementById("result") 
         let mp = new Map();
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys;
         keys = [ ...mp.keys() ];
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>

Using for...of Loop

The for… of statement loops through the values of an iterable object. the Map.keys method is used to return all the keys of a Map in an iterable form. To Convert Map keys into array we follow the following steps

Create an Empty Array to store the keys.
Using for..of loop iterate all the Map keys which you will get from Map.keys() method.
At each iteration push that key into Empty Array.

Example

<html>
<head>
   <title>Example -convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using for...of loop</h2>
   <p>Click the following button to get the Keys from  the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert(){
         let result = document.getElementById("result")
         let mp = new Map();
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys = [];
         for(let key of mp.keys()){
            keys.push(key)
         }
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>