JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript While Loop
The While Loop
The while loop loops through the code as long as the defined condition is true.
Syntax
while (condition) {
// code block to be executed
}
Example
In the following example, the code in the loop runs, over and over again, as long as a variable (i) is less than 10:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id=”demo”></p>
<script>
let text = “”;
let i = 0;
while (i < 10) {
text += “<br>The number is ” + i;
i++;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript While Loop
The Do While Loop
The do-while loop is a variant of the while loop. This loop executes the code block once, before checking if the condition is true, then repeats the loop as long as the condition is true.
Syntax
do {
// code block to be executed
}
while (condition);
The example below illustrates the use of do-while loop. The loop will always be executed at least once, even if the condition is false because the code block is executed before the condition is tested:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Do While Loop</h2>
<p id=”demo”></p>
<script>
let text = “”
let i = 0;
do {
text += “<br>The number is ” + i;
i++;
}
while (i < 10);
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Do While Loop
The number is 0The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
Comparing For and While
The loop in this example uses a for loop to collect the car names through the cars array:
Example
<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
const cars = [“BMW”, “Volvo”, “Saab”, “Ford”];
let i = 0;
let text = “”;
for (;cars[i];) {
text += cars[i] + “<br>”;
i++;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
Volvo
Saab
Ford
The loop in this example uses a while loop to collect the car names from the cars array:
Example
<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
const cars = [“BMW”, “Volvo”, “Saab”, “Ford”];
let i = 0;
let text = “”;
while (cars[i]) {
text += cars[i] + “<br>”;
i++;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
Volvo
Saab
Ford