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.

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

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.

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

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.

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

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.

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

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.

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

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

Using the Object.fromEntries() Method

The Object.fromEntries() method transforms a list of key-value pairs into an object. We can use this method in combination with Object.entries() to create an array of objects from a map.

Example: The below example uses the Object.fromEntries() method to convert a map into an array of objects.

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

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

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

Using the reduce() method

The reduce() method can be used to iterate through the map entries and construct an array of objects by accumulating the key-value pairs in an array.

Example: The following code demonstrates the use of the reduce() method to convert a map into an array of objects:

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

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

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

Using the Array.prototype.flatMap() Method

The Array.prototype.flatMap() method is used to first map each element using a mapping function and then flatten the result into a new array. It can be employed to convert a map into an array of objects by mapping over the map entries and transforming each entry into the desired object format.

Example: The below code demonstrates how to use the flatMap() method to convert a map into an array of objects:

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

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

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

Using a Generator Function

You can use a generator function to yield each key-value pair from the map as an object and then convert the generator's result to an array.

Example:

const myMap = new Map();
myMap.set("Company", "GeeksforGeeks");
myMap.set("Student", "Nikunj Sonigara");
console.log("Map Elements: ", myMap);

function* mapToObjects(map) {
  for (const [type, name] of map) {
    yield { type, name };
  }
}

const objectsArray = Array.from(mapToObjects(myMap));
console.log("Array of Objects: ", objectsArray);

Map Elements:  Map(2) { 'Company' => 'GeeksforGeeks', 'Student' => 'Nikunj Sonigara' }
Array of Objects:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Student', name: 'Nikunj Sonigara' }...