A map in Typescript often comes with various key value pairs, including the boolean and string keys. The following article will discuss the best methods to iterate over a map in Typescript.

What Is A Typescript Map?

A map in Typescript is a newly introduced data structure in ES6. It allows users to store key-value pairs like other maps in different programming languages.

As the map comes in the form of a collection, it has a specific size and order. For this reason, you will need to iterate over its values and keys for easy data processing.

How To Iterate Over A Map

Method 1: Use The forEach() Method

The forEach() approach offers users a special function, which gets invoked for all value and key pairs in the Map. Here, the key, value, and Map object will get passed on each iteration to the function.

map.forEach(function(value, key) {

console.log(key + " = " + value);

})

//output

// one = first element

// two = second element

// 3 = third element

In this example, a generic is used to type the Map. Pass a string and its value, which can be a number or string. This function is called with three parameters: the current iteration’s value, its key, and the iterated Map object.

The forEach() method will return undefined. Using this approach preserves the map’s order with the inserted values. Thus, all the elements will remain the same original order after iteration.

Method 2: Use A for…of Loop

Without a shade of doubt, the loop enables users to iterate over such iterable objects like Sets, Maps, and arrays. To declare the value and key variables, destructuring assignment should be used:

for (let key of map.keys()) {

console.log(key);

}

// output

// one

// two

// 3

for (let value of map.values()){

console.log(value);

}

// output

// first element

// second element

// third element

for (let [key, value] of  map.entries()) {

console.log(key + " = " + value)

}

//output

// one = first element

// two = second element

// 3 = third element

If the break keyword needs to be called to exit this loop prematurely, you will surely appreciate the help of this for…of loop. It is worth noting that this function is not supported in the previous method.

This approach iterates over the own properties of an object only instead of dealing with inherited ones like the for…in loop. When employing the for…of loop, you can easily make the best use of three functions from the Map. 

They are map.values(), map.keys(), and map.entries(). All of them will return values in arrays, which are iterator objects. Besides those functions, you can employ an alternative approach. That is the spread operator, which is used to unpack the iterator object’s values into an array. 

const [key, value] = ['Tom', 'Germany'];

console.log(key); // 👉️ Tom

console.log(value); // 👉️ Germany

Summary

Overall, there are a wide range of approaches to iterate over a map in Typescript. Yet, using forEach() and for…of loop constructs is undoubtedly the easiest ones to follow.

Bear in mind that iteration over a map is in an insertion order. Check the post again to get a suitable method for your case.