How to Use TypeScript Loops to Execute Code Multiple Times?

In this tutorial, I will explain how to use loops in TypeScript to execute a block of code multiple times. Loops in any programming allow you to perform repetitive tasks efficiently. We will see different types of loops available in TypeScript, including for, for...of, for...in, and forEach loops with some examples.

for Loop in TypeScript

The for loop is one of the most commonly used loops in TypeScript. It allows you to execute a block of code a specified number of times. Here is the basic syntax of a for loop:

for (let i = 0; i < 10; i++) {
    // Code to be executed
}

Example: Iterating Over a List of Cities

Let’s say we want to print the names of the top 5 most populous cities in the USA. We can use a for loop to achieve this:

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

for (let i = 0; i < cities.length; i++) {
    console.log(cities[i]);
}

In this example, the loop runs from i = 0 to i < cities.length, printing each city name.

Here is the exact output in the screenshot below:

TypeScript Loops to Execute Code Multiple Times

Check out How to Use For Loop Range in TypeScript?

for…of Loop

The for...of loop in TypeScript is used to iterate over iterable objects like arrays, strings, maps, and sets. It is more concise and easier to read than a traditional for loop.

Example: Iterating Over an Array of States

Consider an array of US states:

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

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

This loop will print each state in the array.

Read How to Use for…in Loops in TypeScript?

for…in Loop

The for...in loop is used to iterate over the keys of an object. It is particularly useful when you need to access both the key and the value of an object.

Example: Iterating Over an Object of State Populations

Suppose we have an object that holds the population of different states:

const statePopulations: { [key: string]: number } = {
    California: 39538223,
    Texas: 29145505,
    Florida: 21538187,
    "New York": 20201249,
    Pennsylvania: 13002700
};
for (const state in statePopulations) {
    console.log(`${state}: ${statePopulations[state as keyof typeof statePopulations]}`);
}

This loop will print each state along with its population.

Here is the exact output in the screenshot below:

Use TypeScript Loops to Execute Code Multiple Times

Read How to Use for…of Loops in TypeScript?

forEach Method

The forEach method is a higher-order function available on arrays. It allows you to execute a function for each element in the array.

Example: Iterating Over an Array of National Parks

Let’s iterate over an array of famous national parks in the USA:

const nationalParks = ["Yellowstone", "Yosemite", "Grand Canyon", "Zion", "Rocky Mountain"];

nationalParks.forEach(park => {
    console.log(park);
});

This method provides a clean and readable way to iterate over array elements.

Conclusion

In this tutorial, we covered various ways to use loops in TypeScript to execute code multiple times. We discussed the for loop, for...of loop, for...in loop, and forEach method with some examples.

You may also like: