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

Convert an Array of Objects to a Map

To convert an array of objects to a Map, call the map() method on the array and on each iteration return an array containing the key and value. Then pass the array of key-value pairs to the Map() constructor to create the Map object.

Example –

const arrayTo = [
  {key: 'name', value: 'Matt'},
  {key: 'country', value: 'England'},
];

const convertedMap = new Map(
  arrayTo.map(object => {
    return [object.key, object.value];
  }),
);

console.log(convertedMap);

The code above is converting an array into a map. A map() is a data structure that stores key-value pairs. In the code, the array has key-value pairs, but they’re in the form of objects. The code uses the map() method to convert the objects into an array of key-value pairs, which can be stored in a map.

The function we passed to the Array.map method is called with each element in the array.
We return an array containing an object’s key and value on each iteration.

const theArray = [
  {key: 'name', value: 'Matt'},
  {key: 'country', value: 'England'},
];

console.log(
  theArray.map(object => {
    return [object.key, object.value];
  }),
);

The final step is to take the result and pass it to the Map() constructor.

ℹ️ The Map() constructor creates a new Map object from an iterable object, such as an array. The iterable object must contain key-value pairs.

You could also use the Array.forEach method.

To convert an array of objects to a Map:

1. To create a new Map, use the Map() constructor.
2. Call the forEach() method on the array. This will allow you to iterate through each element in the array and perform a certain action on it.
3. On each iteration, insert the key-value pair into the new Map.

const theArray = [
  {key: 'name', value: 'Matt'},
  {key: 'country', value: 'England'},
];

const exampleMap = new Map();

theArray.forEach(object => {
  exampleMap.set(object.key, object.value);
});

console.log(exampleMap);

Explanation –
This code creates a new Map called exampleMap. It then loops through theArray and for each object in the array it calls the set method on exampleMap. The set method takes two arguments, the first is the key for the new value being added to the Map and the second is the value itself.

ℹ️ Use the forEach method to return undefined and store the state in a variable.

On each iteration, add a new key-value pair to the Map using Map.set.
The Map will contain all key-value pairs from the array of objects after the last iteration.

ℹ️ It’s up to you which method you want to use. I would recommend using the Array.map method because it allows us to return an array of key-value pairs without having to create an intermediary variable.

Conclusion

The map() method is a way to convert an array of objects into a Map. To do this, you call the map() method on the array, and then pass the resulting array of key-value pairs into the Map() constructor.