How to Convert Map Values to an Array in JavaScript

Tari Ibaba
Last updated on June 09, 2022
How to Convert Map Values to an Array in JavaScript

Let's look at some ways to easily convert the values of a Map object to an array in JavaScript.

11 Amazing New Features in ES13

11 Amazing New Features in ES13
Get up to speed with all the latest features added in ECMAScript 13 to modernize your JavaScript with shorter and more expressive code.

1. Map values() and Array from()

To convert Map values to an array, we can call the values() method on the Map, and pass the result to the Array.from() method. For example:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

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

console.log(values); // [ 'John', 'Kate', 'Peter' ]

The Map values() method returns an iterable of values in the Map. The Array.from() method can create arrays from iterables like this.

2. Map values() and Spread Syntax (...)

We can also use the spread syntax (...) to unpack the elements of the iterable returned by the Map values() method into an array. For example:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

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

console.log(values); // [ 'John', 'Kate', 'Peter' ]

Using the spread syntax allows us to combine the values of multiple Map objects into one array. For example:

const map1 = new Map([['user1', 'John']]);

const map2 = new Map([
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

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

console.log(values); // [ 'John', 'Kate', 'Peter' ]

See also