Categories
28°C, New York
Home Typescript How to use for…of Loop In Typescript

How to use for…of Loop In Typescript

Using forEach() method

Using entries() method

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

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.

Table of Content

  • Using forEach() method
  • Using for…of Loop
  • Using entries() method
  • Using Array.from() with map.entries()

Similar Reads

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

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

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

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

Tags:
#JavaScript #TypeScript #Web Technologies

Using forEach() method

Using entries() method