A JavaScript label serves as a statement that allows you to designate a label as an identifier. You can create the label using any name, provided it does not include any reserved keywords. The label is utilized in code by placing a colon (:) after it.
A label can be utilized alongside a break or continue statement to manage the execution flow of the code with greater precision. The label is associated with either a specific block of code or an individual statement.
Through a series of examples, we will explore how to declare and utilize the label statement in JavaScript.
Syntax
label: statements
Parameters
label: This refers to a JavaScript identifier. You can assign it any name, provided it does not coincide with a reserved keyword.
Statements: In JavaScript, a statement is defined where the break keyword is utilized in conjunction with a labelled statement, while the continue keyword is employed with looping labelled statements.
Examples
Let us explore the concept of labels in JavaScript, examining their functionality and how they assist in controlling the flow of looping statements through various examples.
Example: Label with for loop to break
In this illustration, we will establish two labels referred to as innerloop and outerloop. These labels will be utilized in conjunction with a for loop to terminate the execution of the loop based on a defined condition.
Copy Code
<html>
<body>
<script>
var i, j;
//Execution of outerloop and innerloop using label
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name for the below loop
for (i = 0; i < 5; i++) {
document.write("<b> Outerloop i: </b>" + i + "</br>");
innerloop: //another label
for (j = 0; j <= 4; j++) {
//when j is greater than 3, quit the innermost loop
if (j > 3 ) {
document.write("<b> Break innermost loop when j>3 </b></br>");
break ;
}
// when i = 2, exit from innerloop
if (i == 2) {
document.write("<b> Break innerloop when i=2 </b></br>");
break innerloop;
}
// when i = 4, exit from outerloop too
if (i == 4) {
document.write("<b> Break outerloop when i=4 </b></br>");
break outerloop;
}
document.write("Innerloop execution j: " + j + " <br />");
}
}
document.write("Exit from all loops! </br> ");
</script>
</body>
</html>
Output
Entering the loop!
Outerloop i: 0
Innerloop execution j: 0
Innerloop execution j: 1
Innerloop execution j: 2
Innerloop execution j: 3
Break innermost loop when j>3
Outerloop i: 1
Innerloop execution j: 0
Innerloop execution j: 1
Innerloop execution j: 2
Innerloop execution j: 3
Break innermost loop when j>3
Outerloop i: 2
Break Innerloop when i=2
Outerloop i: 3
Innerloop execution j: 0
Innerloop execution j: 1
Innerloop execution j: 2
Innerloop execution j: 3
Break Innerloop when j>3
Outerloop i: 4
Break Outerloop when i=4
Exit from all loops!
Example: Label with for loop to continue
In this illustration, we will once more establish two labels referred to as innerloop and outerloop. However, this time, these labels will be utilized in conjunction with a for loop to resume the loop's execution whenever the designated condition is met.
Copy Code
<html>
<body>
<script>
var i,j;
//Execution of loops using outerloop and innerloop label
document.write("Entering the loop! </br> ");
outerloop: // This is the label name
for (i = 0; i < 4; i++) {
document.write("<b> Outerloop: </b>" + i + "</br>");
innerloop:
for (j = 0; j < 4; j++) {
if (i > 2) {
document.write("<b> Continue Innerloop when i>2 </b></br>");
continue innerloop;
}
if (j == 3) {
document.write("<b> Continue Outerloop when j=3 </b></br>");
continue outerloop;
}
document.write("Innerloop execution: " + j + "<br />");
}
}
document.write("Exit from all loops!<br /> ");
</script>
</body>
</html>
Output
Entering the loop!
Outerloop i: 0
Innerloop execution j: 0
Innerloop execution j: 1
Innerloop execution j: 2
Continue Outerloop when j=3
Outerloop i: 1
Innerloop execution j: 0
Innerloop execution j: 1
Innerloop execution j: 2
Continue Outerloop when j=3
Outerloop i: 2
Innerloop execution j: 0
Innerloop execution j: 1
Innerloop execution j: 2
Continue Outerloop when j=3
Outerloop i: 3
Continue Innerloop when i>2
Continue Innerloop when i>2
Continue Innerloop when i>2
Continue Innerloop when i>2
Exit from all loops!
Essentially, a label statement in JavaScript manages the direction of program execution. Nowadays, JavaScript developers infrequently utilize labels.