How to convert an Object to a Map in JavaScript

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

Copied!
const obj = {
  id: 1,
  name: 'bobby',
};

const map1 = new Map(Object.entries(obj));
console.log(map1); // 👉️ {'id' => 1, 'name' => 'bobby'}

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

Copied!
// 👇️ [['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.

Copied!
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.

Copied!
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.

Copied!
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);

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

Copied!
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.

Copied!
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);

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

Copied!
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:

• How to convert an Array to a Map in JavaScript
• Convert a Map to an Array of Objects in JavaScript
• How to Convert a Map to JSON in JavaScript
• Convert a Map to an Object in JavaScript
• Convert Map Keys and Values to an Array in JavaScript
• Convert Bytes to KB, MB, GB or TB using JavaScript