Like an object in JavaScript, a Map is a group/collection of key-value pairs. More specifically, converting a Map to an array of objects is a process of taking the key-value pairs of a Map and transforming them into an array of objects, where each object has properties for the key and value. This can be useful when you work with the data in an array rather than a Map format. In JavaScript, this can be done utilizing the Array.from() method or Map.forEach() method.
This article will describe the methods to convert a Map to an array of objects in JavaScript.
How to Convert a Map to an Array of Objects in JavaScript?
For converting a JavaScript Map to an array of objects, use the below-given methods:
-
- Array.from() method
- Map.forEach() method
Method 1: Convert Map to an Array of Objects Utilizing Array.from() Method
For the conversion of Map to an array comprises of objects, use the “Array.from()” method by passing the function and the Map as an argument where Map is iterated by the function and gives an object that contains the current key-value pair. The Array.from() method creates a new instance of an array from a given object, such as Map, array, and so on.
Syntax
Use the given syntax for the Array.from() method:
Example
First, create a new instance of Map:
Now, add the values in a key-value format in Map using the set() method:
map1.set('Hobby', 'Book Reading');
map1.set('Skill', 'Content Writer');
Call the Array.from() method and returns an object containing key-value pairs by iterating the Map:
return {[key]: value};
});
Finally, print the resultant array of objects on the console:
It can be observed that the Map has been successfully converted into an array of objects:
Method 2: Convert Map to an Array of Objects in JavaScript Utilizing Map.forEach() Method
Use the “Map.forEach()” method for iterating the Map and storing the objects in an empty array. The forEach() method runs a given function once for every key-value pair in the Map object.
Syntax
Use the following syntax for using the forEach() method:
//do something
} )
It contains a callback function with parameters value and key.
Example
Create a Map object named “map1”:
['name', 'John'],
['Hobby', 'Book Reading'],
['Skill', 'Content Writer']
]);
Now, create a variable that stores an empty array:
Loop the Map using the forEach() loop and wrap every key-value pair in an object and push the object into the empty array using the “push()” method:
arrObj.push({key, value});
});
Lastly, print the resultant array of objects on the console using the “console.log()” method:
Output
We have compiled all the necessary instructions related to the conversion of Map to an array of objects.
Conclusion
For converting a Map to an array of objects, use the “Array.from()” method or the “Map.forEach()” method. Both methods perform well but the Array.from() method is faster because it creates a new array with the same elements as the Map, so there is no need for an extra empty array. This article described the methods to convert a Map to an array comprises of objects.
