JS Loop While

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 0
The 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

BMW
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

BMW
Volvo
Saab
Ford

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420