How to Convert an Array of Objects to Map in JavaScript?
Here are the different methods to convert an array of objects into a Map in JavaScript
1. Using new Map() Constructor
The Map constructor can directly create a Map from an array of key-value pairs. If each object in the array has a specific key-value structure, you can map it accordingly.
const a = [
{ id: 1, value: 100 },
{ id: 2, value: 200 },
{ id: 3, value: 300 },
];
const m = new Map(a.map((o) => [o.id, o.value]));
console.log(m);
Output
Map(3) { 1 => 100, 2 => 200, 3 => 300 }
This approach is concise and works well for simple transformations.
2. Using reduce()
The reduce() method allows you to iteratively build a Map by accumulating key-value pairs.
const a = [
{ id: 10, score: 50 },
{ id: 20, score: 60 },
{ id: 30, score: 70 },
];
const m = a.reduce((acc, o) => {
acc.set(o.id, o.score);
return acc;
}, new Map());
console.log(m);
Output
Map(3) { 10 => 50, 20 => 60, 30 => 70 }
This method is highly flexible, making it ideal for more complex transformations.
3. Using forEach()
The forEach() method can iterate over the array and manually populate the Map.
const a = [
{ key: "A", val: 1 },
{ key: "B", val: 2 },
{ key: "C", val: 3 },
];
const m = new Map();
a.forEach((o) => m.set(o.key, o.val));
console.log(m);
Output
Map(3) { 'A' => 1, 'B' => 2, 'C' => 3 }
This method is simple and easy to understand for small arrays.
4. Using for-of Loop
The for-of loop is a clear and flexible way to iterate over the array and create a Map.
const a = [
{ id: 101, qty: 5 },
{ id: 102, qty: 10 },
{ id: 103, qty: 15 },
];
const m = new Map();
for (const o of a) {
m.set(o.id, o.qty);
}
console.log(m);
Output
Map(3) { 101 => 5, 102 => 10, 103 => 15 }
This approach provides control over the iteration logic.
5. Using Object.entries()
If the array of objects has a key-value structure, Object.entries() can be used to generate a Map.
const a = [
{ key: "p", value: 20 },
{ key: "q", value: 30 },
{ key: "r", value: 40 },
];
const m = new Map(a.map(({ key, value }) =>
[key, value]));
console.log(m);
Output
Map(3) { 'p' => 20, 'q' => 30, 'r' => 40 }
This is a concise and efficient way to handle key-value objects.
6. Handling Duplicates Using Set and Array.from()
If the array has duplicate keys, you can remove them using Set and Array.from() before creating a Map.
const a = [
{ id: 1, val: 50 },
{ id: 2, val: 60 },
{ id: 1, val: 50 },
];
const unique = Array.from(new Set(a.map((o) =>
o.id))).map((id) =>
a.find((o) => o.id === id)
);
const m = new Map(unique.map((o) => [o.id, o.val]));
console.log(m);
Output
Map(2) { 1 => 50, 2 => 60 }
This is effective for handling duplicates and creating a Map with unique keys.
7. Using Custom Logic in reduce()
For more advanced cases, you can apply additional logic inside reduce() to process the array and populate the Map.
const a = [
{ id: "X", count: 4 },
{ id: "Y", count: 8 },
{ id: "Z", count: 12 },
];
const m = a.reduce((acc, o) => {
if (o.count > 5) acc.set(o.id, o.count);
return acc;
}, new Map());
console.log(m);
Output
Map(2) { 'Y' => 8, 'Z' => 12 }
This approach allows for custom filtering or transformation during the conversion.