How to convert an Object to a Map in JavaScript

avatar
Borislav Hadzhiev

Last updated: Jan 7, 2023
3 min

banner

# Convert an Object to a Map in JavaScript

To convert an object to a Map:

  1. Use the Object.entries() method to get an array of key-value pairs.
  2. Pass the result to the Map() constructor.
  3. The new Map will contain all of the object's key-value pairs.
index.js
const obj = { id: 1, name: 'bobby', }; const map1 = new Map(Object.entries(obj)); console.log(map1); // ๐Ÿ‘‰๏ธ {'id' => 1, 'name' => 'bobby'}

convert an object to a map

The Object.entries method returns an array of the given object's key-value pairs.

index.js
// ๐Ÿ‘‡๏ธ [['id', 1], ['name', 'bobby']] console.log(Object.entries({id: 1, name: 'bobby'}));

The first element in each nested array is the key and the second is the value.

We then passed the array of key-value pairs to the Map() constructor.

index.js
const obj = { id: 1, name: 'bobby', }; const map1 = new Map(Object.entries(obj)); console.log(map1); // ๐Ÿ‘‰๏ธ {'id' => 1, 'name' => 'bobby'}

The Map constructor takes an iterable such as an array of key-value pairs and creates a Map.

If you have to do this often, define a reusable function.

index.js
function objectToMap(obj) { return new Map(Object.entries(obj)); } const obj = { id: 1, name: 'bobby', }; const map1 = objectToMap(obj); // ๐Ÿ‘‡๏ธ Map(2) { 'id' => 1, 'name' => 'bobby' } console.log(map1);

The objectToMap function takes an object as a parameter, converts the object to a Map and returns the result.

Alternatively, you can use the Array.map() method.

# Convert an Object to a Map using Array.map()

This is a three-step process:

  1. Use the Object.keys() method to get an array of the object's keys.
  2. Use the Array.map() method to get an array of key-value pairs.
  3. Pass the array to the Map constructor.
index.js
const obj = { id: 1, name: 'bobby', }; const arr = Object.keys(obj).map(key => [key, obj[key]]); // ๐Ÿ‘‡๏ธ [ [ 'id', 1 ], [ 'name', 'bobby' ] ] console.log(arr); const map1 = new Map(arr); // Map(2) { 'id' => 1, 'name' => 'bobby' } console.log(map1);

convert object to map using array map

The Object.keys method returns an array of the object's keys.

index.js
const obj = { id: 1, name: 'bobby', }; // ๐Ÿ‘‡๏ธ [ 'id', 'name' ] console.log(Object.keys(obj));

The function we passed to the Array.map() method gets called with each element (key) in the array.

On each iteration, we return an array containing the current key and value.

The map() method returns a new array containing the values returned from the callback function.

The last step is to pass the array of key-value pairs to the Map() constructor.

# Convert an Object to a Map using a for...of loop

This is a three-step process:

  1. Use the Object.entries() method to get an array of key-value pairs.
  2. Use a for...of loop to iterate over the array.
  3. Add each key-value pair to a new Map object.
index.js
const obj = { id: 1, name: 'bobby', }; const map1 = new Map(); for (const [key, value] of Object.entries(obj)) { map1.set(key, value); } // ๐Ÿ‘‡๏ธ Map(2) { 'id' => 1, 'name' => 'bobby' } console.log(map1);

convert object to map using for of loop

We used the Object.entries method to get an array of the object's key-value pairs.

index.js
const obj = { id: 1, name: 'bobby', }; // ๐Ÿ‘‡๏ธ [ [ 'id', 1 ], [ 'name', 'bobby' ] ] console.log(Object.entries(obj));

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we use the Map.set() method to add the current key-value pair to the new Map.

The Map.set method adds or updates an entry in a Map with the specified key and value.

The method takes the key and value that should be added to the Map as parameters.

After the last iteration, the Map contains all of the key-value pairs of the object.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev