In this article, you’ll learn how to convert a map into an array of objects in JavaScript by iterating over the map or using the Array.from()
function. Let’s read this article now.
Understanding the Map Class
The Map class represents a collection of key-value pair.
At this point, you may wonder what’s difference compared to an Object as both are key-value collections. The four main selling points of a Map compared to an Object are:
- Remembers the insert order of key-value pairs
- Directly iterable
- Expanded utility functions
- Keys can be any primitive type
Remembering the insert order specifically has been a highly wanted change, as objects don’t actually remember the insertion order. Instead, it sorts the keys as: Number-like keys first in ascending order, then string keys second in insert order.
Additionally, maps have functions like .count()
or .delete()
among other utility functions that the Object simply does not have.
The Map class’s iterability and less restrictive key types is probably the least impressive, and the former can be done similarly by an Object. However, it requires the Object.entries()
function to be iteratable.
You can find a more descriptive documentation here.
Convert a map to an array of objects in JavaScript
Looping over the Map
You can loop over a map and add the key-value pair into an array. However, there are two ways to do this.
Using the for…of loop:
The for…of
loop iterates over any iteratable sequence like string or arrays or in this context – maps.
Syntax:
for(const [key, value] of map);
Code:
const arr = []; const map = new Map(); map.set("z", 1); map.set("5", 2); map.set("a", 3); for (const [key, value] of map) { arr.push([key, value]); } console.log(arr);
Output:
[ [ 'z', 1 ], [ '5', 2 ], [ 'a', 3 ] ]
Map.prototype.forEach():
The Map class’s .forEach()
function will loop through a map and execute a callback function for every key-value pair.
Note that function(){}
can be written as ()=>{}
(An anonymous function).
Syntax:
Map.prototype.forEach(function(key,value) {...});
Code:
const arr = []; const map = new Map(); map.set("z", 1); map.set("5", 2); map.set("a", 3); map.forEach((k, v) => { arr.push({ key: k, value: v }); }); console.log(arr);
Output:
[ [ 'z', 1 ], [ '5', 2 ], [ 'a', 3 ] ]
Using Array.from()
Array.from()
is a static function that takes an iterable value like strings, arrays or in this case – maps and returns a new array containing all its iterable values or pairs.
Additionally, the second argument can be a function that is executed for every element which has two arguments representing the current value and index. The callback function’s return value becomes the array’s new value.
Syntax:
Array.from(iterable_val, callback?(elm, ind?) => {});
Code:
const map = new Map(); map.set("z", 1); map.set("5", 2); map.set("a", 3); const arr = Array.from(map, (set) => { return { key: set[0], value: set[1] }; }); console.log(arr);
Output:
[
{ key: 'z', value: 1 },
{ key: '5', value: 2 },
{ key: 'a', value: 3 }
]
Summary
To convert a map into an array of objects in JavaScript, you can use the static Array.from()
function to directly convert any iterable value (In this case a Map) into a new array. I highly recommend this method. Let’s try them to get your desired results. You can learn how to add a value to an array if the value doesn’t exist here.
Maybe you are interested:
- Count the duplicates in an array using JavaScript
- Get an Object’s Keys as Array in JavaScript
- Add Array of Values to an Existing Set in JavaScript
Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.
Programming Languages: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP