While Loop in JavaScript

By Sudip Bhandari

Updated on : 14 Oct 2022

10 mins read

Published on : 14 Oct 2022

Introduction to While Loop

In the last article, we covered the working of loops and for loops in programming. Now, let's learn about another type of loop called the while loop.

A while loop is also used to repeat a block of code multiple times, just like the for loop.

Syntax of while Loop

while (check condition) {
    // code
}

Here, the while loop has a single expression, check condition. The opening and closing curly braces { } indicate the body of the while loop.

If the check condition expression is true, the code inside the curly braces is executed, and the condition is tested again. This process will repeatedly continue until the check condition is false.

And, if the check condition is false, the loop exists.

Let's now see one example of a while loop. In the example, we will print the number 5 times.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while Loop</title>
</head>

<body>
    <h1>while Loop</h1>

    <script>

        let i = 1;

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

    </script>

</body>
</html>

You can see we have used the while loop in the above code with the condition i <= 5. We have already initialized the value of i to 1 before the while loop. Also, we added the update statement, i++, inside the loop so that the value of i gets updated in each iteration.

Step by Step working of while Loop

For the first iteration, i is 1, so the test condition becomes true, and the body of the loop (print statement and update statement) is executed.
For the second iteration, i is 2, so the test condition becomes true again, and the loop's body is executed again.
This process continues for the 5 iterations, and for the sixth iteration, i becomes 6.
For the sixth iteration, the value of i becomes 6, so the test condition becomes false, and the while loop exists.
After running the code, your output will look something like this.

Now let's understand how this program works with the help of a flowchart.

Do While Loop

JavaScript has another variation of the while loop, called do while loop. The overall working of the do-while loop is similar to that of while with one key difference. The test condition of the do-while loop appears after the while loop.

Syntax of do while Loop

do {
    // code
} while (check condition);

From the above syntax, it's clear that the body of the do-while loop is executed first, and then the condition is checked.

Let's see one example of the do while loop.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while Loop</title>
</head>

<body>
    <h1>do while Loop</h1>

    <script>

        let i = 1;

        do {
            console.log(i);
            i++;
        } while (i <= 5);
        
    </script>

</body>
</html>

In the above code, we are rewriting the earlier code of printing numbers from 1 to 5 using the do while loop. As you can see, the body of the loop includes a print statement and an update statement, and the while condition checks if the value of i is less than or equal to 5.

Step by Step working of the do-while loop:

For the first iteration, the body of the do-while loop (print statement and update statement) is executed, and the test condition is checked. At this point, the value of i is 2, so the test condition is true.
For the second iteration, the loop's body is executed, which increases the value of i to 3. Again the test condition is true.
This process continues for 4 iterations until the value of i becomes 6 in the fifth iteration.
For the fifth iteration, the value of i becomes 6, so the test condition becomes false, and the do while loop exists.
After running the code, your output will look something like this.

As you can see, we get the same output from 1 to 5.

While Loop vs. Do While Loop

Let's compare the differences in the syntax of a while loop and a do-while loop.

While Loop

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

Do While Loop

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

From the example above, here're the major difference between these two loops:

The while loop executes the test condition first, and then the loop's body is executed; however, the do-while loop executes the loop's body first and then executes the test condition.
In a do-while loop, the body is executed even if the test condition is false because the condition is checked only after executing the first iteration. However, the body is never executed if the test condition is false in the while loop.
Now that we know the major difference between these two loops let's see when to use the do-while Loop over the while loop. Use the do while Loop if you are unsure about the test condition and want to run the Loop once, no matter the result of the test condition.

For Loop vs. While Loop

Let's compare the differences in the syntax of a for loop and a while loop.

For Loop

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

While Loop

let i = 1;

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

The above example shows the major differences between the for loop and the while loop.

The for loop includes the initialisation expression, condition expression, and update expression together inside itself; however, we have to provide the initialisation and update statement separately for the while loop.

If you clearly understand a loop's initial value and final value, use the for loop because it has clear syntax, and there is less chance of you forgetting the update expression and running into an infinite loop.

Infinite While Loop

Look at this code of the while loop.

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

We have included the update statement, i++, inside the loop. Let's see what happens if we remove this update statement from the loop.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while Loop</title>
</head>

<body>
    <h1>Infinite while Loop</h1>

    <script>

        let i = 1;

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

    </script>

</body>
</html>

After running the code, your output will look something like this.

Here, the loop will continue printing the value of i infinitely. This is an example of an infinite while loop.

Let's see what's happening here.

Initially, the value of i is 1, so the test condition i <= 5 becomes true. The while loop's body is executed, and the test condition is checked again.

Again the value of i is 1, so the test condition is true again, and the loop's body is executed.

Since there is no update inside the loop, the value of i will always remain 1, and the test condition is always true. This is why the loop will be executed infinitely, known as the infinite while loop.

While Loop With Break Statement

Similar to a for loop, we can also add a break statement inside the while loop to immediately exit a loop. Let's see an example,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while Loop</title>
</head>

<body>
    <h1>while Loop with break</h1>

    <script>

        let i = 1;

        while (i <= 10) {

            // break the loop i is 5
            if (i == 5) {
                break;
            }

            console.log(i);
            i++;
        }

    </script>

</body>
</html>

In the above code, we are using an if statement to check if the value of i is equal to 5, and we are executing the break statement if this condition is true.

After running the code, your output will look something like this.

In the code, we are creating the loop to run from 1 to 10; however, only values from 1 to 4 are printed. This happens because during the fifth iteration, the value of i becomes 5, and the if condition i == 5 will be true. Hence, the break statement is executed, which will terminate the loop.

While Loop With Continue Statement

Similarly, we can also use a continue statement inside a while loop. The continue statement will take the loop to the next iteration by skipping the current iteration. Let's see one example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while Loop</title>
</head>

<body>
    <h1>while Loop with continue</h1>

    <script>

        let i = 1;

        while (i <= 10) {

            i++;

            if (i == 5) {
                continue;
            }

            console.log(i)
        }

    </script>

</body>
</html>

In the above code, you can see we have changed the break statement to continue. Now when the value of i is 5, the continue statement will be executed.

After running the code, your output will look something like this.

From the output, you can see the value 5 is missing. This is because, during the fifth iteration, the value of i becomes 5, and the if condition i == 5 becomes true.

Hence, the continue statement is executed, which skips the current iteration, meaning that the print statement won't be executed for that iteration.

Also, you can see we have moved the update statement, i++, before the if condition because if we keep it after the condition, then when the continue statement is executed, it will skip the update statement as well. Hence, the value of i will never be 6.

Modules

Module 1

Module 2

Module 3

Module 4