How to convert Map Values to an Array in JavaScript

Convert Map Values to an Array in JavaScript

The map() method creates a new array with the results of calling a provided function on every element in the original array.

ℹ️ To learn about diffrence between map and an array, please check these links.

Convert Map Values to an Array

To convert the values of a Map() object to an array, you can use the .values() method.

  1. Call the .values() method on the Map() object.
  2. Call the Array.from() method and pass .values() method as a parameter.

ℹ️ The values() method returns a new iterator object that contains the values for each element in the Map object in insertion order.

const map = new Map();
map.set('name', 'Matt');
map.set('age', 30);

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

console.log(values); 
console.log(values.length); 

const keys = Array.from(map.keys());
console.log(keys); 
Convert Map Values to an Array using Array.from() method.
Convert Map Values to an Array using Array.from() method.

Here’s what the above code is doing:

This code creates a new Map object and sets the key ‘name’ to the value ‘Matt’, and the key ‘age’ to the value 30. It then creates an array from the map’s values, and another array from the map’s keys.

We call the Map.values method to get an iterator object.

We converted the map into an array by passing the iterator into the Array.from method.

Note – The above approach to convert Map Values to an Array is recommended. The spread operator (…) should not be used with iterators, as the compiler will often throw an error.

Convert Map Values to an Array using spread operator

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

  1. Call the .values() method on the Map() object in order to get an iterator object that contains the values of the Map.
  2. Apply the spread operator (…) to unpack the values from an iterator into a new array.
const map = new Map();
map.set('name', 'Matt');
map.set('age', 30);

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

console.log(values); 
console.log(values.length); 

const keys = [...map.keys()]; 
console.log(keys);
Convert Map Values to an Array using spread operator
Convert Map Values to an Array using spread operator.

ℹ️ The spread operator (…) syntax allows an iterable (like an array) to be expanded in places where zero or more arguments are expected. So, in an object literal, the spread syntax would enumerate the properties of an object and add the key-value pairs to the object being created.

Explanation –

The Map’s values() method returns an iterator object that contains the Map’s values.

This method also works with multiple Map objects.

const map1 = new Map();
map1.set('name', 'Matt');

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

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

console.log(values); 
console.log(values.length); 
Convert Multiple Map Values to an Array using spread operator.
Convert Multiple Map Values to an Array using spread operator.

The order of the values in the Map objects is maintained in the new array.

How to convert Map Values to an Array in JavaScript.