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.

index.js

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

add key value pair to map object

The code for this article is available on GitHub

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

The method takes 2 parameters:

the key of the element
the value of the element

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

index.js

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.

index.js

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.

index.js

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.

index.js

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.

index.js

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);

chaining calls to map set

The code for this article is available on GitHub

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.

index.js

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'));

conditionally adding key value pairs to map object

The code for this article is available on GitHub

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.

index.js

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'}