How To Convert Map Keys to an Array in JavaScript?

Here are the various methods to convert Map keys to an array in JavaScript

1. Using array.from() Method

The Array.from() method in JavaScript converts Map keys to an array by using 'Array.from(map.keys())'.  

let map = new Map().set('GFG', 1).set('Geeks', 2);
let a = Array.from(map.keys());

console.log(a.length);

2

In this example

• A Map object is created with two key-value pairs: ‘GFG’ => 1 and ‘Geeks’ => 2.
• Map.keys() returns an iterator for the keys of the Map (‘GFG’, ‘Geeks’).
• Array.from(Map.keys()) converts the iterator into an array of keys: ['GFG', 'Geeks'].

2. Using for...of Loop Method

The for...of loop method converts Map keys to an array by iterating over map.keys(). Within the loop, each key is pushed into a new array.

let map = new Map().set('GFG', 1)
    .set('Geeks', 2).set('Geeksforgeeks', 3);
let a = [];
for (let key of map.keys()) {
    a.push(key);
}
console.log(a);

[ 'GFG', 'Geeks', 'Geeksforgeeks' ]

In this example

• A Map object is created with three key-value pairs: 'GFG' => 1, 'Geeks' => 2, and 'Geeksforgeeks' => 3.
• The for...of loop iterates over the keys of the Map and pushes each key ('GFG', 'Geeks','Geeksforgeeks') into the array.

3. Using Object.keys() and Object.fromEntries()

The Object.keys() and Object.fromEntries() methods in JavaScript convert Map keys to an array by first transforming the Map into an object with Object.fromEntries(map), then using Object.keys() to extract the keys from this object into an array.

const map = new Map([
    ["JS", 1],
    ["Ruby", 2],
    ["C++", 3]
]);

let obj = Object.fromEntries(map);
let key = Object.keys(obj);

console.log(key); 

[ 'JS', 'Ruby', 'C++' ]

In this example

• A Map object is created with key-value pairs: "JS" => 1, "Ruby" => 2, and "C++" => 3.
• Object.fromEntries(map) converts the Map to an object, resulting in { JS: 1, Ruby: 2, C++: 3 }.
• Object.keys(obj) extracts the keys from the object, returning an array ['JS', 'Ruby', 'C++'], which is logged to the console.

4. Using the Spread Operator (...)

Another convenient way to convert the keys of a Map to an array is by using the spread operator(...).

const map = new Map([["JS", 1], ["Ruby", 2], ["C++", 3]]);
const key = [...map.keys()];
console.log(key); 

[ 'JS', 'Ruby', 'C++' ]

In this example

• map.keys() returns an iterator object.
• The spread operator (...) expands the iterator into individual elements and creates an array.