How can I use a label with break statement in JavaScript?

Front End TechnologyJavascriptWeb Development

This tutorial will teach us to use a label with a break statement in JavaScript. The label and break statement are not new in JavaScript, and many of you are familiar with both. The label is a unique string we can use to give the identity to the block of code, loops, switch cases, etc., in JavaScript.

We can use the break keyword with the label statement. It stops the execution of the code in the middle.

In this tutorial, we will learn to use the label and break statement with the loops, and block of codes.

Here are the basic definitions of the label and break keyword.

  • Label − It can be any string to give a name or label to the block of code.

  • Break − It is used to terminate the execution of the block of code, loop, or switch statement.

Syntax

Users can follow the syntax for the label as follow.

label:
   statement // it can be loop, block of code, etc.

Use label statement with break keyword in loops

In this section, we will learn to use the label statement with the break keyword. Most programmers have used the only break statement with the loops but maybe with the label statement.

If we use the break statement with the loop, it only breaks its parent loop in which it is used but what if we want to break the outer loop of the break keywords parent loop, we can use the label in these conditions.

Syntax

Users can follow the below syntax to break the parent loop from the child loop using the label and break keyword.

parentLoop: // label for parent loop
   for ( ) {
      childLoop: label for child loop
   for () {
      // body for child loop
      break parentLoop; // breaking parent loop
   }
}

Example 1

In the below example, we have taken two strings. We are matching and keep matching every character of the string using two loops. If any character of both strings will the same, we will stop the execution of both the loop using the break keyword and label of the parent loop. In simple language, we will learn to stop the execution of the parent loop from the child loop using the label and break.

<html>
<head>
   <title> Using the label with break keyword. </title>
</head>
<body>
   <h2> Using the label with break keyword. </h2>
   <h4> Users can see the flow of for loops and when stops using break keyword.</h4>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      let str1 = "abcd";
      let str2 = "cdef";
      parentLoop:
      for (let i = 0; i< str1.length; i++) {
         childLoop:
         for (let j = 0; j < str2.length; j++) {
            if (str2[j] == str1[i]) {
               break parentLoop;
            } else {
            output.innerHTML += " str1[ " + i + " ] = " + str1[i] + "    str2[ " + j + " ] = " + str2[j] + "<br/>";
            }
         }
      }
   </script>
</body>
</html>

In the above output, users can see that when first character of str1 and str2 matches, we breaks the parent loop from the child loop and it stop printing the characters of the string. In our case, ‘c’ is the first matching character.

Example 2

You can try to run the following code to learn how to work with labels with break statement

<html>
<body>
   <script>
      document.write("Entering the loop!<br /> ");
      outerloop:
      for (var i = 0; i < 5; i++) {
         document.write("Outerloop: " + i + "<br />");
         innerloop:
         for (var j = 0; j < 5; j++) {
            if (j > 3) break; // Quit the innermost loop
            if (i == 2) break innerloop; // Do the same thing
            if (i == 4) break outerloop; // Quit the outer loop
            document.write("Innerloop: " + j + " <br />");
         }
      }
      document.write("Exiting the loop!<br /> ");
   </script>
</body>
</html>

Using the label and break with code block

In this section, we will learn to use the label and break keywords with the code block. We can give a label to the block as we have used the label for the loops in the above section. After that, we can stop the execution of the code of a particular block.

Syntax

Users can see the below syntax to use the label and break keywords with the block.

parentBlock:
   {
      // parent block body
      childBlock: {
         break childBlock;
         // this lines will not be executed
         }
         break parentBlock;
         // this lines of code in parent block will not exeuted.
   }

Example 3

In the example below, we will use the parent and child block label. We will use the label of respective blocks with the break keyword to stop the execution of both the blocks.

<html>
<body>
   <h2> Using the label with break keyword. </h2>
   <p> Stops the execution of childBlock and parentBlock using the break keyword and respective labels. </p>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      parentBlock: {
         output.innerHTML = "parent Block execution started. <br/>";
         childBlock: {
            output.innerHTML += "Execution of the child block has been started. <br/> ";
            break childBlock;
            output.innerHTML += "This will not be executed. <br/>";
         }
         break parentBlock;
         output.innerHTML += "Parent block execution ended. <br/>"
      }
      output.innerHTML += "Outside the parent block. <br/>"
   </script>
</body>
</html>

In the above output, users can see that as we have used the break keyword with the label inside the child and parent block, it will not complete the execution of both blocks, and the control flow goes outside the parent block.

Conclusion

We have learned to use the label with the break keyword, and we have seen how one can use the label to break any other loop rather than the parent loop. Also, we look at using the label with the block of code.

raja
Updated on 14-Jul-2022 13:24:13

Advertisements