Convert a Map to an Array of Objects in JavaScript

# Convert a Map to an Array of Objects in JavaScript

To convert a Map to an array of objects:

1. Pass the Map and a function to the Array.from() method.
2. Iterate over the Map in the function and return an object containing the current key-value pair.
3. The Array.from() method will convert the Map to an array of objects.

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);

You can format the array of objects differently depending on your use case.

Copied!
const map = new Map();

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

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

// 👇️ [ { key: 'name', value: 'Bob' },
//      { key: 'country', value: '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 called 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 used 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.

# Convert a Map to an Array of Objects using Array.map()

This is a three-step process:

1. Convert the Map to an array.
2. Use the Array.map() method to iterate over the array.
3. Return an object containing the key-value pair on each iteration.

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);

You can format the array of objects differently depending on your use case.

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);

// 👇️ [ { key: 'Bob' }, { key: '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 same way as in the previous code sample, however, the code is a little less performant.

You can also use the Map.forEach() method to convert a Map to an array of objects.

# Convert a Map to an Array of Objects using Map.forEach()

This is a three-step process:

1. Declare a new variable that stores an empty array.
2. Use the Map.forEach() method to iterate over the Map.
3. Wrap each key-value pair in an object and push the object into the array.

Copied!
const map = new Map();

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

const arr = [];

map.forEach((value, key) => {
  arr.push({key, value});
});

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

The function we passed to the Map.forEach method gets called for each key-value pair in the Map object.

On each iteration, we wrap the key and value into an object and push the object into an array.

# Convert a Map to an Array of Objects using for...of

You can also use a for..of loop to achieve the same result.

Copied!
const map = new Map();

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

const arr = [];

for (const [key, value] of map) {
  arr.push({key, value});
}

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

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we add the key-value pair of the Map to an object and push the object into the array.

Which approach you pick is a matter of personal preference. I'd use the Array.from() method with a map function because I find it quite direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Convert a Map to JSON in JavaScript
• Convert a Map to an Object in JavaScript
• Convert Map Keys and Values to an Array in JavaScript
• How to convert an Object to a Map in JavaScript