JavaScript: 4 Ways to Convert an Object to a Map

This practical, example-based article will walk you through a couple of different ways to convert an object into a map in modern JavaScript (ES6 and beyond). I assume you already have some knowledge about the programming language, so I won’t waste your time by explaining what JavaScript is or rambling about its long-life history. Let’s get straight to the main points.

Using the Object.entries() method and the Map() constructor

In my opinion, this is the most concise and intuitive approach to getting the job done (only a single line of code is needed). The Object.entries() method returns an array of key-value pairs from the input object, and the Map() constructor takes an iterable of key-value pairs as an argument.

Example:

const obj = { foo: 'bar', hello: 'world', sling: 'academy' };
const map = new Map(Object.entries(obj));
console.log(map);

Output:

Map(3) { 'foo' => 'bar', 'hello' => 'world', 'sling' => 'academy' }

Using the Object.keys() method and the Array.forEach() method

Another good technique to convert an object into a Map is to use the Object.keys() method and the Array.prototype.forEach() method. The Object.keys() method returns an array of the object’s own enumerable property names, and the Array.prototype.forEach() method executes a callback function for each element in the array.

Example:

// the source object
const obj = { foo: 'bar', hello: 'world', sling: 'academy' };

// create an empty map
const map = new Map();

// iterate over the object
Object.keys(obj).forEach((key) => {
  map.set(key, obj[key]);
});

console.log(map);

Output:

Map(3) { 'foo' => 'bar', 'hello' => 'world', 'sling' => 'academy' }

Using a for…of loop and the Map.set() method

A for...of loop and the Map.prototype.set() method gives us quite interesting solution to turn a given object into an ES6 Map. The for...of loop iterates over the object’s own enumerable properties and the Map.prototype.set() method adds or updates a key-value pair in the map.

Example:

const obj = { a: 1, b: 2, c: 3 };
const map = new Map();

for (let [key, value] of Object.entries(obj)) {
  map.set(key, value);
}

console.log(map);

Output:

Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

Note that in this case, using for...of is better than for...in because for…in loops over all enumerable properties, including those on the prototype chain. This means that you may get some unwanted properties that are not part of the object itself. If you still want to use for...in, you need to use the hasOwnProperty() method to check if the property belongs to the source object:

const obj = { a: 1, b: 2, c: 3 };
const map = new Map();

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    map.set(key, obj[key]);
  }
}

console.log(map);

Using the Object.keys() method and the Array.map() method

You can use the Object.keys() method to get an array of the object’s keys, and then use the Array.map() method to map each object key to a key-value pair array and then pass the result to the Map() constructor.

Example:

const obj = { foo: 'bar', hello: 'world', sling: 'academy' };
const kvPairs = Object.keys(obj).map((key) => [key, obj[key]]);
const map = new Map(kvPairs);
console.log(map);

Output:

Map(3) { 'foo' => 'bar', 'hello' => 'world', 'sling' => 'academy' }

This approach is not much different from the first one. Honestly, it’s a little more verbose and clunky. Anyway, it still works well, and I think you may gain some benefits when knowing it exists.

Benefits of using a Map over an object

There are some benefits of using a Map over an object in JavaScript, such as:

• A Map does not have a prototype, so there are no default keys in the Map that could interfere with your logic. An object inherits some properties from Object.prototype, which could cause unexpected behavior or collisions.
• A Map preserves the insertion order of elements, whereas an object does not. This means that you can iterate over a Map in the same order that the elements were added, which can be useful for some applications.
• A Map can have any type of key, including objects, functions, symbols, etc., whereas an object can only have strings or symbols as keys. This gives you more flexibility and expressiveness when working with Maps.
• A Map has a size property that returns the number of elements in the Map, whereas an object does not have a built-in way to get its size. You would have to manually keep track of the size of an object or use Object.keys(obj).length, which is less efficient.