How to convert an Array to a Map in JavaScript

# Table of Contents

1. Convert an Array of Objects to a Map in JavaScript
2. Convert an Array of Objects to a Map using forEach()
3. Convert an Array of Objects to a Map using reduce()
4. Convert a two-dimensional array to a Map in JavaScript

# Convert an Array of Objects to a Map in JavaScript

To convert an array of objects to a Map:

1. Use the Array.map() method to iterate over the array.
2. Return an array containing each key and value.
3. Pass the array of the key-value pairs to the Map() constructor.

Copied!
const arr = [
  {key: 'name', value: 'bobby hadz'},
  {key: 'country', value: 'Chile'},
];

const map1 = new Map(
  arr.map(obj => {
    return [obj.key, obj.value];
  }),
);

// ️👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(map1);

The function we passed to the Array.map() method gets called with each element (object) in the array.

On each iteration, we return an array containing the object's key and value.

The map() method returns an array of key-value pairs.

Copied!
const arr = [
  {key: 'name', value: 'bobby hadz'},
  {key: 'country', value: 'Chile'},
];

// 👇️ [ [ 'name', 'bobby hadz' ], [ 'country', 'Chile' ] ]
console.log(
  arr.map(obj => {
    return [obj.key, obj.value];
  }),
);

The last step is to pass the result to the Map() constructor.

The Map() constructor takes an iterable object, such as an array, as a parameter and creates a new Map object.

Note that the iterable must contain key-value pairs.

An alternative approach is to use the Array.forEach() method.

# Convert an Array of Objects to a Map using forEach()

This is a three-step process:

1. Use the Map() constructor to create a new Map.
2. Use the Array.forEach() method to iterate over the array.
3. On each iteration, add the key-value pair to the new Map.

Copied!
const arr = [
  {key: 'name', value: 'bobby hadz'},
  {key: 'country', value: 'Chile'},
];

const map1 = new Map();

arr.forEach(obj => {
  map1.set(obj.key, obj.value);
});

// ️👇️ { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(map1);

The function we passed to the forEach() method gets called with each element (object) in the array.

On each iteration, we use the Map.set() method to add a new key-value pair to the Map.

# Convert an Array of Objects to a Map using reduce()

This is a three-step process:

1. Use the Array.reduce() method to iterate over the array.
2. Initialize the accumulator variable to an empty Map.
3. Add each key-value pair to the new Map object.

Copied!
const arr = [
  {key: 'name', value: 'bobby hadz'},
  {key: 'country', value: 'Chile'},
];

const map1 = arr.reduce((accumulator, obj) => {
  return accumulator.set(obj.key, obj.value);
}, new Map());

// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(map1);

The function we passed to the Array.reduce() method gets called for each element (object) in the array.

We initialized the accumulator variable to a new Map object because that's what we passed as the second argument to the reduce() method.

On each iteration, we use the Map.set() method to add the current key-value pair to the Map object.

The Map.set() method adds or updates an entry in a Map with the specified key and value.

The method takes the key and value that should be added to the Map as parameters.

# Convert a two-dimensional array to a Map in JavaScript

Use the Map() constructor to convert a two-dimensional array to a Map object.

The Map constructor takes a two-dimensional array and returns a new Map object with all of the specified keys and values added to it.

Copied!
const arr = [
  ['name', 'bobby hadz'],
  ['country', 'Chile'],
];
const map1 = new Map(arr);

// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(map1);

We passed a two-dimensional array containing key-value pairs directly to the Map() constructor. All key-value pairs got added to the new Map.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Convert all Array Elements to Uppercase or Lowercase in JS
• Convert an Array of Objects to an Array of Values in JS
• Convert Array of Strings to Array of Numbers in JavaScript
• Convert Array to String (with and without Commas) in JS