How to Use For Loop Range in TypeScript?

As an advanced TypeScript developer, you should know how to use for loop range in TypeScript. In this tutorial, I will explain how to use for loop range in TypeScript with some real examples.

For Loop in TypeScript

Before understanding the for loop range in TypeScript, you should understand what is a for loop in TypeScript.

A for loop is a control flow statement that allows code to be executed repeatedly based on a given condition. It is particularly useful when you need to iterate over a sequence of numbers or elements in an array in TypeScript.

The basic syntax for a for loop in TypeScript is as follows:

for (let i = 0; i < 10; i++) {
    console.log(i);
}

This loop will print numbers from 0 to 9. Let’s break down the components:

  • let i = 0: Initializes the loop with a variable i set to 0.
  • i < 10: Sets the condition for the loop to run as long as i is less than 10.
  • i++: Increments the variable i by 1 after each iteration.

Read Break Statement in TypeScript For Loops

For Loop Range in TypeScript

Now, let me show you how to work with for loop range in TypeScript with some examples.

Iterate Over a Range

To iterate over a specific range of numbers, you can easily adjust the initialization, condition, and increment expressions. For example, to iterate from 1 to 5:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

This loop will print numbers from 1 to 5.

Using For Loop with Arrays

For loops are often used to iterate over arrays. Here’s an example using an array of city names in the USA:

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

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

This loop will print each city name in the array.

Using For…of Loop

TypeScript also provides the for...of loop, which is a more concise way to iterate over iterable objects like arrays. Here’s how you can use it:

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

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

This loop will print each state name in the array.

Read Continue Statement in TypeScript For Loops

Create a Range Function

If you often need to iterate over a range of numbers, creating a utility function can be very helpful. Here’s an example of a simple range function in TypeScript:

function range(start: number, end: number): number[] {
    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

const numbers = range(1, 10);

for (const num of numbers) {
    console.log(num);
}

This function creates an array of numbers from start to end. The loop then iterates over this array and prints each number.

Here is the exact output in the screenshot below:

For Loop Range in TypeScript

For Loop Range in TypeScript Example: Generate a List of Years

Let’s consider a practical example where you need to generate a list of years from 2000 to 2024:

const startYear = 2000;
const endYear = 2024;

for (let year = startYear; year <= endYear; year++) {
    console.log(year);
}

This loop will print each year from 2000 to 2024, which can be useful for applications that require date ranges.

Conclusion

I explained how to use For Loop Range in TypeScript in this tutorial with some examples.

You may also like: