How to Use for…of Loops in TypeScript?

As a TypeScript developer, you should know how to use different loops. In this tutorial, I will explain how to use for...of loops in TypeScript. We will cover the syntax, benefits, and practical examples to help you understand and implement for…of loop in TypeScript.

What is a for…of Loop in TypeScript?

The for...of loop is a modern iteration statement introduced in ECMAScript 2015 (ES6). It allows you to iterate over iterable objects like arrays, strings, maps, sets, and more. Unlike the traditional for loop, which uses an index to access elements, the for...of loop directly accesses the values of the iterable.

Why Use for…of Loops in TypeScript?

Using for...of loops in TypeScript offers several advantages:

  1. Readability: The syntax is clean and easy to understand.
  2. Simplicity: Directly accesses values without needing to manage an index.
  3. Versatility: Works with various iterable objects.

Syntax of for…of Loop

The basic syntax of a for...of loop in TypeScript is:

for (const element of iterable) {
    // code block to be executed
}

Here, element represents the current value from the iterable object during each iteration.

Check out How to Use the For Loop in TypeScript?

Examples of for…of Loops in TypeScript

Let me now show you some practical examples to understand how for...of loops work in TypeScript.

Iterate Over an Array

Now, let me show you first how to iterate over an array using for…of loop in TypeScript.

In this example, I have an array of popular cities in the USA, and we can use the loop like the one below:

const cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];

for (const city of cities) {
    console.log(city);
}

In this example, the for...of loop iterates over the cities array and prints each city name to the console.

Here is the exact output in the screenshot below:

for…of Loop in TypeScript

Read How to Use for…in Loops in TypeScript?

Iterate Over a String

You can also use for...of loops to iterate over the characters of a string in TypeScript. Here is an example.

const state = "California";

for (const char of state) {
    console.log(char);
}

This loop will print each character of the string “California” to the console.

Here is the exact output in the screenshot below:

for…of Loop in TypeScript examples

Iterate Over a Map

Maps are another iterable object that can be used with for...of loops in TypeScript. Here’s an example with a map of state capitals:

const stateCapitals = new Map([
    ["California", "Sacramento"],
    ["Texas", "Austin"],
    ["Florida", "Tallahassee"]
]);

for (const [state, capital] of stateCapitals) {
    console.log(`${state}: ${capital}`);
}

In this example, the for...of loop iterates over the stateCapitals map and prints each state and its capital.

Iterate Over a Set

Sets are also iterable, making them compatible with for...of loops. Here’s an example with a set of unique ZIP codes:

const zipCodes = new Set([90210, 10001, 60601, 77001, 85001]);

for (const zip of zipCodes) {
    console.log(zip);
}

This loop will print each unique ZIP code in the set.

Check out How to Use the TypeScript forEach Loop with Index?

For…Of Loop with Index in Python

The for...of loop in TypeScript is used to iterate over arrays and other iterable objects. However, it doesn’t include an index variable by default. To get the index with for...of, we can use the entries() method like this:

const states = ['California', 'Texas', 'Florida', 'New York'];

for (const [index, state] of states.entries()) {
  console.log(`Index ${index}: ${state}`);
}

Output:

Index 0: California
Index 1: Texas
Index 2: Florida
Index 3: New York 

The entries() method returns an iterator that provides both the index and value for each element. We use array destructuring to assign the index and value to separate variables in the loop.

Conclusion

The for...of loop in TypeScript is used for iterating over arrays, strings, maps, sets, and other iterable objects. In this tutorial, I explained how to use the for…of loop in TypeScript with a few examples.