TypeScript while and do…while Loop

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

TypeScript while Loop

The while loop repeatedly executes a block of code as long as the specified condition is true.

The syntax of the while loop is:

while (condition) {
    // Body of loop
}

Here,

1. The while loop first evaluates the condition inside ( ).
2. If condition evaluates to true, the code inside { } is executed.
3. Then, condition is evaluated again.
4. This process continues as long as condition evaluates to true.
5. If condition evaluates to false, the loop stops.

Flowchart of while Loop

Example 1: Display Numbers From 1 to 3

// Initialize variable i
let i: number = 1;

// Loop runs until i is less than 4
while (i < 4) {
    console.log(i);

    // Increase value of i by 1
    i += 1;
}

Output

1
2
3

Here is how the program works in each iteration of the loop:

To learn more about loop conditions, visit TypeScript Comparison and Logical Operators.

Example 2: Sum of Only Positive Numbers

let inputNumber: number = 0;
let sum: number = 0;

// Create a variable to take user input
// The variable can be either string or null 
let userInput: string | null;

// Loop as long as inputNumber is not negative
while (inputNumber >= 0) {

    // Add all positive numbers
    sum += inputNumber;

    // Take input from the user
    // prompt() returns either string or null
    userInput = prompt("Enter a number: ");

    // Convert userInput to number
    inputNumber = Number(userInput);
}

// Display the sum outside the loop
console.log(`The sum is ${sum}`);

Output

Enter a number: 2
Enter a number: 4
Enter a number: -3
The sum is 6

The above program prompts the user to enter a number.

Since TypeScript prompt() only takes inputs as string, we use the Number() function to convert the input into a number.

Note: prompt() returns null if the user doesn't give any input (by pressing the Cancel button). In our program, pressing Cancel will simply trigger another prompt because of the while loop.

As long as we enter positive numbers, the while loop adds them up and prompts us to enter more numbers.

So when we enter a negative number, the loop terminates.

Finally, we display the total sum of positive numbers outside the loop.

Note: When we add two or more numeric strings, TypeScript treats them as strings. For example, "2" + "3" = "23". So, we should always convert numeric strings to numbers to avoid unexpected behaviors.

TypeScript do...while Loop

The do...while loop executes a block of code once, then repeatedly executes it as long as the specified condition is true.

The syntax of the do...while loop is:

do {
    // Body of loop
} while(condition);

Here,

1. The do…while loop executes the code inside { }.
2. Then, it evaluates the condition inside ( ).
3. If condition evaluates to true, the code inside { } is executed again.
4. This process continues as long as condition evaluates to true.
5. If condition evaluates to false, the loop terminates.

Flowchart of do...while Loop

Example 3: Display Numbers from 3 to 1

let i: number = 3;

// Loop body is executed first
// Then, loop continues as long as i is positive
do {
    console.log(i);

    // Decrement value of i by 1
    i--;
} while (i > 0);

Output

3
2
1

Here, the initial value of i is 3. Then, we used a do...while loop to iterate over the values of i. Here's how the loop works in each iteration:

let i: number = 5;

// False condition
// Body executes once
do {
    console.log(i);
} while (i > 10);

// Output: 5

let i: number = 5;

// False condition
// Body not executed
while (i > 10) {
    console.log(i);
};

Example 4: Sum of Positive Numbers

let inputNumber: number = 0;
let sum: number = 0;

// Create a variable to take user input
// The variable can be either string or null 
let userInput: string | null;

do {

    // Add all positive numbers
    sum += inputNumber;

    // Take input from the user
    userInput = prompt("Enter a number: ");

    // Convert userInput to number
    inputNumber = Number(userInput);

    // Loop terminates if inputNumber is negative
} while (inputNumber >= 0);

// Finally, display the sum
console.log(`The sum is ${sum}`);

Output

Enter a number: 2
Enter a number: 4
Enter a number: -3
The sum is 6

In the above program, the do...while loop prompts the user to enter a number.

As long as we enter positive numbers, the loop adds them up and prompts us to enter more numbers.

If we enter a negative number, the loop terminates without adding the negative number.

let i: number = 1;

// Condition is always true
while(i < 5) {
    console.log(i);
}

let i: number = 1;

// Condition is always true
do {
    console.log(i);
} while (i < 5);

// Display "hi" 3 times

for (let i: number = 1; i <= 3; i++) {
    console.log("hi");
}

console.log("bye");

hi
hi
hi
bye

// Boolean variable to use as condition
let isDisplay: boolean = true;

// Variable to take user input from prompt()
// Can be either string or null
let userChoice: string | null;

// Display "hi" as long as user wants
// Basically, run the loop as long as isDisplay is true
while (isDisplay) {

    console.log("hi");

    // Get user input
    userChoice = prompt("print hi again? y for yes: ");

    // Set isDisplay to false if userChoice is not "y" or if it's null
    if (userChoice != "y" || userChoice === null)
        isDisplay = false;
}

console.log("bye");

hi
print hi again? y for yes: y
hi
print hi again? y for yes: y
hi
print hi again? y for yes: n
bye

Also Read:

• TypeScript break Statement
• TypeScript continue Statement