Skip to main content

How to Convert a Map to an Array of Objects in JavaScript

A JavaScript Map is a powerful data structure for storing key-value pairs, but you often need to convert it into an array of objects for tasks like JSON serialization, data grid rendering, or passing it to functions that expect an array.

This guide will teach you the modern and most effective methods for converting a Map into an array. We will cover the two most common output formats: an array of {key, value} objects and an array of dynamic {[key]: value} objects.

The Core Methods: Array.from() and the Spread Syntax​

The simplest way to convert a Map into an array is to use either Array.from() or the spread syntax (...). By default, both of these will convert a Map into a two-dimensional array of [key, value] pairs.

The starting point:

const myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('country', 'Canada');

// This is our starting point for all conversions
const keyValuePairs = Array.from(myMap);
// const keyValuePairs = [...myMap]; // This does the exact same thing

console.log(keyValuePairs);

Output:

[ [ 'name', 'Alice' ], [ 'country', 'Canada' ] ]

This intermediate array of pairs is what we will transform into our final array of objects.

Format 1: Converting to an Array of {key, value} Objects​

This is a very common and useful format, where each object in the array has a consistent structure with key and value properties.

Problem: we need to convert our Map into this structure:

[
  { key: 'name', value: 'Alice' },
  { key: 'country', value: 'Canada' }
]

The Array.from() method can take a second argument: a mapping function. This is the most concise and efficient way to perform the conversion in a single step.

const myMap = new Map([
  ['name', 'Alice'],
  ['country', 'Canada'],
]);

const arrOfObjects = Array.from(myMap, ([key, value]) => ({ key, value }));

console.log(arrOfObjects);

Output:

[ { key: 'name', value: 'Alice' }, { key: 'country', value: 'Canada' } ]

How it works:

  • Array.from(myMap, ...): Iterates over the Map.
  • ([key, value]) => ...: For each [key, value] pair, it uses array destructuring to assign the key and value to variables.
  • ({ key, value }): It then returns a new object using shorthand property names. This is equivalent to return { key: key, value: value }.

Format 2: Converting to an Array of {[key]: value} Objects​

In this format, the key from the Map becomes the key of the new object. This can be useful for certain data structures, but it results in an array of objects with different "shapes."

Problem: we need to convert our Map into this structure:

[
  { name: 'Alice' },
  { country: 'Canada' }
]

Solution: Using Array.from() with Dynamic Keys​

The logic is almost identical, but we use computed property names ([key]) to create the object.

const myMap = new Map([
  ['name', 'Alice'],
  ['country', 'Canada'],
]);

const arrOfObjects = Array.from(myMap, ([key, value]) => ({ [key]: value }));

console.log(arrOfObjects);

Output:

[ { name: 'Alice' }, { country: 'Canada' } ]
note

({ [key]: value }): The square brackets around key tell JavaScript to use the value of the key variable as the property name for the new object.

An Alternative: The for...of Loop​

While the functional Array.from() method is more concise, a traditional for...of loop is also a perfectly valid and readable way to perform the conversion.

Solution: this example produces the {key, value} format.

const myMap = new Map([
  ['name', 'Alice'],
  ['country', 'Canada'],
]);

const arrOfObjects = [];
for (const [key, value] of myMap) {
  arrOfObjects.push({ key, value });
}

console.log(arrOfObjects);

Output:

[ { key: 'name', value: 'Alice' }, { key: 'country', 'Canada' } ]
note

This imperative approach can be easier to debug for developers who are less familiar with functional programming concepts.

Conclusion​

Converting a Map to an array of objects is a common and straightforward task in modern JavaScript.

  • The Array.from(map, ([key, value]) => ({...})) method is the most concise and efficient way to perform the conversion in a single step. It is the recommended best practice.
  • The spread syntax (...) combined with map() ([...myMap].map(...)) is a great alternative that is also highly readable.
  • A traditional for...of loop is a perfectly valid and easy-to-understand imperative solution.

The key to all modern methods is leveraging array destructuring ([key, value]) to easily access the components of each entry from the Map.

Table of Contents