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

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

Answer

To add a key-value pair to a map in TypeScript, 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 TypeScript 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.

TypeScript Program

let myMap: Map<string, number> = 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 TypeScript 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.

TypeScript Program

let myMap: Map<string, number> = 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 TypeScript 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.

TypeScript Program

let myMap: Map<string, number> = 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 TypeScript language with well detailed examples.

◀ Previous Next ▶

TypeScript Tutorials

TypeScript How-Tos

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