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

Convert a Map to an Array of Objects

To convert a Map to an array of objects:

  1. Call the Array.from() method and pass the Map object as the first parameter. Pass a arrow function as the second parameter.
  2. The function will return an object containing the key-value pair for each iteration.
  3. The Array.from() method creates a new Array instance from an iterable or array-like object, such as a Map.
const map = new Map();

map.set('name', 'Matt');
map.set('country', 'England');

const arr = Array.from(map, ([key, value]) => {
  return {[key]: value};
});

console.log(arr);
Convert a Map to an Array of Objects using Array.from() Method.
Convert a Map to an Array of Objects using Array.from() Method.

Explanation –
The code creates a new Map and sets the key ‘name’ with the value ‘Matt’ and the key ‘country’ with the value ‘England’. It then uses the built-in Array.from method to create an array from the map. The function passed to Array.from creates an object for each key/value pair in the map where the key is the property name and the value is the property value.

In above code we passed the following arguments to the Array.from method:

  1. The javascript object to convert to an array.
  2. A map instance that invoked with each elements in the array.

If the Array.from() method called without the map function, the Array.from() static method creates a new, shallow-copied two-dimensional Array instance.

Let’s try that –

const map = new Map();

map.set('name', 'Matt');
map.set('country', 'England');

const arr = Array.from(map);
console.log(arr);
Creating a shallow-copied two-dimensional Array instance.
Creating a shallow-copied two-dimensional Array instance.

The function that is passed to the Array.from() method is called for each element in the array.

The square bracket [] syntax can be used to destructure the elements of an array in an arrow function.

const [one, two] = ['hello', 'world'];

console.log(one); 
console.log(two); 
Destructuring elements using square bracket [] syntax.
Destructuring elements using square bracket [] syntax.

Array destructuring is a way to extract values from an array and assign them to variables.

Whatever return from the following function gets added to the return value of Array.from.

const arr = Array.from(map, ([key, value]) => {

  return {[key]: value};
});
Dynamic property key syntax [] is used to set the key of the object to the key of the Map.
Dynamic property key syntax [] is used to set the key of the object to the key of the Map.

We are setting the key of the object to the value of the variable key.

const a = 'name';

const obj = {
  [a]: 'Matt',
};

console.log(obj); //  {name: 'Matt'}

The Array.map method can be used to achieve the same result.

const map = new Map();

map.set('name', 'Matt');
map.set('country', 'England');

const arr = Array.from(map);
console.log(arr);

const arrOfObj = arr.map(([key, value]) => {
  return {[key]: value};
});
console.log(arrOfObj);

In this example, the Array.map method is used separately instead of passing it as a parameter to the Array.from method.

The code snippet works the same way as before.

Using Array.map method to achieve the same result.
Using Array.map method to achieve the same result.
How to Convert a Map to an Array of Objects in JavaScript.

Summary

In this article,

  • How to create a Map using the new keyword and using a [key, value] array.
  • How to get a [key, value] 2d array from a Map.
  • How to create a Map from a plain Javascript Object.
  • How to create a plain javascript Object from a Map.