How to Iterate over a Map in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 9, 2022

banner

Photo from Unsplash

Iterate over a Map in TypeScript #

Use the forEach() method to iterate over a Map in TypeScript. The forEach method takes a function that gets invoked for each key/value pair in the Map. The function gets passed the value, key and the Map object on each iteration.

index.ts
const map1 = new Map<string, string | number>([ ['name', 'Tom'], ['country', 'Germany'], ['age', 30], ]); // ✅ Using forEach map1.forEach((value, key) => { console.log(value, key); // 👉️ Tom name, Germany country, 30 age }); // ✅ Using for...of for (const [key, value] of map1) { console.log(key, value); // 👉️ name Tom, country Germany, age 30 } // ✅ Iterate over a Map's keys for (const key of map1.keys()) { console.log(key); // 👉️ name, country, age } // ✅ Iterate over a Map's values for (const value of map1.values()) { console.log(value); // 👉️ Tom, Germany, 30 }

Note that we used a generic to type the Map when declaring it. We set the Map's keys to have a type of string and its value to be of type string or number.

We ued the Map.forEach method to iterate over the key/value pairs in the Map.

The function we passed to the method gets called with the following 3 parameters:

  • the value of the current iteration
  • the key of the current iteration
  • the Map object that's being iterated

The forEach method returns undefined.

In our other examples, we used a for...of loop.

The loop allows us to iterate over iterable objects like Maps, Sets and arrays.

We used destructuring assignment when declaring the key and value variables.

index.ts
const [key, value] = ['Tom', 'Germany']; console.log(key); // 👉️ Tom console.log(value); // 👉️ Germany

The for...of loop might be your preferred approach if you have to use the break keyword to exit the loop prematurely. Using the break keyword is not supported in the forEach method.

The for...of loop iterates only over an object's own properties, as opposed to the for...in loop which also iterates over inherited properties.

In our 3rd and 4th examples, we used the Map.keys() and Map.values() methods to get iterable objects that contain the keys and values of the Map.

Note that the return values from the Map.keys() and Map.values() methods are arrays, they are iterator objects.

index.ts
const map1 = new Map<string, string | number>([ ['name', 'Tom'], ['country', 'Germany'], ['age', 30], ]); // 👇️ const keys: IterableIterator<string> const keys = map1.keys(); // 👇️ const values: IterableIterator<string | number> const values = map1.values();

If you want to convert the values to an array, e.g. to use the forEach method, you can use the Array.from method.

index.ts
const map1 = new Map<string, string | number>([ ['name', 'Tom'], ['country', 'Germany'], ['age', 30], ]); // 👇️ const keys: string[] const keys = Array.from(map1.keys()); // 👇️ const values: (string | number)[] const values = Array.from(map1.values());

An alternative approach is to use the spread operator (...) to unpack the values from the iterator object into an array.

index.ts
const map1 = new Map<string, string | number>([ ['name', 'Tom'], ['country', 'Germany'], ['age', 30], ]); // 👇️ const keys: string[] const keys = [...map1.keys()]; // 👇️ const values: (string | number)[] const values = [...map1.values()];

This last 2 examples achieve the same goal. They both convert the iterator objects into an array.

You can now use the forEach method to iterate over the arrays, as well as any other array built-in methods.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.