How to Add a Key-Value Pair to a Map in JavaScript - Step by Step Examples

How to Add a Key-Value Pair to a Map in JavaScript ?

Answer

To add a key-value pair to a map in JavaScript, you can use the set method.

✐ Examples

1 Adding a Key-Value Pair Using set Method

We can add a key-value pair to a map in JavaScript using the set method, which adds or updates an element with a specified key and value.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the set method to add a new key-value pair to the map. The set method takes two arguments: the key and the value to be added.
We print the updated map to the console using the forEach method and console.log.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Add a key-value pair using set method
myMap.set('four', 4);

// Print the updated map
myMap.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

Output

one: 1
two: 2
three: 3
four: 4

2 Adding Multiple Key-Value Pairs Using set Method

We can add multiple key-value pairs to a map in JavaScript using the set method.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the set method to add multiple new key-value pairs to the map. The set method takes two arguments: the key and the value to be added.
We print the updated map to the console using the forEach method and console.log.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Add multiple key-value pairs using set method
myMap.set('four', 4);
myMap.set('five', 5);

// Print the updated map
myMap.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

Output

one: 1
two: 2
three: 3
four: 4
five: 5

3 Updating an Existing Key-Value Pair Using set Method

We can update an existing key-value pair in a map in JavaScript using the set method, which updates the value of a specified key if it already exists.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the set method to update the value of an existing key in the map. The set method takes two arguments: the key and the new value to be assigned.
We print the updated map to the console using the forEach method and console.log.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Update an existing key-value pair using set method
myMap.set('two', 22);

// Print the updated map
myMap.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

Output

one: 1
two: 22
three: 3

Summary

In this tutorial, we learned How to Add a Key-Value Pair to a Map in JavaScript language with well detailed examples.

◀ Previous Next ▶

JavaScript Tutorials

JavaScript How-Tos

How to Add a Key-Value Pair to a Map in JavaScript - Step by Step Examples