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.
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.
<!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.
<!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.
<!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