How to Iterate over Map Elements in TypeScript ?

In TypeScript, iterating over the Map elements means accessing and traversing over the key-value pairs of the Map Data Structure. The Map is nothing but the iterative interface in TypeScript. We can iterate over the Map elements in TypeScript using various approaches that include inbuilt methods and simple looping.

Using forEach() method

The forEach() method is used on Map in TypeScript to iterate through the key-value pairs and executes the callback function for each element with the arguments as the value, key. This order of iteration is based on the insertion order of the elements.

Syntax:

map.forEach((value: V, key: K, map: Map<K, V>) => {
    // code
});

Example: The below code uses the forEach() method to iterate over Map elements in TypeScript.

Javascript

let geeksMap = new Map<string, string>();
geeksMap.set("DSA","Data Structures and Alogrithms")
geeksMap.set("CP", "Competitive Programming");
geeksMap.set("AI", "Artificial Intelligence");
geeksMap.forEach((value,key) =>{
    console.log(`Key: ${key}, Value: ${value}`);
})

Output:

Key: DSA, Value: Data Structures and Algorithms
Key: CP, Value: Competitive Programming
Key: AI, Value: Artificial Intelligence

Using for...of Loop

The for...of loop in TypeScript iterates through the key-value pairs of the Map, and automatically deconstructs each entry into the key and value components.

Syntax:

for (let [key, value] of map) {
    // code
}

Example: The below example uses for...of Loop to iterate over Map elements in TypeScript.

Javascript

let geeksMap = new Map<string, string>();
geeksMap.set("DSA", "Data Structures and Algorithms");
geeksMap.set("CP", "Competitive Programming");
geeksMap.set("AI", "Artificial Intelligence");
for (let [key, value] of geeksMap) {
    console.log(`Key: ${key}, Value: ${value}`);
}

Output:

Key: DSA, Value: Data Structures and Algorithms
Key: CP, Value: Competitive Programming
Key: AI, Value: Artificial Intelligence

Using entries() method

The entries() method in TypeScript iterates over the key-value pairs which returns the iterator object that creates the key, and value array of each element in the Map. This returned iterator is then used in the for...of loop to iterate over the Map entries.

Syntax:

let iterator: IterableIterator<[K, V]> = map.entries();

Example: The below uses the entries() method to iterate over Map elements in TypeScript.

Javascript

let geeksMap = new Map<string, string>();
geeksMap.set("DSA", "Data Structures and Algorithms");
geeksMap.set("CP", "Competitive Programming");
geeksMap.set("AI", "Artificial Intelligence");
for (let [key, value] of geeksMap.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
}

Output:

Key: DSA, Value: Data Structures and Algorithms
Key: CP, Value: Competitive Programming
Key: AI, Value: Artificial Intelligence

Using Array.from() with map.entries()

The combination of Array.from() with map.entries() provides a convenient way to iterate over the key-value pairs of a Map in TypeScript. This approach converts the Map's entries into an array of key-value pairs, which can then be iterated over using array iteration methods.

Syntax:

Array.from(map.entries()).forEach(([key, value]: [K, V]) => {
    // code
});

Example: Below is the implementation of the above-discussed approach.

JavaScript

let geeksMap = new Map<string, string>();
geeksMap.set("DSA", "Data Structures and Algorithms");
geeksMap.set("CP", "Competitive Programming");
geeksMap.set("AI", "Artificial Intelligence");

Array.from(geeksMap.entries()).forEach(([key, value]: [string, string]) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

Output:

Key: DSA, Value: Data Structures and Algorithms
Key: CP, Value: Competitive Programming 
Key: AI, Value: Artificial Intelligence