How to convert Map Values to an Array in JavaScript

Convert Map Values to an Array #

To convert the values of a Map to an array:

1. Call the values() method on the Map to get an iterator object that contains all of the values in the Map.

2. Call the Array.from() method, passing it the iterator as a parameter. The Array.from method creates a new array from an iterable object.

Copied!
const map = new Map();
map.set('name', 'John');
map.set('age', 30);

const values = Array.from(map.values());

console.log(values); // 👉️ ['John', 30]
console.log(values.length); // 👉️ 2

const keys = Array.from(map.keys()); // 👉️ ['name', 'age']

We used the Map.values method to get an iterator object that contains the values of the Map.

We then passed the iterator as the only argument in the call to the Array.from method.

The Array.from method converts the iterable into an array and returns the new array instance.

An alternative approach is to use the spread operator (...).

Convert Map Values to an Array using spread operator #

To convert the values of a Map object to an array:

1. Call the values() method on the Map to get an iterator object that contains the values of the Map.
2. Use the spread operator (...) to unpack the values from the iterator into a new array.

Copied!
const map = new Map();
map.set('name', 'Tom');
map.set('age', 39);

const values = [...map.values()];

console.log(values); // 👉️ ['Tom', 39]
console.log(values.length); // 👉️ 2

const keys = [...map.keys()]; // 👉️ ['name', 'age']

We used the spread operator (...) to unpack all of the values of the Map into a new array.

You can also do this with multiple Map objects.

Copied!
const map1 = new Map();
map1.set('name', 'Tom');

const map2 = new Map();
map2.set('country', 'Chile');

const values = [...map1.values(), ...map2.values()];

console.log(values); // 👉️ ['Tom', 'Chile']
console.log(values.length); // 👉️ 2

The order in which we unpacked the values of the Map objects is preserved in the new array.

Further Reading #

• How to convert Map Keys to an Array in JavaScript
• How to Filter a Map in JavaScript
• How to update a Value in a Map using JavaScript
• How to add a Key/Value pair to a Map in JavaScript
• Create a Map from an Array using JavaScript
• How to iterate a Map using JavaScript
• How to Initialize a Map with Values in JavaScript
• Convert a Map to an Array of Objects in JavaScript
• How to Get the First Element of a Map in JavaScript
• Check if Object is of type Map in JavaScript
• How to get the Length of a Map in JavaScript
• Check if a Key exists in a Map using JavaScript
• Check if a Value exists in a Map using JavaScript
• How to check if a Map is Empty in JavaScript