How to Iterate Over Keys in a Map in TypeScript - Step by Step Examples

How to Iterate Over Keys in a Map in TypeScript ?

Answer

To iterate over keys in a map in TypeScript, you can use the keys method along with a for...of loop or the forEach method. This allows you to access each key in the map.

✐ Examples

1 Iterating Over Keys Using for...of Loop

We can iterate over keys in a map in TypeScript using a for...of loop with the keys method, which provides a convenient syntax for iterating over all keys in the map.

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 keys method to get an iterable of the keys in the map.
We iterate over the keys using a for...of loop, accessing each key directly from the iterable.
We print each key to the console using the console.log function to verify that we are iterating over all keys.

TypeScript Program

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

// Iterate over keys using for...of loop
for (const key of myMap.keys()) {
    console.log(key);
}

Output

one
two
three

2 Iterating Over Keys Using forEach Method

We can iterate over keys in a map in TypeScript using the forEach method, which provides a flexible way to access each key in the map.

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 forEach method to iterate over the key-value pairs in the map.
In the callback function passed to forEach, we access each key.
We print each key to the console using the console.log function to verify that we are iterating over all keys.

TypeScript Program

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

// Iterate over keys using forEach method
myMap.forEach((value, key) => {
    console.log(key);
});

Output

one
two
three

3 Storing and Iterating Over Keys Separately

We can store keys in a separate array and then iterate over the array in TypeScript, which provides a way to work with keys independently of their values.

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 declare an array named keys to store the keys from the map.
We use the keys method to get an iterable of the keys in the map and spread it into the keys array using the spread operator.
We use a for loop to iterate over the keys array and print each key to the console using the console.log function to verify that we have stored all keys separately.

TypeScript Program

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

// Store keys in a separate array
const keys = [...myMap.keys()];

// Iterate over the keys array
for (const key of keys) {
    console.log(key);
}

Output

one
two
three

Summary

In this tutorial, we learned How to Iterate Over Keys in a Map in TypeScript language with well detailed examples.

◀ Previous Next ▶