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

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

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

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

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

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

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

Map(2) { 'Y' => 8, 'Z' => 12 }

This approach allows for custom filtering or transformation during the conversion.