How To Convert A Map Into An Array Of Objects In JavaScript

How to Convert a Map into an Array of Objects in JavaScript

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:

Leave a Reply

Your email address will not be published. Required fields are marked *