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

Front End Technology Javascript Web Development

This tutorial will teach us to use a label with the continue statement in JavaScript. In the ES5, we were using the label with the go-to statement to jump over the iteration, but it is not supported in the ES6 version of JavaScript. So, we will use the continue statement to jump over the loop iteration or skip any single iteration.

Here are the basic definitions of the label and continue statement.

label − It can be any string to give a name or label to the block of code.
continue − It is used to jump over the one iteration of the loop. It is the replaced version of the go-to statement in the ES6.

Syntax

Users can follow the syntax for the label as follow.

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

Use a label with continue statement with a single loop

In this section, we will learn to use the continue statement with the single loop. While using the continue statement with the single loop, we don’t need to use the label, but we will use it to demonstrate how the label and the ‘continue’ keywords can be used together.

Syntax

Users should follow the below syntax to use the label and continue the keyword with the while loop.

loop:
while () {
   if ( condition ) {
      continue loop; // to jump over the next iteration of loop, use continue keyword followed by label of the loop.
   }
}

Example 1

In the below example, we have to use the single while loop and give a label to it. We have created an array of strings. If users find “hello” and “world!” string in the array, we will continue that loop iteration and jump over to the next iteration. To jump over the next iteration, we will use the continue keyword followed by the label of the loop.

<html>
<head>
   <title> Using the label with continue keyword. </title>
</head>
<body>
   <h2> Using the label with continue keyword. </h2>
   <h4> If specific string occurs in the array jump to the next iteration. </h4>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      let array = ["welcome", "to", "the", "hello", "world!", "tutorialsPoint!"];
      let n = array.length;
      let i = -1;
      loop:
      while (i < n - 1) {
         i++;
         if (array[i] == "hello" || array[i] == "world!") {
            continue loop;
         }
         output.innerHTML += array[i] + " ";
      }
   </script>
</body>
</html>

In the above output, users can see that if “hello”, and “world!” string occurs in the array, it jump to the loop iteration and doesn’t print in the output.

Example 2

You can try to run the following code with labels with continue statement.

<html>
<body>
   <script>
      document.write("Entering the loop!<br /> ");
      outerloop: // This is the label name
      for (var i = 0; i < 3; i++) {
         document.write("Outerloop: " + i + "<br />");
         for (var j = 0; j < 5; j++) {
            if (j == 3) {
               continue outerloop;
            }
            document.write("Innerloop: " + j + "<br />");
         }
      }
      document.write("Exiting the loop!<br /> ");
   </script>
</body>
</html>

Label and continue statement with nested for loops

In the above section, we have learned to use the label with the continue keyword. In this section, we will learn to jump over the next iteration of the parent or grandparent loop from the child loop.

We just need to do is change and append the label of the parent loop after the continue keyword.

Syntax

Here is the syntax to use the continue statement with the nested loops.

parentLoop:
   for () {
      childLoop:
      for () {
         if (condition) {
            continue parentLoop; // jump over to the next iteration of parent loop
         }
      }
   }

Example 3

In this example, we have used the two nested for loops. We have two same strings and match every character of both strings using the nested for loops. If any characters of both strings will match, we will jump over the next iteration of the parent loop from the child loop using the continue keyword followed by the label of the parent loop.

<html>
<head>
   <title> Using the label with continue keyword. </title>
</head>
<body>
   <h2> Using the label with continue keyword. </h2>
   <p> We will jump over the parent loop iteration when string character will match. </p>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      let str1 = "abcd";
      let str2 = "abcd";
      parentLoop:
      for (let i = 0; i < str1.length; i++) {
         childLoop: for (let j = 0; j < str2.length; j++) {
            if (str2[j] == str1[i]) {
                  continue parentLoop;
            } else {
               output.innerHTML += " str1[ " + i + " ] = " + str1[i] + " str2[ " + j + " ] = " + str2[j] + "<br/>";
            }
         }
      }
   </script>
</body>
</html>

Users can see that when any character of both strings matches, we jump to the next iteration of the parent loop, and that is how the above output is rendered on the screen.

Conclusion

Users have learned to use the label with the ‘continue’ statement. Same as the break statement, we can’t use the continue to the switch-case or inside the block of code.