Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript While Loop

  • Last Updated : 15 Nov, 2021

A While Loop in Javascript is a control flow statement that allows the code to be executed repeatedly based on the given boolean condition. The while loop can be thought of as a repeating if statement.

The loop can be used to execute the specific block of code multiple times until it failed to match the condition.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

There are mainly two types of loops:

  • Entry Controlled loops: In this type of loop, the test condition is tested before entering the loop body. For Loop and While Loop are entry-controlled loops.
  • Exit Controlled Loops: In this type of loop the test condition is tested or evaluated at the end of the loop body. Therefore, the loop body will execute at least once, irrespective of whether the test condition is true or false. the do-while loop is exit controlled loop.

Syntax:



while (condition) {
    // Statements
}

Example: This example illustrates the use of a while loop.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>JavaScript While loop</title>
</head>
 
<body style="text-align:center;">
    <div>
        <h1>GeeksForGeeks</h1>
        <h2>JavaScript While Loop</h2>
    </div>
    <p id="GFG"></p>
 
     
    <!-- Script to use while loop -->
    <script>
    var print = "";
    var val = 1;
    while(val < 6) {
        print += "Geeks " + val;
        print += "<br>"
        val += 1;
    }
    document.getElementById("GFG").innerHTML = print;
    </script>
</body>
 
</html>

Output:

while loop

Do-While loop: A do-while loop is a control flow statement that executes a block of code at least once, and then repeatedly executes the block or not depending on a given boolean condition at the end of the block.

Syntax:

do {
    // Statements
}
while (condition);

Example: This example illustrates the use of the do-while loop.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>JavaScript While loop</title>
</head>
 
<body style="text-align:center;">
    <div>
        <h1>GeeksforGeeks</h1>
        <h2>JavaScript Do-while Loop</h2> </div>
    <p id="GFG"></p>
 
     
    <!-- Script to use do-while loop -->
    <script>
    var print = ""
    var val = 0;
    do {
        print += "Geeks " + val;
        print += "<br>";
        val += 1;
    }
    while (val < 6);
    document.getElementById("GFG").innerHTML = print;
    </script>
</body>
 
</html>

Output:

Do-while Loop

Comparison between while and do-while loop: The do-while loop executes the content of the loop once before checking the condition of the while loop. While the while loop will check the condition first before executing the content.

While Loop



Do-While Loop

It is an entry condition looping structure.

It is an exit condition looping structure.

The number of iterations depends on the condition mentioned in the while block.

Irrespective of the condition mentioned in the do-while block, there will a minimum of 1 iteration.

The block control condition is available at the starting point of the loop.

The block control condition is available at the endpoint of the loop.

Example: This example illustrates both while and do-while loops.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>JavaScript loop</title>
</head>
 
<body style="text-align:center;">
    <div>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>JavaScript Loop</h2> </div>
    <h3>While Loop</h3>
    <p id="GFG"></p>
 
     
    <!-- Script to use while loop -->
    <script>
    var text = "";
    var i = 1;
    while(i < 6) {
        text += "Geeks " + i + "<br>";
        i++;
    }
    document.getElementById("GFG").innerHTML = text;
    </script>
    <h3>Do While Loop</h3>
    <p id="GFG1"></p>
 
    <!-- Script to use do-while loop -->
    <script>
    var text = ""
    var i = 1;
    do {
        text += "Geeks " + i + "<br>";
        i++;
    }
    while (i < 6);
    document.getElementById("GFG1").innerHTML = text;
    </script>
</body>
 
</html>

Output:

Javascript Loop




My Personal Notes arrow_drop_up
Recommended Articles
Page :