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

An array of objects can contain multiple objects with the same properties i.e. key-value pairs. But a map does not contain duplicate values which means if you convert an array of objects with duplicate objects into a map, it will contain only the unique key-value pairs.

Example:

Input Array:  
[
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]
Output Map:  Map(2) 
{ 
    'Company' => 'GeeksforGeeks', 
    'Cricketer' => 'Virat Kohli' 
}

The below approaches can be used to convert an array of objects to a map in JavaScript:

Using the map() method

The Array.map() method of JavaScript can be used to iterate through each element of the array and then the set() method of JavaScript map can be used to set the properties of the JavaScript map.

Syntax:

arrayName.map((item)=>{ mapName.set()});

Example: The below example is the practical implementation of the map() method to convert an array of objects to a map.

Javascript

const objectsArray =
    [
        {
            type: "Company",
            name: "GeeksforGeeks"
        },
        {
            type: "Cricketer",
            name: "Virat Kohli"
        }
    ];
console.log("Array of objects is: ", objectsArray);

const createdMap = new Map();
objectsArray.map((obj) => {
    createdMap.set(obj.type, obj.name);
});
console.log("Created Map: ", createdMap);

Output

Array of objects is:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }...

Using the reduce() method

The Array.reduce() method can be used to reduce an array of objects to a JavaScript map by passing the initial value as a empty map and setting the properties using the map set() method to the initial empty map.

Syntax:

arrayName.reduce((map, obj)=>{}, emptyMap);

Example: The below code uses the reduce() method to convert an array of objects to a JavaScript map.

Javascript

const objectsArray =
    [
        {
            type: "Company",
            name: "GeeksforGeeks"
        },
        {
            type: "Cricketer",
            name: "Virat Kohli"
        }
    ];
console.log
    ("Array of objects is: ", objectsArray);

const createdMap = new Map();
objectsArray.reduce((map, obj) => {
    map.set(obj.type, obj.name);
    return map;
}, createdMap);
console.log("Created Map: ", createdMap);

Output

Array of objects is:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }...

Using the forEach() method

The Array.forEach() method can be used to iterate through each element of the array in the similar way as the map() method was used.

Syntax:

arrayName.forEach((item)=>{ mapName.set()});

Example: This code is the practical implementation of the forEach() method to convert an array of object into a JavaScript map.

Javascript

const objectsArray =
    [
        {
            type: "Company",
            name: "GeeksforGeeks"
        },
        {
            type: "Cricketer",
            name: "Virat Kohli"
        }
    ];
console.log
    ("Array of objects is: ", objectsArray);

const createdMap = new Map();
objectsArray.forEach((obj) => {
    createdMap.set(obj.type, obj.name);
});
console.log("Created Map: ", createdMap);

Output

Array of objects is:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }...

Using the Object.enteries() method

The Object.enteries() method here can be used to convert the key-value pairs of the objects into the arrays of keys and values which can be iterated later and converted to an map using the map() method.

Syntax:

 Object.enteries(arrayName).map([key, value]) => {});

Example: The below code implements the Object.enteries() method to convert an array of objects into a map.

Javascript

const objectsArray =
    [
        {
            type: "Company",
            name: "GeeksforGeeks"
        }
    ];
console.log("Array of objects is: ", objectsArray);

const createdMap =
    new Map(Object.entries
        (objectsArray).map(([key, value]) => [key, value]));
console.log("Created Map: ", createdMap);

Output

Array of objects is:  [ { type: 'Company', name: 'GeeksforGeeks' } ]
Created Map:  Map(1) { '0' => { type: 'Company', name: 'GeeksforGeeks' } }

Using the for-of loop

The for/of loop can be used to iterate through the object items of the array and then they can be set as the properties of the map using the map set() method.

Syntax:

for(const obj of arrayName){}

Example: The below code explains the use of the for/of loop to convert a array of objects into a map.

Javascript

const objectsArray =
    [
        {
            type: "Company",
            name: "GeeksforGeeks"
        },
        {
            type: "Cricketer",
            name: "Virat Kohli"
        }
    ];
console.log("Array of objects is: ", objectsArray);

const createdMap = new Map();
for (const obj of objectsArray) {
    createdMap.set(obj.type, obj.name);
}
console.log("Created Map: ", createdMap);

Output

Array of objects is:  [
  { type: 'Company', name: 'GeeksforGeeks' },
  { type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map:  Map(2) { 'Company' => 'GeeksforGeeks', 'Cricketer' => 'Virat Kohli' }...