TypeScript for Loop

Introduction

In this chapter, we will explore the for loop in TypeScript. The for loop is a control flow statement that allows you to execute a block of code a specific number of times. Understanding how to use the for loop is essential for iterating over arrays, executing repetitive tasks, and managing loop conditions in TypeScript programs.

Table of Contents

• Definition
• For Loop Syntax
• Basic For Loop
• For-Of Loop
• For-In Loop
• Nested For Loop
• Complete Example with Output
• Conclusion

Definition

The for loop is used to repeat a block of code a specified number of times. It consists of three parts: initialization, condition, and increment/decrement. Each part is executed at different stages of the loop.

For Loop Syntax

Syntax

for (initialization; condition; increment) {
  // code to be executed
}

Example

This example demonstrates a basic for loop that prints numbers from 0 to 4.

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

Output

0
1
2
3
4

Basic For Loop

The basic for loop allows you to initialize a variable, set a condition for the loop to run, and update the variable after each iteration.

Example

This example prints the first five even numbers.

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

Output

0
2
4
6
8

For-Of Loop

The for-of loop iterates over the values of an iterable object, such as an array or a string.

Example

This example iterates over the elements of an array and prints each one.

let colors: string[] = ["red", "green", "blue"];

for (let color of colors) {
  console.log(color);
}

Output

red
green
blue

For-In Loop

The for-in loop iterates over the enumerable properties of an object or array. It returns the keys or property names.

Example

This example iterates over the properties of an object and prints each key and value.

let person = {
  name: "Ramesh",
  age: 25,
  city: "Mumbai"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

Output

name: Ramesh
age: 25
city: Mumbai

Nested For Loop

A nested for loop is a for loop inside another for loop. It allows you to perform more complex iterations.

Example

This example prints a multiplication table for numbers 1 through 3.

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} * ${j} = ${i * j}`);
  }
}

Output

1 * 1 = 1
1 * 2 = 2
1 * 3 = 3
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9

Complete Example with Output

In this section, we will combine all the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground:

// Basic For Loop
for (let i = 0; i < 5; i++) {
  console.log(i); // Output: 0, 1, 2, 3, 4
}

// For-Of Loop
let colors: string[] = ["red", "green", "blue"];

for (let color of colors) {
  console.log(color); // Output: red, green, blue
}

// For-In Loop
let person = {
  name: "Ramesh",
  age: 25,
  city: "Mumbai"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`); // Output: name: Ramesh, age: 25, city: Mumbai
}

// Nested For Loop
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} * ${j} = ${i * j}`); // Output: 1 * 1 = 1, 1 * 2 = 2, ... , 3 * 3 = 9
  }
}

Conclusion

In this chapter, we covered the for loop in TypeScript, including the basic for loop, for-of loop, for-in loop, and nested for loop. We provided a complete example with its output to illustrate how these loops work in TypeScript. Understanding the for loop is essential for iterating over arrays, executing repetitive tasks, and managing loop conditions in TypeScript programs.