JavaScript: How to Convert Map to an Array of Objects

Working with data structures in JavaScript is a common task for developers. One such data structure is the Map, which allows you to store key-value pairs. There may be scenarios where you need to convert a Map into an array of objects for further processing or display. In this article, we will explore how to achieve this conversion and provide you with a simple and effective solution.

The Problem

Let’s say you have a Map like this:

let myMap = new Map().set('a', 1).set('b', 2);

And you want to convert it into an array of objects like this:

[
   {
      "name": "a",
      "value": 1,
   },
   {
      "name": "b",
      "value": 2,
   }
]

The task at hand is to transform the Map into this specific array structure.

The Solution

To convert a Map into an array of objects in JavaScript, you can use a combination of Array.from() and the map() function. Here’s how you can do it:

let map = new Map().set('a', 1).set('b', 2);
let array = Array.from(map, ([name, value]) => ({ name, value }));

console.log(array);

Let’s break down what’s happening in this code:

1. We create a new Map called map and populate it with key-value pairs.
2. We use Array.from() to create a new array from the Map.
3. Inside the Array.from() function, we use destructuring to extract the name and value from each key-value pair in the Map. The arrow function then transforms this pair into an object with the desired structure, with properties name and value.
4. The resulting array, array, now holds the objects with the structure you wanted.
5. Finally, we log the array to the console to see the result.

Conclusion

Converting a Map into an array of objects in JavaScript can be accomplished efficiently using the Array.from() method along with the map() function. This approach allows you to transform your data into the desired format, making it easier to work with or display as needed. Now that you know how to perform this conversion, you can use it in your projects whenever the need arises.