Using TypeScript's for...of Loop

In TypeScript, the for...of loop provides a concise and convenient way to iterate over iterable objects. This powerful feature simplifies the process of iterating through arrays, strings, maps, sets, and other collection-like structures. In this article, we will explore the usage of the for...of loop and provide practical examples to demonstrate its capabilities.

Iterating Arrays

Let's start by looking at how the for...of loop can be used to iterate over an array. Consider the following example:

Copycopy code to clipboard
1const numbers = [1, 2, 3, 4, 5];
2
3for (const number of numbers) {
4  console.log(number);
5}

In the above snippet, we define an array called numbers containing several elements. The for...of loop allows us to iterate over each element in the array and log its value to the console. Running this code will output the numbers 1 through 5.

Iterating Strings

The for...of loop is not limited to arrays; it can also be used to iterate over strings. Take a look at the following example:

Copycopy code to clipboard
1const message = "Hello, World!";
2
3for (const char of message) {
4  console.log(char);
5}

In this case, we have a string variable message containing the phrase "Hello, World!". By using the for...of loop, we can iterate over each character in the string and print it to the console. The output will display each character of the message individually.

Iterating Maps and Sets

The for...of loop is particularly useful when working with maps and sets. When iterating over a map, both the key and value can be accessed within the loop. Let's see an example:

Copycopy code to clipboard
1const ages = new Map([
2  ["John", 30],
3  ["Alice", 25],
4  ["Bob", 35],
5]);
6
7for (const [name, age] of ages) {
8  console.log(`${name} is ${age} years old`);
9}

In this code snippet, we have a map called ages that associates names with their corresponding ages. By using the destructuring assignment [name, age], we can extract the key-value pairs from the map during iteration. This allows us to print the name and age of each person stored in the map.

Similarly, the for...of loop can be used with sets to iterate over unique values without any duplicates. The following example demonstrates this:

Copycopy code to clipboard
1const uniqueNumbers = new Set([1, 2, 3, 4, 5]);
2
3for (const number of uniqueNumbers) {
4  console.log(number);
5}

In this case, we define a set named uniqueNumbers containing distinct numeric values. The for...of loop enables us to iterate over these values, printing them one by one.

Custom Iterables

Apart from arrays, strings, maps, and sets, the for...of loop can also be used with custom objects implementing the iterable protocol. This allows you to define your own iteration logic. Here's an example:

Copycopy code to clipboard
1class Countdown {
2  constructor(private count: number) {}
3
4  *[Symbol.iterator]() {
5    while (this.count > 0) {
6      yield this.count;
7      this.count--;
8    }
9  }
10}
11
12const countdown = new Countdown(5);
13
14for (const number of countdown) {
15  console.log(number);
16}

In this code snippet, we create a Countdown class that implements the iterable protocol by defining a generator function with the [Symbol.iterator] key. This generator function yields values in reverse order until the count reaches zero. By using the for...of loop, we can iterate over the countdown object and print the numbers from 5 to 1.

In Closing

The for...of loop in TypeScript provides a concise and elegant way to iterate over iterable objects, including arrays, strings, maps, sets, and custom iterables. Its versatility allows for simpler and more readable code when performing iteration tasks. By leveraging the power of the for...of loop, you can enhance the efficiency and clarity of your TypeScript programs.