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

avatar
Borislav Hadzhiev

Last updated: Jan 6, 2023
3 min

banner

# 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
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

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.

index.js
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
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
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
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
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

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

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
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 keys and values of map can be of any type

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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev