Do While Loop in JavaScript | Example Program

JavaScript 1.2 introduced a do while loop that is a variant form of while loop. This type of loop is exactly like an ordinary while loop, with only one difference.

The condition or expression evaluates at the end of loop rather than the beginning. This means that the body of loop always executes at least once.

The general syntax for do while loop in JavaScript is as:

// Initialization:
  do {
// Loop body;
  statement(s);
  Increment/decrement;
 } while (test conditional expression);

In this type of loop, the body of loop executes first and then evaluates conditional expression.

In the while loop statement, the test condition evaluates first before the loop body executes. If the condition is initially false, the body of loop will not execute at all.

However, sometimes, it might need to execute the statements in the loop body at least once before the test performs. We can handle such situations with the help of do-while loop in JavaScript.

The do-while loop always executes the statements in the body loop at least once before the expression evaluates because its test conditional expression is at the bottom of the loop.

The test condition inside do while statement must be a boolean expression that generates either true or false. We do not need to use curly braces if there is only one statement inside the do…while loop. In the above syntax, do and while are keywords.

Flowchart of Do while loop in JavaScript


The execution flowchart for the do-while loop in JavaScript is as shown in the below figure.

JavaScript Do while loop flowchart diagram

From the do-while loop flowchart, it is clear that the loop body executes first, and then the loop conditional expression evaluates to determine whether to continue or end the loop.

If the evaluation is true, the loop body executes again. This process continues until the test condition becomes false.

When the specified condition is false, the loop ended. The control of execution comes out of the do-while loop and goes to the next statement that appears immediately after the do-while statement.


Since the specified condition tests at the bottom of the loop, the do… while loop provides an exit-controlled loop.

Consider the following example.

<script>
 let count = 1;
 do {
   document.write("This is do while loop statement.");
   count++;
 }while(count > 2);
</script>

In this example, the statement in the loop will execute first. After that, the variable count will increment by 1. Then, JavaScript interpreter will test the boolean expression inside the while statement.

Since the expression will generate false after evaluation therefore, the statement in the loop will execute only once.

Example Program based on do while loop


1. Let us consider a simple example program where we will display numbers from 1 to 6 using do-while loop statement.

Program code 1:

<script>
  let x;
  x = 1; // starting number is 1.
  do {
    document.write(x, "<br>"); // print x value.
    x++; // increment x value by 1.
  } while(x <= 6); // This statement will execute as long as x <= 6.
</script>
Output:
     1
     2
     3
     4
     5
     6

a) In this example, the value of x is initially set to 1. Therefore, it displays 1.

b) Now, the expression x++ statement will increment the value of x by 1. As a result, the value of x becomes 2. The conditional boolean expression x<=10 tests by JavaScript interpreter.


c) Since this condition is true, the flow of execution will go back and the value of x, i.e. 2, will display on the browser.

d) Then, the value of x once again increment and becomes 3. Since 3 is also less than 10, the flow once again goes back and displays x value.

e) In this way, this process continues until the value of x is less than or equal to 6.

f) As the value of x is greater than 6, the condition will be false and the loop will terminate.


2. Let’s consider another example program based on do while statement where we will display the multiplication table.

Program code 2:

<script>
  let row, column;
  document.write("Multiplication Table:", "<br>");
  row = 1; // Initialization.
  do {
    column = 1;
    do {
       let x = row * column;
       document.write(x, " ");
       column = column + 1;
    }while(column <= 5);
    document.write("<br>");
    row = row + 1;
  } while(row <= 5);
</script>
Output:
     Multiplication Table:
     1 2 3 4 5
     2 4 6 8 10
     3 6 9 12 15
     4 8 12 16 20
     5 10 15 20 25

In this example program, do-while loop is in nested form and generates the above output.

Program code 3:

<script>
  let n = 1;
  do {
    document.write("This is a do while loop.");
    n++;
  }while(total > 3);
</script>
Output:
   This is a do while loop.

Difference between while loop and do-while loop in JavaScript


There are three main differences between while loop and do-while loop in JavaScript is as:

1. With a while loop, the first test condition is verified and then executes the statements inside the while block.

With a do-while loop, the first statements inside do block are executed and then the test condition is verified.

2. If the test condition is false for the first time, then the block of statement inside while loop will execute zero times.

If the test condition is false for the first time, then the block of statement will execute at least once time.

3. In the while syntax, while statement is at the top. Whereas, in the do-while syntax, while statement is at the bottom.


In this tutorial, you learned do while loop statement in JavaScript with example programs. Hope that you will have understood the basic concepts of do while loop statement.

In the next tutorial, we will learn for loop statement in JavaScript that is also a fundamental loop statement. We will discuss a variety of example programs.
Thanks for reading!!!
Next ⇒ For Loop in JavaScript⇐ PrevNext ⇒

Please share your love