How to convert a plain object into ES6 Map using JavaScript?

There are many ways to convert a plain object into an ES6 Map in JavaScript. The simplest and most effective way is using the Object.entries() function and the Map() constructor. In contrast, the more flexible alternatives include Object.keys() and Array.prototype.forEach() and the for...in loop and Map() function method.

A Map in ES6 is a collection of key-value pairs. Here we can use any type of object as a key, including primitive data types like strings and numbers. The values in the map can be any type of object.

The main difference between a Map and an object is that in a Map, the keys can have any data type, whereas in an object they are always converted to a string.

Nevertheless, maps have some advantages over plain objects, such as iterability and a guaranteed elemental order. This post will go over how to use JavaScript to transform a normal object into an ES6 Map.

Approach 1: Using the Object.entries() and Map()

The first approach that we will be learning today to convert plain object intp ES6 map consists of two steps −

• Use the Object.entries() method to get an array of key-value pairs from the object

• Then pass that array to the Map() constructor.

Example

Each array in the array of arrays returned by the Object.entries() method represents a keyvalue pair in the object. Here is an example of how to change a plain object into an ES6 Map using the Object.entries() and Map() constructors −

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map(Object.entries(plainObject));
console.log(map); 

In this example, the plain object is turned into an array of key-value pairs using the Object.entries() function. The array is then passed to the Map() function , which generates a new Map object with those key-value pairs.

The Object.entries() method only requires one line of code and is fully supported by the majority of modern browsers. However, this approach is limited to objects having enumerable properties and excludes properties with keys that are symbols.

Approach 2: Using a for...in loop and the Map() Constructor

Let us now look at another approach to convert a plain object into an ES6 Map. This method includes the following steps

• Use a for...in loop to iterate over the object's properties

• Add them to a new Map object using the Map.set() method.

Example

Here's an example of how to use a for...in loop and the Map() constructor to convert a plain object into an ES6 Map −

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
for (let key in plainObject) {
   map.set(key, plainObject[key]);
}
console.log(map); 

In this approach, we are looping and setting properties to the map, which might make this method less efficient than the first method.

However, this method also works for objects with non-enumerable properties, and properties with Symbols as keys.

Approach 3: Using the Object.keys() and Array.prototype.forEach()

In this approach we follow the below given steps −

• We first use Object.keys(obj) to get an array of the object's keys.

• Then we use the Array.prototype.forEach() method to iterate over the keys

• We then add the key-value pair to the map using the Map.set() method.

Example

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
Object.keys(plainObject).forEach(key => {
   map.set(key, plainObject[key]);
});
console.log(map);

It's important to keep in mind that the for...in loop, Object.keys(), and Array.prototype.forEach() methods will all return the properties in a different order than how they were defined in the original object. The attributes will be returned in the enumerated order instead.

The key-value pairs are, however, returned by the Map() function method in the order in which they were passed.

Conclusion

Based on the specific requirements of your project, you can choose the method that best suits your needs. Keep in mind that if order matters in your use case the Map() constructor method is the best choice; otherwise, the other methods work fine.