How to Initialize a Map with Values in JavaScript

# Table of Contents

1. Initialize a Map with Values from an Array
2. Initialize a Map with values from an Object
3. Manually adding values to a Map object

# Initialize a Map with Values from an Array

Pass an array containing arrays of key-value pairs to the Map() constructor to initialize a Map with values.

The first element in each array should be the key and the second, the value.

Copied!
// ✅ Create a Map from an Array

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

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

console.log(map1.get('name')); // 👉️ bobby hadz

We passed a two-dimensional array to the Map() constructor to initialize the Map with values.

The first element in each nested array is the key and the second is the value.

You can also convert a Map to a two-dimensional array.

Copied!
const arr = Array.from(map1);
// 👉️ [['country], 'Chile], ['name', 'Tom'], ['age', 30]]
console.log(arr);

We used the Array.from() method to convert a Map object to an array.

# Initialize a Map with values from an Object

Alternatively, you can use the Object.entries() method.

The Object.entries() method returns an array of key-value pairs that can be used to initialize a Map.

Copied!
const obj = {name: 'bobby hadz', country: 'Chile'};

const map1 = new Map(Object.entries(obj));

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

The Object.entries() method returns a two-dimensional array, where each nested array contains a key and a value.

Copied!
const obj = {name: 'bobby hadz', country: 'Chile'};

// 👇️ [ [ 'name', 'bobby hadz' ], [ 'country', 'Chile' ] ]
console.log(Object.entries(obj));

The Map constructor expects an array of key-value pairs as a parameter, so the Object.entries() method does exactly what we need.

# Manually adding values to a Map object

An alternative approach is to create an empty Map and manually set its key-value pairs.

Copied!
const map1 = new Map();

map1.set('name', 'bobby hadz');
map1.set('country', 'Chile');
map1.set('age', 30);

// Map(3) { 'name' => 'bobby hadz', 'country' => 'Chile', 'age' => 30 }
console.log(map1);

console.log(map1.get('name')); // 👉️ bobby hadz

We used the Map() constructor to create an empty Map object.

The Map.set() method takes a key and a value as parameters and adds the key-value pair to the Map object.

The Map.set method returns the Map object, so you can chain calls to the method.

Copied!
const map1 = new Map();

map1
  .set('name', 'bobby hadz')
  .set('country', 'Chile')
  .set('age', 30)
  .set('salary', 50);

// Map(4) {
//   'name' => 'bobby hadz',
//   'country' => 'Chile',
//   'age' => 30,
//   'salary' => 50
// }
console.log(map1);

On each call to the Map.set() method, the Map object gets returned, so we can call the set() method again.

If you set the value of the same key multiple times, the last value wins.

Copied!
const map1 = new Map();

map1.set('name', 'alice');
map1.set('name', 'bobby');

console.log(map1); // 👉️ Map(1) { 'name' => 'bobby' }

console.log(map1.get('name')); // 👉️ bobby

The Map.get() method takes a key as a parameter and returns the corresponding value.

# Initialize a Map with values from another Map

You can also initialize a Map with values from another Map.

Copied!
const map1 = new Map();

map1.set('name', 'bobby hadz');
map1.set('country', 'Chile');
map1.set('age', 30);

const map2 = new Map(map1);

// 👇️ Map(3) { 'name' => 'bobby hadz', 'country' => 'Chile', 'age' => 30 }
console.log(map2);

console.log(map2.get('name')); // 👉️ bobby hadz
console.log(map2.get('country')); // 👉️ Chile

We created a Map object, added 3 key-value pairs to it and used it to initialize a new Map object.

You can directly pass one Map object to the Map() constructor to create another Map object.

# Additional Resources

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

• Increment a Value in an Object or a Map in JavaScript
• How to iterate through a Map object in JavaScript
• How to merge Maps in JavaScript or TypeScript
• How to sort a Map in JavaScript
• Get the Sum of all Values in a Map using JavaScript