How to Convert Map Values to an Array in JavaScript

JavaScript maps are introduced in ES6. It stores Key-value pairs in an ordered list. The usage of maps can be extremely helpful in storing basic key-value pairs like IDs and usernames. Moreover, JavaScript provides a couple of methods for how to iterate for retrieving a Map’s values because JavaScript Map objects are iterable.

This tutorial will describe the procedure for converting the map’s values into an array.

How to Convert/Transform Map Values into an Array Using JavaScript?

To transform the values of a map to an array, use the below-stated methods:

• Array.from() method
• Spread operator

Method 1: Convert Map Values to an Array Using Array.from() Method

For converting the values of a map to an array, use the “map.values()” method with the “Array.from()” method. The map.values() method is used to get the values of the map and the Array.from() method converts these values to an array.

Syntax
Follow the given syntax for converting map values to an array:

Example
Create a new map object using the Map() constructor:

Set the entries in a key-value pair in the map using the “set()” method:

Call the “values()” method in the “Array.from()” method to get the map values and converts them into an array and store it in a variable “mapValues”:

Finally, print the map values in an array on the console:

The output indicates that the values of the map are successfully converted into an array:

Method 2: Convert Map Values to an Array Using Spread Operator

Another way to transform the map’s values into an array is to use the “spread operator” with the “map.values()” method. The map.values() method first gets the map’s values, and the spread operator will copy all the map values into an array.

Syntax
Use the below-provided syntax for converting map values to an array using the spread operator:

Example
Call the “map.values()” method with the “spread operator” that will convert the values of the map into an array:

Output

Bonus Tip

If you want to convert keys or all the map entries into an array, follow the below section.

Convert Keys of Map to an Array Using Array.from() Method

For converting the keys of the map and all the entries (key-value pairs) of the map into an array, use the “map.Keys()” method and the “map.entries()” method with the “Array.from()” method. The map.Keys() method gets the keys of the map and the map.entries() method is used to retrieve the map’s entries in a key-value pair.

Example
For converting map keys, call the “map.Keys()” method in the “Array.from()” method:

Call the map.entries() method as an argument in Array.from() method for converting all the map entries into an array:

The output shows that the keys and entries of the map are successfully converted into an array:

Convert Map Keys to an Array Using Spread Operator Method

Let’s see the method to convert map keys and all the map entries into an array, using the “spread operator”.

Example
Call the “map.Keys()” method with the spread operator and store the resultant array in variable mapKeys:

For converting map entries in an array using the “map.entries()” method with the spread operator:

Output

We have compiled all the necessary information related to converting map values to an array and also map keys and entries into an array using JavaScript.

Conclusion

To convert the map values to an array, use the “map.values()” method with the “Array.from()” method or the “spread operator”. The map.values() method is used to get the map’s values and the Array.from() method converts these values to an array while the spread operator copies all the map values to an array. This tutorial describes the procedure for converting the values of a map to an array.