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, passing it the Map as the first parameter and a function as the second.
2. On each iteration of the function, return an object containing the current key-value pair.
3. The Array.from method creates a new array from an iterable object, such as a Map.

Copied!
const map = new Map();

map.set('name', 'Bob');
map.set('country', 'Chile');

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

// 👇️ [{name: 'Bob'}, {country: 'Chile'}]
console.log(arr);

We passed the following arguments to the Array.from method:

1. an iterable object that we want to convert to an array
2. a map function that gets called with each element in the array

If we call the Array.from method without the map function, we get a two dimensional array.

Copied!
const map = new Map();

map.set('name', 'Bob');
map.set('country', 'Chile');

// 👇️ [['name', 'Bob'], ['country', 'Chile']]
const arr = Array.from(map);
console.log(arr);

The function we passed to the Array.from method gets invoked with each element in the array.

We used the square bracket [] syntax to destructure the elements of the array in the arrow function.

Copied!
const [a, b] = ['hello', 'world'];

console.log(a); // 👉️ hello
console.log(b); // 👉️ world

Array destructuring enables us to unpack multiple array values into variables in a single statement.

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

We use the dynamic property key syntax [] to set the key of the object to the actual key of the Map.

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

A simple way to think about the dynamic key assignment is that we are evaluating the variable key and setting the object's key to the result.

Copied!
const a = 'name';

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

console.log(obj); // 👉️ {name: 'Bob'}

Here's an example that achieves the same result by using the Array.map method separately.

Copied!
const map = new Map();

map.set('name', 'Bob');
map.set('country', 'Chile');

// 👇️ [['name', 'Bob'], ['country', 'Chile']]
const arr = Array.from(map);
console.log(arr);

// 👇️ [{name: 'Bob', country: 'Chile'}]
const arrOfObj = arr.map(([key, value]) => {
  return {[key]: value};
});
console.log(arrOfObj);

Instead of passing the Array.map function as a parameter to the Array.from method, we used it separately.

Everything works in the exact same way as in the previous code snippet.

Further Reading #

• How to get the Length of a Set in JavaScript
• How to convert Map Values to an Array in JavaScript