Hello everyone! morning and welcome to my new tutorial post on JavaScript. Hope you are not having any difficulties in practicing? If any of you guys are having difficulties, always feel free to ask your questions via the comment box. We will surely attend to your questions.
Now in my last tutorial post i talked about JavaScript for....in loop, but in this tutorial we are going to be looking into a way in which our loop can be controlled. This can be achieved by using the break and continue statements.
JavaScript provides full control to handle loop and switch statements. There may be a situation where you need to break out of a loop without reaching it's bottom. There may also be a situation when you want to skip a part of your code block and start the next iteration of the loop.
To handle all the situations, JavaScript provides break and continue statements.
These statements are used to immediately come out of any loop or to start the next iteration of any loop respectively.
These statements are used to immediately come out of any loop or to start the next iteration of any loop respectively.
The break Statement
The break statement, which was briefly introduced with the switch statement, is used to exit a loop early, breaking out of the enclosing curly braces.
Flow Chart
The flow chart of a break statement would look as follows:
Example
The following example illustrates the use of a break statement with a while loop. Notice how the loop breaks out early once x reaches 6 and reaches to document.write(..) statement just below to the closing curly brace:
You can also check out our tutorial post on: JavaScript For Loop
<html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br />");
while (x < 25) {
if (x == 6) {
break; // breaks out of loop completely
}
x = x + 1;
document.write(x + "<br />");
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br />");
while (x < 25) {
if (x == 6) {
break; // breaks out of loop completely
}
x = x + 1;
document.write(x + "<br />");
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
The above example will give you the output below:
Entering the loop
2
3
4
5
6
Exiting the loop!
2
3
4
5
6
Exiting the loop!
We have already seen the usage of break statement inside a switch statement.
The continue Statement
The continue statements tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block.
When the continue statement is encountered, the program flow moves to the loop check expression immidiately and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.
When the continue statement is encountered, the program flow moves to the loop check expression immidiately and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.
Example
The example below illustrates the use of a continue statement with a while loop.
Notice how the continue statement is used to skip the printing when the value held in variable x reaches 6:
Notice how the continue statement is used to skip the printing when the value held in variable x reaches 6:
<html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br />");
while (x < 8) {
x = x + 1;
if (x == 6) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br />");
while (x < 8) {
x = x + 1;
if (x == 6) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
The above example will give us the following output when practiced with our text-editor.
Entering the loop
2
3
4
5
7
8
Exiting the loop!
2
3
4
5
7
8
Exiting the loop!
You can also check out our tutorial post on: JavaScript Syntax
Using Labels to Control the Flow
Starting from JavaScript 1.2, a label can be used with break and continue to control the flow more precisely. A label is simply an identifier followed by a colon(:) that is applied to a statement or a block of code.
We will see two different examples to understand how to use labels with break and continue statements.
Note: Line breaks are not allowed between the 'continue' and 'break' statement and it's label name. Also, there should not be any other statement in between a label name and associated loop.
We will see two different examples to understand how to use labels with break and continue statements.
Note: Line breaks are not allowed between the 'continue' and 'break' statement and it's label name. Also, there should not be any other statement in between a label name and associated loop.
Try the following two example below for a better understanding of Labels.
You can also check out our superb tutorial post on: JavaScript - While Loop
Example 1
The following example shows how to implement labels with a break statement.
<html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop! <br />");
outerloop: // This is the name of the label
for (var i = 0; i < 5; i ++) {
document.write("Outerloop: " + i + "<br />");
innerloop: // This is the name of the label.
for (var k = 0; k < 5; k ++) {
if (k > 3) break; // Quit the innermost loop
if (i == 2) break innerloop; // Also breaks out of the innermost loop
if (i == 4) break outerloop; // Quit the outerloop
document.write("Innerloop: " + k + "<br />");
}
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop! <br />");
outerloop: // This is the name of the label
for (var i = 0; i < 5; i ++) {
document.write("Outerloop: " + i + "<br />");
innerloop: // This is the name of the label.
for (var k = 0; k < 5; k ++) {
if (k > 3) break; // Quit the innermost loop
if (i == 2) break innerloop; // Also breaks out of the innermost loop
if (i == 4) break outerloop; // Quit the outerloop
document.write("Innerloop: " + k + "<br />");
}
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
The above example will give the output below:
Starting the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
Example 2
<html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop! <br />");
outerloop: // This is the loop name
for (var i = 0; i < 3; i ++) {
document.write("Outerloop: " + i + "<br />");
for (var k = 0; k < 5; k++) {
if (k == 5) {
continue overloop;
}
document.write("Innerloop: " + k + "<br />");
}
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop! <br />");
outerloop: // This is the loop name
for (var i = 0; i < 3; i ++) {
document.write("Outerloop: " + i + "<br />");
for (var k = 0; k < 5; k++) {
if (k == 5) {
continue overloop;
}
document.write("Innerloop: " + k + "<br />");
}
}
document.write("Exiting the loop! <br />");
//-->
</script>
</body>
</html>
You can also check out our tutorial post on: JavaScript - Switch Case
The above example will give you the output below:
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!
Alright guys! we have come to the end of this tutorial, always feel free to ask us questions in any area you don't understand, your questions will be attended to as soon as possible. Don't forget that question are to be asked either true the comment box or via the chat platform in this blog.
Thanks for reading and bye for now.
Thanks for reading and bye for now.