Skip to main content

How to Convert a Map to an Object in JavaScript

The Map object in JavaScript is a powerful data structure for storing key-value pairs, offering advantages over plain objects, such as the ability to use any data type as a key. However, you will often need to convert a Map back into a plain JavaScript object, especially when you need to serialize the data to JSON.

This guide will teach you the modern and most direct method for converting a Map to an object using Object.fromEntries(). We will also cover the manual approach using a forEach loop to illustrate the underlying process.

The Object.fromEntries() method is the standard, built-in tool for this exact task. It takes an iterable of key-value pairs (like a Map) and transforms it into a new object.

Problem: you have a Map and need to convert it into a plain object.

// Problem: How to convert this Map into an object?
const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

Solution: this single, readable line is all you need.

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

const myObject = Object.fromEntries(myMap);

console.log(myObject);  // Output: { name: 'Alice', age: 30 }
note

This is the most concise and idiomatic way to perform the conversion.

Manual Method: Using Map.prototype.forEach()​

Before Object.fromEntries() was introduced, the standard way to convert a Map was to iterate over it manually and build a new object. This approach is still functional and is useful for understanding the underlying process.

The logic:

  1. Initialize an empty object.
  2. Use the map.forEach() method to loop through each [key, value] pair in the Map.
  3. On each iteration, assign the key and value to the new object.

Example:

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

const myObject = {};

myMap.forEach((value, key) => {
  myObject[key] = value;
});

console.log(myObject);  // Output: { name: 'Alice', age: 30 }

Why Object.fromEntries() is the Best Practice​

While both methods achieve the same result, Object.fromEntries() is superior for several reasons:

  • Conciseness: It's a single, declarative method call, making your code shorter and easier to read.
  • Readability: The method's name clearly communicates its purpose.
  • Immutability: It creates and returns a new object in a single step, which aligns well with modern functional programming patterns.

The forEach method is more verbose and requires manual initialization and mutation of the new object. For a direct conversion, Object.fromEntries() is always the better choice.

Bonus: Converting an Object Back to a Map​

The reverse operation—converting an object to a Map—is also a common task. This is done by passing the result of Object.entries() to the Map constructor.

const myObject = {
  name: 'Alice',
  age: 30,
};

// Object.entries() creates an array of [key, value] pairs.
const entries = Object.entries(myObject);
console.log(entries); 
// Output: [ ['name', 'Alice'], ['age', 30] ]

// The Map constructor accepts this array format directly.
const myMap = new Map(entries);

console.log(myMap);
// Output: Map(2) { 'name' => 'Alice', 'age' => 30 }

Conclusion​

Converting a Map to an object is a straightforward task in modern JavaScript.

  • The Object.fromEntries(myMap) method is the recommended best practice. It is the most concise, readable, and efficient way to perform the conversion.
  • The manual iteration method using forEach is a functional alternative but is more verbose and less declarative.

For any script that requires converting a Map to a plain object, Object.fromEntries() is the professional and correct choice.

Table of Contents