Skip to main content

How to Convert an Array of Objects to a Map in JavaScript

Converting an array of objects into a Map is a common and powerful data transformation task. It allows you to create a fast lookup table where you can easily find an object by a unique identifier (like an id), rather than having to loop through the entire array each time.

This guide will teach you the modern and most idiomatic method for this conversion using Array.prototype.map() and the Map constructor. We will also cover the functional reduce() approach to give you a comprehensive understanding.

The Core Task: Creating a Key-Value Lookup​

The goal is to transform an array of objects into a Map, where one property of the object becomes the key and another property (or the whole object) becomes the value.

For example, you have an array of user objects and you want to be able to quickly look up a user by their id.

// Problem: How to convert this array into a Map for fast lookups by ID?
const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'editor' },
  { id: 3, name: 'Charlie', role: 'viewer' },
];

Desired Map: A Map where the keys are 1, 2, 3 and the values are the corresponding user objects.

The Map constructor can accept an iterable of [key, value] pairs. The most declarative way to create this structure from your array is with the Array.prototype.map() method.

The logic:

  1. Use .map() on your array of objects.
  2. In the callback function, for each object, return a new [key, value] array.
  3. Pass the resulting array of pairs directly to the new Map() constructor.

This clean, one-line solution is the best practice.

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'editor' },
];

// Map the array to an array of [key, value] pairs.
// In this case, the key is `user.id` and the value is the whole `user` object.
const userMap = new Map(
  users.map(user => [user.id, user])
);

console.log(userMap);
/* Output:
Map(2) {
  1 => { id: 1, name: 'Alice', role: 'admin' },
  2 => { id: 2, name: 'Bob', role: 'editor' }
}
*/

// Now you can perform fast lookups
console.log(userMap.get(2)); 
// Output: { id: 2, name: 'Bob', role: 'editor' }

Output:

Map(2) {
  1 => { id: 1, name: 'Alice', role: 'admin' },
  2 => { id: 2, name: 'Bob', role: 'editor' }
}
{ id: 2, name: 'Bob', role: 'editor' }

The Functional Alternative: Array.prototype.reduce()​

The Array.prototype.reduce() method can also be used for this task. It iterates over the array to "reduce" it to a single final value, in our case, the new Map.

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'editor' },
];

const userMap = users.reduce((accumulator, user) => {
  // For each user, set the user's ID as the key and the user object as the value.
  return accumulator.set(user.id, user);
}, new Map()); // The `new Map()` is the initial value for our accumulator.

console.log(userMap);
/* Output:
Map(2) {
  1 => { id: 1, name: 'Alice', role: 'admin' },
  2 => { id: 2, name: 'Bob', role: 'editor' }
}
*/

Output:

Map(2) {
  1 => { id: 1, name: 'Alice', role: 'admin' },
  2 => { id: 2, name: 'Bob', role: 'editor' }
}

Why the map() Method is the Best Practice​

While both methods are functional and effective, the map() with new Map() approach is generally considered superior for this specific task.

  • Readability and Intent: The map method clearly communicates that you are performing a 1-to-1 transformation of each element in the array into a new format ([key, value]). The reduce method is more of a generic "aggregator" and can be less intuitive at first glance.
  • Declarative Style: The map approach is more declarative. You describe the shape of the data you want ([key, value]), and then pass it to the Map constructor.

For this common transformation, new Map(array.map(...)) has become the idiomatic and professional standard.

Conclusion​

For converting an array of objects to a Map, modern JavaScript provides a clean, declarative, and efficient solution.

  • The recommended best practice is to use the map() method to transform your array into an array of [key, value] pairs, and then pass that result to the new Map() constructor.
  • The reduce() method is a powerful functional alternative that is also highly effective.

By using these modern array methods, you can easily and readably create Maps for fast and efficient data lookups.

Table of Contents