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.
The break
statement breaks the loop and continues executing the code after the loop (if any):
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
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.
This example skips the value of 3:
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
JavaScript Labels
To label JavaScript statements you precede the statements with a label name and a colon:
label:
statements
The break
and the continue
statements are the only JavaScript statements that can "jump out of" a code block.
Syntax:
break labelname;
continue labelname;
The continue
statement (with or without a label reference) can only be used to skip one loop iteration.
The break
statement, without a label reference, can only be used to jump out of a loop or a switch.
With a label reference, the break statement can be used to jump out of any code block:
<script>
var lang = ["JavaScript", "PHP", "Web", "Python"];
var text = "";
list: {
text += lang[0] + "<br>";
text += lang[1] + "<br>";
break list;
text += lang[2] + "<br>";
text += lang[3] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
Complete code of Break And Continue Statements In JavaScript
<!DOCTYPE html>
<html>
<head>
<title> Break and Continue Statements In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h3{
color:red;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1> Break and Continue Statements In JavaScript</h1>
</div>
<br>
<div class="well">
<div id="demo"></div>
</div>
</div>
</body>
</html>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>