How to Iterate over a Map in TypeScript

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

Copied!
const map1 = new Map<string, string | number>([
  ['name', 'Bobby Hadz'],
  ['country', 'Germany'],
  ['age', 30],
]);

map1.forEach((value, key) => {
  // Bobby Hadz name
  // Germany country
  // 30 age
  console.log(value, key);
});

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 values to be of type string or number.

We used a union type when typing the values of the Map. Note that you have to include all of the possible types of values the Map object will store.

Copied!
const map1 = new Map<string, string | number | number[]>([
  ['name', 'Bobby Hadz'],
  ['country', 'Germany'],
  ['age', 30],
]);

// 👇️ add an array of numbers to the Map
map1.set('years', [2024, 2025, 2026]);

map1.forEach((value, key) => {
  // Bobby Hadz name
  // Germany country
  // 30 age
  // [ 2024, 2025, 2026 ] years
  console.log(value, key);
});

The code sample adds an array of numbers to the Map's values, so we had to include number[] in the possible types when declaring the Map object.

We used the Map.forEach method to iterate over the key-value pairs of the Map.

The function we passed to the method gets called with the following 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.

I've also written an article on how to iterate over an object with forEach() in TS.

# Iterate over a Map in TypeScript using for...of

You can also use a for...of loop to iterate over a Map object in TypeScript.

Copied!
const map1 = new Map<string, string | number>([
  ['name', 'Bobby Hadz'],
  ['country', 'Germany'],
  ['age', 30],
]);

for (const [key, value] of map1) {
  // name Bobby Hadz
  // country Germany
  // age 30
  console.log(key, value);
}

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

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

Copied!
const [key, value] = ['Bobby Hadz', 'Germany'];
console.log(key); // 👉️ Bobby Hadz
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.

# Iterate over a Map object's Keys or Values in TypeScript

You can use the Map.keys() and Map.values() methods to get iterable objects that contain the keys and values of the Map.

Copied!
const map1 = new Map<string, string | number>([
  ['name', 'Bobby Hadz'],
  ['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); // 👉️ Bobby Hadz, Germany, 30
}

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

Copied!
const map1 = new Map<string, string | number>([
  ['name', 'Bobby Hadz'],
  ['country', 'Germany'],
  ['age', 30],
]);

// 👇️ const keys: IterableIterator<string>
const keys = map1.keys();

// 👇️ const values: IterableIterator<string | number>
const values = map1.values();

# Converting the iterator objects to arrays

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

Copied!
const map1 = new Map<string, string | number>([
  ['name', 'Bobby Hadz'],
  ['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.

Copied!
const map1 = new Map<string, string | number>([
  ['name', 'Bobby Hadz'],
  ['country', 'Germany'],
  ['age', 30],
]);

// 👇️ const keys: string[]
const keys = [...map1.keys()];

// 👇️ const values: (string | number)[]
const values = [...map1.values()];

The last 2 examples achieve the same result. They both convert the iterator objects to an array.

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

I've also written an article on how to define a Map with Array values in TS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Iterate over Enums in TypeScript
• Iterate over an Array with Index in TypeScript
• Type 'IterableIterator' is not an array type or string type