Here are three ways to convert a Map to an Array in JavaScript.
- Using the “Array.from()” and “Map.keys()”
- Using the “Spread operator” and “Map.keys()”
- Using “for..of loop”
Method 1: Using the Array.from() and Map.keys()
The Array.prototype.from() method creates a new array instance from an iterable object, such as a Map. It can conjunction with the keys(), values(), or entries() methods of a Map object to create an array containing the map’s keys, values, or key-value pairs, respectively.
const map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3'],
]);
// Convert map keys to an array
const keysArray = Array.from(map.keys());
// Convert map values to an array
const valuesArray = Array.from(map.values());
// Convert map entries (key-value pairs) to an array
const entriesArray = Array.from(map.entries());
console.log(keysArray);
console.log(valuesArray);
console.log(entriesArray);
Output
[ 'key1', 'key2', 'key3' ]
[ 'value1', 'value2', 'value3' ]
[ [ 'key1', 'value1' ], [ 'key2', 'value2' ], [ 'key3', 'value3' ] ]
Method 2: Using the Spread operator(…) and Map.keys()
The spread operator (…) in JavaScript allows you to expand an iterable, such as an array or a Map, into its elements. For example, when used with a Map object, it can be combined with the keys(), values(), or entries() methods to create a new array containing the map’s keys, values, or key-value pairs, respectively.
const map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3'],
]);
// Convert map keys to an array
const keysArray = [...map.keys()];
// Convert map values to an array
const valuesArray = [...map.values()];
// Convert map entries (key-value pairs) to an array
const entriesArray = [...map.entries()];
console.log(keysArray);
console.log(valuesArray);
console.log(entriesArray);
Output
[ 'key1', 'key2', 'key3' ]
[ 'value1', 'value2', 'value3' ]
[ [ 'key1', 'value1' ], [ 'key2', 'value2' ], [ 'key3', 'value3' ] ]
Method 3: Using for…of loop
- Create an empty array to store the keys.
- Use the for..of loop to iterate all the Map keys you will get from Map.keys() method.
- At each iteration, push that key into an empty array.
let myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);
let keysArray = [];
for (let key of myMap.keys()) {
keysArray.push(key);
}
console.log(keysArray);
Output
[ 'a', 'b', 'c' ]
That’s it.

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.