The while loop executes the instructions each time the condition specified evaluates to true. In other words, the loop evaluates the condition before the block of code is executed. As a superset of JavaScript, TypeScript inherits and expands upon JavaScript’s features including different types of loops.

The while loop is an entry-controlled loop. In an entry-controlled loop, the condition is checked first and if the condition is true then the statements within the loop body are executed. While in an exit-controlled loop, the condition is checked after executing the loop body. The do…while loop is an example of the exit-controlled loop.

Syntax

The syntax of the while loop in TypeScript is as follows –

while(condition) { 
   // statements if the condition is true 
}

Flow Diagram

The flow diagram of the while loop looks as follows –

Here is a breakdown of the while loop”s behavior –

• Condition evaluation − the while loop evaluates the condition before each iteration.

• Execution − if the condition evaluates to true, the code block within the loop body is executed.

• Iteration − After code block execution is finished, the loop jumps back to the first step (condition evaluation) to check if another iteration is required.

Example: While loop

var num:number = 5; 
var factorial:number = 1; 

while(num >=1) { 
   factorial = factorial * num; 
   num--; 
} 
console.log("The factorial  is "+factorial);  

The above code snippet uses a while loop to calculate the factorial of the value in the variable num.

On compiling, it will generate the following JavaScript code −

var num = 5;
var factorial = 1;
while (num >= 1) {
   factorial = factorial * num;
   num--;
}
console.log("The factorial  is " + factorial);

It produces the following output −

The factorial is 120

While loop with a break statement

You can use a combination of an if statement and a break statement to terminate a while loop prematurely. The if statement checks a condition. If the condition evaluates to true, the break statement forces the while loop to exit, skipping any remaining code within the loop body.

Example

In the following example, the loop iterates until i reaches to 3. When the value of i becomes 3, the condition (i === 3) is true and break statement terminates the loop.

var i: number = 0;
while (i < 5) {
  if (i === 3) {
    break;
  }
  console.log(i);
  i++;
}

On compiling, it will generate the following JavaScript code.

var i = 0;
while (i < 5) {
    if (i === 3) {
        break;
    }
    console.log(i);
    i++;
}

The output of the above example code is as follows –

0
1
2

While loop vs. for loop

You should use a for loop when the number of iterations is fixed and known. When the number of iterations is not known, you should use the while loop.

We can convert a for loop to the while loop by omitting the first and last expression in the for loop.

Let’s take the example of the following for loop –

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

The output is as follows-

0
1
2
3
4

We can modify the above example code as follows –

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

It will also produce the same output as the above code –

0
1
2
3
4

In the above example, we omitted the first and third expressions in the for loop. It is similar to the while loop statement.

var i = 0
while(i < 5){
  console.log(i);
  i++;
}

It will also produce the same output as the above two examples.

0
1
2
3
4

Notice that a for loop without first and third expressions is similar to the while loop.