How to add a Key/Value pair to a Map in JavaScript

# Add a Key/Value pair to a Map object in JavaScript

Use the set() method to add a key-value pair to a Map, e.g. map.set('myKey', 'myValue').

The set() method adds or updates the element with the provided key and value and returns the Map object.

Copied!
const map1 = new Map();

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

// 👇️️ Map(2) { 'name' => 'bobby hadz', 'age' => 30 }
console.log(map1);
console.log(map1.get('name')); // 👉️ bobby hadz

We used the Map.set() method to add key-value pairs to a Map object.

The method takes 2 parameters:

1. the key of the element
2. the value of the element

If the key already exists in the Map object, its value is updated.

Copied!
const map1 = new Map();

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

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

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

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

We called the set() method with an existing key (name), so the value of the key got updated.

You can also pass an array of key-value pairs to the Map constructor to initialize the Map with values.

Copied!
const map1 = new Map([
  ['name', 'bobby hadz'],
  ['age', 30],
  ['country', 'Chile'],
  ['city', 'Santiago'],
]);

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

The Map() constructor can be called with an array of key-value pairs.

If you need to add the key-value pairs of an object to a Map, use the Object.entries() method.

Copied!
const obj = {
  name: 'bobby hadz',
  age: 30,
};

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

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

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

Copied!
const obj = {
  name: 'bobby hadz',
  age: 30,
};

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

# Chaining calls to the Map.set() method

The Map.set() method returns the Map object. This allows us to chain multiple calls to the set() method.

Copied!
const map1 = new Map();

map1
  .set('name', 'bobby hadz')
  .set('number', 5)
  .set('color', 'blue')
  .set('city', 'Santiago');

// Map(4) {
//   'name' => 'bobby hadz',
//   'number' => 5,
//   'color' => 'blue',
//   'city' => 'Santiago'
// }
console.log(map1);

On each call to the set() method, the Map object is returned, so we can chain multiple calls to the method.

# Conditionally adding key-value pairs to a Map object

You can add key-value pairs to a Map object conditionally by using the Map.has() method.

Copied!
const map1 = new Map();

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

if (!map1.has('name')) {
  map1.set('name', 'alice');
}

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

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

We used the Map.has() method to check if the name key is contained in the Map object before setting a value for the key.

The Map.has() method returns true if the specified key is contained in the Map and false otherwise.

# The keys and values of a Map can be of any type

Note that the keys and values of a Map can be of any type, e.g. an object.

Copied!
const map1 = new Map();
const obj = {country: 'Chile'};

map1.set(obj, {city: 'Santiago'});

// 👇️ { {country: 'Chile'} => {city: 'Santiago'} }
console.log(map1);

console.log(map1.get(obj)); // 👉️ {city: 'Santiago'}

The code sample uses an object as a key in the Map.

I've also written an article on how to add a key-value pair to an object.

# Additional Resources

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

• How to Add a Key/Value pair to an Object in JavaScript
• Add a Key/Value pair to all Objects in Array in JavaScript
• Check if all Object Properties are Null in JavaScript