How to convert Map keys to an array in JavaScript ?

18 Jun, 2019
Given a Map and the task is to get the keys of the map into an array using JavaScript.
Approach 1:
Declare new map object
Display the map content
Use keys() method on Map Object to get the keys of Map.
Then use the array.from() method to convert map object to array.
Example 1: This example uses array.from() method to get the keys of the Map in the array.
<!DOCTYPE HTML> <html>     <head>         <title>             How to convert Map keys to            array in JavaScript ?        </title>    </head>       <body style = "text-align:center;">                  <h1 style = "color:green;" >             GeeksForGeeks         </h1>                  <p id = "GFG_UP" style =            "font-size: 19px; font-weight: bold;">        </p>                  <button onClick = "GFG_Fun()">            click here        </button>                  <p id = "GFG_DOWN" style =            "color: green; font-size: 24px; font-weight: bold;">        </p>                  <script>            var up = document.getElementById('GFG_UP');            var down = document.getElementById('GFG_DOWN');                          let myMap = new Map().set('GFG', 1).set('Geeks', 2);                          up.innerHTML = 'myMap = ("GFG" => 1, "Geeks" => 2)';                          function GFG_Fun() {                var array = Array.from(myMap.keys());                down.innerHTML = "Elements in array are " + array                        + " and Length of array = " + array.length;            }        </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Declare new map object
Display the map content
Use [ ...myMap.keys() ] method on Map Object to get the keys of Map as an array.
Example 2: This example uses the [ ...Map.keys() ] method to get the keys of the Map in the array.
<!DOCTYPE HTML> <html>     <head>         <title>             How to convert Map keys to            array in JavaScript        </title>    </head>       <body style = "text-align:center;">                  <h1 style = "color:green;" >             GeeksForGeeks         </h1>                  <p id = "GFG_UP" style =            "font-size: 19px; font-weight: bold;">        </p>                  <button onClick = "GFG_Fun()">            click here        </button>                  <p id = "GFG_DOWN" style =            "color: green; font-size: 24px; font-weight: bold;">        </p>                  <script>            var up = document.getElementById('GFG_UP');            var down = document.getElementById('GFG_DOWN');                          let myMap = new Map().set('GFG', 1).set('Geeks', 2);                          up.innerHTML = 'myMap = ("GFG" => 1, "Geeks" => 2)';                          function GFG_Fun() {                var array = [ ...myMap.keys() ];                down.innerHTML = "Elements in array are " + array                        + " and Length of array = " + array.length;            }        </script>     </body> </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-array
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Node.js | fs.writeFileSync() Method
Remove elements from a JavaScript Array
How do you run JavaScript script through the Terminal?
How to insert spaces/tabs in text using HTML/CSS?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?