How to convert Map Values to an Array in JavaScript

|

Last updated on April 6th, 2022

|

JavaScript has many lesser known yet useful features. One such feature is the Map object. Introduced as part of the ECMAScript 2015 (ES6) specification (and not to be confused with the Array.protoype.map() method), the Map object stores an ordered list of key-value pairs. Maps can be particularly useful for storing simple key-value pairs such as IDs and usernames:

const users = new Map(); users.set("1", "user1"); users.set("2", "user2");

The fun part about using Maps is that the key-value pairs can be even more than just primitive values. For example, let’s say you have the same users except you’d like to store more information than just their username:

const user1 = { username: "user1", favoriteColor: "blue", }; const user2 = { username: "user2", favoriteColor: "green", }; const users = new Map(); users.set("1", user1); users.set("2", user2);

Now that we have a Map and a general understanding of its purpose, how would we go about actually retrieving the values of the Map? Specifically, how do we convert the values of the Map to an array?

The solution

JavaScript Map objects are iterable so that leaves us a few different ways to approach accessing a Map’s values. The first way may come to mind if you have not used Maps many times before. In these examples we’ll use the simpler Map from above where the values are just strings for brevity.

const result = []; users.forEach((user) => result.push(user));

In this solution, we create an array result to store the values and iterate through the Map, adding each value to the array. When iterating a JavaScript Map, each entry represents the value of that key-value pair. This is an easy solution and realistically there is nothing wrong with it. But can it be improved?

const result = Array.from(users.values());

Here we utilize a useful Map method: Map.protoype.values(). This method returns an iterator object for the values contained by the Map. Since this is just the iterator for the values, you will still need to iterate those values before you get your result. Luckily, the Array.from() method takes such an iterator object and creates a new array. This is a shallow-copied array so keep that in mind if you are using this with any objects with deeply-nested properties.

The final solution feels the most modern since it uses the ES6 spread syntax:

const result = [...users.values()];

This solution is similar to the previous one but simply spreads the values into an array rather than using the Array.from() method.

Conclusion

You now have a few different ways to convert the values of a Map to an array in JavaScript. While the Map object is not the most popular, it definitely has a place in your toolkit when it comes to creating a list of data — especially if the order matters and you want to be able to access each piece of data quickly and easily. There may be some debate about which method is the most efficient but at the end of the day it all depends on your use case and what feels the most concise and readable to you. If you have any other creative methods or thoughts on the ones used here please leave us some feedback.

Here is the full solution:

The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.

References

MDN Web Docs - Array.prototype.map()