TypeScript Loops

Loop statements are used to repeatedly execute a block of code until a specific exit condition is met. TypeScript supports multiple loop structures, the same as loops in JavaScript.

1. for Loop

The for loop is the most commonly used and flexible loop type. It consists of three parts: initialization, condition, and increment/decrement expression.

Syntax

for (initialization; condition; increment/decrement) {
    // Loop body code
}

• initialization: Executed once before the loop starts, typically used to initialize a counter variable.
• condition: Evaluated before each loop iteration begins. If true, the loop body executes. If false, the loop terminates.
• increment/decrement: Executed after each loop iteration ends, typically used to update the counter.

Example

for (let i: number = 0; i < 5; i++) {
    console.log(`Iteration ${i + 1}`);
}
// Output:
// Iteration 1
// Iteration 2
// Iteration 3
// Iteration 4
// Iteration 5

2. while Loop

The while loop continues to execute a code block while the specified condition is true.

Syntax

while (condition) {
    // Loop body code
}

The condition is checked before each loop iteration begins. If the condition is false from the start, the loop body will never execute.

Example

let count: number = 0;

while (count < 3) {
    console.log(`Count is ${count}`);
    count++;
}
// Output:
// Count is 0
// Count is 1
// Count is 2

3. do...while Loop

The do...while loop is similar to the while loop, but it guarantees the loop body executes at least once because the condition is checked after the loop body executes.

Syntax

do {
    // Loop body code
} while (condition);

Example

let num: number = 5;

do {
    console.log(`Number is ${num}`);
    num++;
} while (num < 5);
// Output:
// Number is 5

4. for...of Loop

The for...of loop (introduced in ES6) is used to iterate over element values of iterable objects (like arrays, strings, Map, Set, etc.).

Syntax

for (let element of iterable) {
    // Code to execute for each element
}

Example

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

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

let message: string = "hello";

for (let char of message) {
    console.log(char);
}
// Output:
// h
// e
// l
// l
// o

5. for...in Loop

The for...in loop is used to iterate over all enumerable property keys of an object.

Syntax

for (let key in object) {
    // Code to execute for each key
}

Example

let person = {
    name: "John",
    age: 30,
    city: "New York"
};

for (let key in person) {
    // Check if property belongs to the object itself, not inherited
    if (person.hasOwnProperty(key)) {
        console.log(`${key}: ${person[key]}`);
    }
}
// Output:
// name: John
// age: 30
// city: New York

Note: for...in should not be used to iterate over arrays because it may iterate over indexes in unexpected order and may include non-numeric keys. For array iteration, prefer for, for...of, or array methods (like forEach).

Loop Control Statements

• break: Immediately terminates the current loop.
• continue: Skips the current iteration of the loop and begins the next iteration.

Example

// break example
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // Exit loop when i equals 5
    }
    console.log(i);
} // Output: 0, 1, 2, 3, 4

// continue example
for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // Skip this iteration when i equals 2
    }
    console.log(i);
} // Output: 0, 1, 3, 4