How to Convert a Map to an Array in JavaScript
In JavaScript, a Map object is a collection of key-value pairs that can be used to store and retrieve data efficiently. However, sometimes it may be necessary to convert this Map object into an array of objects in JavaScript for further processing or manipulation.
There are several ways to convert a Map object to an array of objects in JavaScript.
Array from() Method
One approach is to use the Array.from() method, which creates a new Array instance from an iterable object, such as a Map. This method takes in two arguments: the first is the iterable object, and the second is a map function that will be applied to each element of the iterable object.
Here’s an example of how to use Array.from() to convert a Map object to an array of objects:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const map = new Map(); map.set("name", "Michael"); map.set("age", 26); map.set("isMarried", false); const arrResult = Array.from(map, function (entry) { return { key: entry[0], value: entry[1] }; }); console.log(arrResult); // Output 👇 [ { key: "name", value: "Michael" }, { key: "age", value: 26 }, { key: "isMarried", value: false }, ]; |
We can use array destructuring and an arrow function to simplify the code when converting a Map object to an array of objects in JavaScript.
|
1 2 3 4 5 6 |
const arr = Array.from(map, ([key, value]) => ({ key, value, })); |
To convert the Map to an array of key-value objects:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const arrResult = Array.from(map, ([key, value]) => ({ [key]: value, })); console.log(arrResult); // Output 👇 [ {name: 'Michael'}, {age: 26}, {isMarried: false}, ]; |
If the map function is not passed as an argument, Array.from() will return an array of key-value pairs for each entry in the Map. For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const arrResult = Array.from(map); console.log(arrResult); // Output 👇 [ ['name', 'Michael'], ['age', 26], ['isMarried', false] ] |
We can then use the Array map() method to transform the array into an array of objects.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const arrResult = Array.from(map).map(([key, value]) => ({ key, value, })); console.log(arrResult); // Output 👇 [ {key: 'name', value: 'Michael'}, {key: 'age', value: 26}, {key: 'isMarried', value: false} ]; |
Read: Difference Between Null and Undefined in JavaScript?
Spread Operator and Array map()
Another approach is to use the spread operator (...) to convert the Map object into an array of key-value pairs, and then use map() method to convert the key-value pair into an object.
For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const map = new Map(); map.set("name", "Michael"); map.set("age", 26); map.set("isMarried", false); const arrResult = [...map]; console.log(arrResult); // Output 👇 [ ["name", "Michael"], ["age", 26], ["isMarried", false], ]; |
using map() method to convert the key-value pair into an object. We have:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const arrResult = [...map].map(([key, value]) => ({ key, value, })); console.log(arrResult); // Output 👇 [ { key: "name", value: "Michael" }, { key: "age", value: 26 }, { key: "isMarried", value: false }, ]; |
Convert Map Keys and Values to an Array using the forEach() method
You could also use forEach() method, that takes in a callback function and iterates over the map and push the key-value pairs to an empty array, and then returns the array.
For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const map = new Map(); map.set("name", "Michael"); map.set("age", 26); map.set("isMarried", false); const arrValues = []; const arrKeys = []; map.forEach((value, key) => { arrValues.push(value); arrKeys.push(key); }); console.log(arrKeys); // Output 👇 ['name', 'age', 'isMarried'] console.log(arrValues); // Output 👇 ['Michael', 26, false] |
In summary, there are multiple ways to convert a Map object to an array of objects in JavaScript, including using the Array.from() method, the spread operator, and forEach() method. Each approach has its own benefits and limitations, and the best method to use will depend on the specific requirements of your project.
Have you found this to be useful?
Sharing this article will help support my work.
