How to Convert an Array to Map in Javascript

by

To convert an array to a map in JavaScript, use the array.map() method and new Map() constructor. The map() is a built-in JavaScript method that creates a new array and then passes that array to the new Map() constructor to create a Map object.

What is Map in JavaScript

A Map contains key-value pairs where the keys can be any datatype. In addition, the Map has a property that represents the size of the map. The Map is Introduced in ES6 as a Data structure that is a collection of key-value pairs, similar to an object. 

To create a Map object in JavaScript, use the new Map() constructor.

Example

const cars = new Map([
 ["bmw", "red"],
 ["audi", "black"],
 ["mercedez", "white"]
]);

console.log(cars)

Output

Map(3) { 'bmw' => 'red', 'audi' => 'black', 'mercedez' => 'white' }

You can see the Map object, which has three key-value pairs.

In this tutorial, we want to convert an array of objects to Map Object.

What is Array.map() in JavaScript

The array.map() is a built-in JavaScript function that creates a new array by calling a function for every array element. The map() function map() calls a function once for each element in the array.

To map an array of elements in JavaScript, use the array.map() method.

In our example, every element is an array of objects, and we want to convert this array of objects into a Map object.

Syntax

Array.map( object => return{ object.key, object.value } )

Arguments

The Array.map() function takes an object as an argument and returns a new array.

How to create an array of objects in JavaScript

To create an array of objects in JavaScript, use the square brackets([ ]) and put the key-value pairs between those brackets separated by a comma.

const employees = [
 { id: 1, name: 'Alice' },
 { id: 2, name: 'Bob' },
 { id: 3, name: 'Calvin'},
 { id: 4, name: 'Doe' },
 { id: 5, name: 'Finn' }
];

You can see that we created an array named employees, which contains objects with id and name properties.

Converting Array to Map in Javascript

To convert an array of objects into a Map object, use the array.map() method and get the output and pass that output to the new Map() constructor.

const employees = [
 { id: 1, name: 'Alice' },
 { id: 2, name: 'Bob' },
 { id: 3, name: 'Calvin' },
 { id: 4, name: 'Doe' },
 { id: 5, name: 'Finn' }
];

const MapOfEmployees = new Map(
   employees.map(object => {
     return [object.id, object.name];
   }),
);

console.log(MapOfEmployees);

Output

Map(5) {
  1 => 'Alice',
  2 => 'Bob',
  3 => 'Calvin',
  4 => 'Doe',
  5 => 'Finn'
}

Here, we created a MapOfEmployees, a new “Map” object. We successfully converted an array of objects into a Map object.

Array objects to Map object using forEach and Map.set()

The Map.set() is a built-in JavaScript method that sets the value for a key in a Map. The forEach() is a built-in JavaScript method that calls a function for each element in an array.

To convert an array of objects to Map, use the forEach() method, iterate through every array element and predefine an empty Map object. Then inside the forEach() method, set the object key-value of the Map object.

const employees = [
 { id: 1, name: 'Alice' },
 { id: 2, name: 'Bob' },
 { id: 3, name: 'Calvin' },
 { id: 4, name: 'Doe' },
 { id: 5, name: 'Finn' }
];

const MapOfEmployees = new Map();

employees.forEach(object => {
 MapOfEmployees.set(object.id, object.name);
});

console.log(MapOfEmployees);

Output

Map(5) {
  1 => 'Alice',
  2 => 'Bob',
  3 => 'Calvin',
  4 => 'Doe',
  5 => 'Finn'
}

You can see that we created a Map object out of an array of objects in JavaScript.

Conclusion

There are two ways to convert an array to Map in JavaScript.

  1. Using Array.map() method + new Map()
  2. Using Array.forEach() method + Map.set()

We saw both ways, and it depends on developers which path they choose to achieve their goal.

That’s it for this tutorial.

See also

How to flatten an array of objects

How to combine arrays

Leave a Comment