JS Map Return Object

A Map is a collection/group of key-value pairs in which any sort of data can be used for the keys. It remembers the order in which the keys were originally inserted. A key in the Map can only appear once, and it is distinct from the rest of the Map’s collection. Key-value pairs iterate through a Map object. Moreover, Map values can be set using the “map.set()” method.

This post will describe the methods for converting JavaScript maps into objects.

How Does a JS Map Return an Object?

JavaScript Map returns an object using the following methods:

Array.from() method with reduce() method
map.entries() method with reduce() method

Method 1: JS Map Return an Object Using Array.from() Method With reduce() Method

To return an object from a Map, first, convert it into an array using the “Array.from()” method and then call the “reduce()” method. The reduce() method calls the callback function called “reducer” on every array element of Map and returns the key-value pairs to the reduce() method. The Array.from() is a static method of an Array object. It creates a new array instance from iterable objects such as Map and Set.

Example
First, create a new Map object:

let map = new Map();

Add elements in Map in a key-value pair using the set() method:

map.set(1, "JavaScript");
map.set(2, "HTML");
map.set(3, "CSS");

Call the Array.from() method with reduce() method to convert the map to an object:

let object = Array.from(map).reduce((obj, [key, value]) => {
obj[key] = value;
return obj;
}, {});

Finally, print the object on the console:

console.log(object);

The output indicates that the map is successfully converted to an object:

Method 2: JS Map Return an Object Using the map.entries() Method With reduce() Method

Another way to return an object from a JavaScript Map is to use the “map.entries()” method with the “reduce()” method. The entries() method outputs a new iterator object that comprises the [key, value] pairs in an array, and the reduce() method calls the reducer callback function on each element of Map. It returns the key-value pairs to the reduce() method.

Example
Here, we will call the map.entries() method with reduce() method for converting a map to an object:

let object = [...map.entries()].reduce((obj, [key, value]) => {
obj[key] = value;
return obj;
}, {});

Output

That’s all about JS Map return Objects using JavaScript.

Conclusion

JavaScript Map returns an object using the “Array.from()” method with the “reduce()” method or the “map.entries()” method with the “reduce()” method. Both of these approaches efficiently return an object from a Map while the map.entries() method with reduce() method is fast. This post described the methods for converting JavaScript maps into objects.

JS Map Return Object – JavaScript

How Does a JS Map Return an Object?

Method 1: JS Map Return an Object Using Array.from() Method With reduce() Method

Method 2: JS Map Return an Object Using the map.entries() Method With reduce() Method

Conclusion

About the author

Farah Batool