How to convert a map to array of objects in JavaScript?

A map in JavaScript is a set of unique key and value pairs that can hold multiple values with only a single occurrence. Sometimes, you may be required to convert a map into an array of objects that contains the key-value pairs of the map as the values of the object keys. Let us discuss some methods for converting a map into an array of objects in JavaScript.

Example:

Input Map:  Map(2) 
{ 
    'Company' => 'GeeksforGeeks', 
    'Cricketer' => 'Virat Kohli' 
}
Output Array:  
[
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]

The below methods can be used to convert a map into an array of objects in JavaScript:

Using the Array.from() method

The Array.from() method of JavaScript can be used to convert a map into an array of objects by passing the map and a callback function with the names of object keys as parameters to it.

Syntax:

Array.from(mapName, ([Objectkeys...])=>{});

Example: The below code is a practical implementation of the above-discussed approach.

Javascript

const myMap = new Map();
myMap.set("Company", "GeeksforGeeks");
myMap.set("Cricketer", "Virat Kohli");
console.log("Map Elements: ", myMap);

const objectsArray = Array.from
    (myMap, ([type, name]) => ({ type, name }));
console.log("Array of Objects: ", objectsArray);

Output

Map Elements:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }
Array of Objects:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]

Using the spread operator syntax

The spread operator syntax can be used to destructure the map and then iterate through each element using the map() method with a callback function to push them into an array of objects.

Syntax:

[...mapName].map(([ObjectKeys...])=>{});

Example: The below code converts a map into an array of objects using the spread operator syntax.

Javascript

const myMap = new Map();
myMap.set("Company", "GeeksforGeeks");
myMap.set("Cricketer", "Virat Kohli");
console.log("Map Elements: ", myMap);

const objectsArray =
    [...myMap].map(([type, name]) => ({ type, name }));
console.log("Array of Objects: ", objectsArray);

Output

Map Elements:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }
Array of Objects:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]

Using the Array.from() with Array.map() method

In this approach, the Array.from() method will destructure the elements of the map and then the map() method will iterate through them with a callback function to convert them into a array of objects.

Syntax:

Array.from(mapName).map(([objectKeys...])=>{});

Example: This code example implements the Array.from() and Array.map() methods to convert a map into an array of objects.

Javascript

const myMap = new Map();
myMap.set("Company", "GeeksforGeeks");
myMap.set("Cricketer", "Virat Kohli");
console.log("Map Elements: ", myMap);

const objectsArray =
    Array.from(myMap).map(([type, name]) => ({ type, name }));
console.log("Array of Objects: ", objectsArray);

Output

Map Elements:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }
Array of Objects:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]

Using the forEach() method

The forEach() method can be directly used to iterate the elements of the map and then push them into an empty array one by one with the help of the push() method.

Syntax:

mapName.forEach((objectKeys...)=>{arrayName.push()});

Example: The below code explains the use of the forEach() method to convert a map into an array of objects.

Javascript

const myMap = new Map();
myMap.set("Company", "GeeksforGeeks");
myMap.set("Cricketer", "Virat Kohli");
console.log("Map Elements: ", myMap);

const objectsArray = [];
myMap.forEach
    ((name, type) => objectsArray.push({ name, type }));
console.log("Array of Objects: ", objectsArray);

Output

Map Elements:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }
Array of Objects:  [
  { name: 'GeeksforGeeks', type: 'Company' },
  { name: 'Virat Kohli', type: 'Cricketer' }
]

Using the for of loop

The for of loop can also be used to iterate through the map elements and push them into an array as done in the last approach.

Syntax:

for(const [objectKeys...] of mapName){ arrayName.push() };

Example: The below code will illustrate the use of the for of loop to convert a map into an array in JavaScript.

Javascript

const myMap = new Map();
myMap.set("Company", "GeeksforGeeks");
myMap.set("Cricketer", "Virat Kohli");
console.log("Map Elements: ", myMap);

const objectsArray = [];
for (const [name, type] of myMap) {
    objectsArray.push({ name, type });
}
console.log("Array of Objects: ", objectsArray);

Output

Map Elements:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }
Array of Objects:  [
  { name: 'Company', type: 'GeeksforGeeks' },
  { name: 'Cricketer', type: 'Virat Kohli' }
]