Convert a Map to an Array of Objects in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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.
index.js
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.

index.js
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.

index.js
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.

This is an actual map (Array.map) function. It allows us to iterate over an array and create a new array, based on the returned values.

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

index.js
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.

index.js
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.

index.js
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 #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.