JavaScript - While Loops

Awhilestatement in JavaScript creates a loop that executes a block of code repeatedly, as long as the specified condition istrue. The condition is evaluated before the execution of the block of code.

While writing a program, you may encounter a situation where you need to perform an action over and over again. In such situations, you would need to write loop statements to reduce the number of lines.

JavaScript supports all the necessary loops to ease the pressure of programming. In this chapter, we will discuss the while loop.

There are 2 kinds of while loops in JavaScript, as given below.

• Entry-controlled loops− The loop checks whether the looping condition is valid first and enters into the body of the loop to execute the loop statements.
• Exit-controlled loops− The loop enters into the body and executes the loop statements without checking the condition. After completing the iteration, it checks the condition.

JavaScript while Loop

The most basic loop in JavaScript is thewhileloop which would be discussed in this chapter. The while loop is an entry-controlled loop.

The purpose of awhileloop is to execute a statement or code block repeatedly as long as anexpressionis true. Once the expression becomesfalse,the loop terminates.

Flow Chart

The flow chart ofwhile looplooks as follows −

Syntax

The syntax ofwhile loopin JavaScript is as follows −

while (expression) {
   Statement(s) to be executed if expression is true
}

Example

In the example below, we defined the ‘count’ variable and initialized it with 0. After that, we make iterations using the while loop until the value of the count is less than 10.

Output

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

JavaScript do…while Loop

Thedo…whileloop is similar to thewhileloop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition isfalse.

Flow Chart

The flow chart of ado-whileloop would be as follows −

Syntax

The syntax fordo-whileloop in JavaScript is as follows −

do {
   Statement(s) to be executed;
} while (expression);

Don’t miss the semicolon used at the end of thedo…whileloop.

Example

In the example below, we used thedo…whileloop and printed the results in the output until the value of the count variable is less than 5. In the output, we can observe that it always executes for once, even if the condition is false.

Output

Starting Loop
Current Count : 0 
Current Count : 1 
Current Count : 2 
Current Count : 3 
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript while vs. for Loops

The JavaScript while loop is similar to the for loop with the first and third expressions omitted. A for loop is generally used when the number of iteration is fixed and known but we use the while loop whne the number of iterations is not known.

Example

Let’s take an example of printing the first five natural numbers using for loop −

It will produce the following output −

First five natural numbers:
1
2
3
4
5

Example

We can now modify the above for loop as follows −

Output

First five natural numbers:

1
2
3
4
5

Example

In the above example, we have omitted first and third expression in for loop statement. This is similar to the while loop statement. Look at the below example −

Output

First five natural numbers:

1
2
3
4
5

You notice that the for loop without first expression (initialization) and third expression (iteration), is similar to the while loop.