JavaScript For Loop
Loops can execute a block of code a number of times.
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:
JavaScript For Loop
BMW Volvo Saab Ford Fiat Audi
Different Kinds of Loops
JavaScript supports different kinds of loops:
for - loops through a block of code a number of times
for/in - loops through the properties of an object
for/of - loops through the values of an iterable object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true
JavaScript While Loop
The While Loop
The while loop loops through a block of code as long as a specified condition is true.
Example:
<!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 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
Note : If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.
The Do While Loop
The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
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 < 5);
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
Note : Do not forget to increase the variable used in the condition, otherwise the loop will never end!
JavaScript Break and Continue
The Break Statement
You have already seen the break statement used in an earlier chapter of this tutorial. It was used to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p>A loop with a <b>break</b> statement.</p>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:
JavaScript Loops
A loop with a break statement.
The number is 0 The number is 1 The number is 2
The Continue Statement
The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p>A loop with a <b>continue</b> statement.</p>
<p>A loop which will skip the step where i = 3.</p>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 7; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output :
JavaScript Loops
A loop with a continue statement.
A loop which will skip the step where i = 3.
The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6
Comments