Launch your career in tech, no matter your educational background. Pay after placement of 5,00,000/- or more, else learn at no cost.

Prepleaf

Masai 0NE

Starting your journey in tech, or looking to take the next step in your developer journey, if you are a working professional with an ambition, we will invest in your future.

design shift

MasaiX.

The while Loop in JavaScript repeats a code block as long as the given condition is true. JavaScript has another version of the while loop named do-while.


Masai Learn - While and Do-While Loop in JavaScript

%s - Masai Learn

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.\
\
![image3.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image3_511a64546d.png)\
\
Now let's understand how this program works with the help of a flowchart.\
\
![Frame 1038795.jpg](https://masai-website-images.s3.ap-south-1.amazonaws.com/Frame_1038795_1dbafb722b.jpg)




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.\
\
![image4.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image4_ccade32f8e.png)\
\
As you can see, we get the same output from 1 to 5.

![Do While Loop in Javascript](https://masai-website-images.s3.ap-south-1.amazonaws.com/Frame_1038797_baeb21fcd6.jpg)

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.

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.





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.\
\
![image5.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image5_802ef45f9b.png)\
\
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.



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.\
\
![image7.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image7_70fe2fefa7.png)

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.



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.\
\
![image1.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image1_c50998856d.png)

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.




