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.

Using Object.entries() and Map() Constructor

The most straightforward approach to convert a plain object into 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.

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

Map(3) { 'one' => 1, 'two' => 2, 'three' => 3 }
Size: 3
Value for 'two': 2

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() constructor, 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.

Using for...in Loop and 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.

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);
console.log("Has 'one':", map.has("one"));

Map(3) { 'one' => 1, 'two' => 2, 'three' => 3 }
Has 'one': true

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.

Using 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.

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);
console.log("Keys:", Array.from(map.keys()));

Map(3) { 'one' => 1, 'two' => 2, 'three' => 3 }
Keys: [ 'one', 'two', 'three' ]

Comparison

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() constructor method in the order in which they were passed.

Conclusion

The Object.entries() method is the most efficient and concise way to convert objects to Maps. Use alternative methods like for...in loop when you need to handle Symbol keys or non-enumerable properties.