Create a Map from an Array using JavaScript

Create a Map from an Array using JavaScript #

To create a Map from an array, pass a two dimensional array containing key-value pairs to the Map() constructor. The Map constructor creates a new Map and adds each key-value pair to it.

Copied!
// ✅ from Array of ARRAYS
const arr1 = [
  ['name', 'Tom'],
  ['country', 'Chile'],
];
const map1 = new Map(arr1);

console.log(map1); // 👉️ {'name' => 'Tom', 'country' => 'Chile'}

// ✅ from Array of OBJECTS
const arr2 = [
  {key: 'name', value: 'Tom'},
  {key: 'country', value: 'Chile'},
];

const map2 = new Map(
  arr2.map(object => [object.key, object.value])
);

console.log(map2); // 👉️ {'name' => 'Tom', 'country' => 'Chile'}

In our first example, 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.

We iterated over the array using the Array.map method.

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

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

Copied!
const arr2 = [
  {key: 'name', value: 'Tom'},
  {key: 'country', value: 'Chile'},
];

// 👇️ [ ['name', 'Tom'], ['country', 'Chile'] ]
const twoDimensionalArr = arr2.map(
  object => [object.key, object.value]
);
console.log(twoDimensionalArr)

Now we have an array of arrays that we can pass to the Map() constructor.

Further Reading #

• Concatenate Strings with a Separator using JavaScript
• How to update a Value in a Map using JavaScript