Javascript break & continue control statements Tutorial

What are control statements

Control statements help us control the flow of our if and switch statements, as well our loops. We’ll be able to easily stop execution of statements, or skip through loops.

Javascript provides us with two control statements:

• break
• continue

The break control statement

The break statement will tell the translator to stop execution of a statement, break out of its code block, and move on to other code below it.

To break out of a statement, we simply write the keyword break where we want to stop the execution.

As an example, let’s consider that a user must choose a mystery number between 1 and 10.

<script>

  // user chooses mystery
  // number between 1 and 10
  var user_input = 7;

  for (i = 1; i <= 10; i++) {

    // mystery number is 7
    if(user_input == 7) {

      document.write("Congratulations! 7 is the mystery number!");
      break;
    } else {

      document.write("Sorry, ", user_input, "is not the mystery number. Try again");
    }

  }

</script>

Instead of a long if/else or switch statement, we loop through the possible numbers 1 to 10 to perform the checks.

If the user chooses number 7, it means they guessed correctly. At that point there is no need to continue the loop, so we print a message and then break out of the loop. Otherwise, the user receives a message that they guessed wrong and they can try again.

The continue control statement

The continue statement will tell the translator to skip the current iteration of the loop.

To skip an iteration of a loop, we simply write the keyword continue where we want the loop to skip.

As an example, let’s consider that we loop through a list of employees that are at work today. However, John has the day off and shouldn’t be included in the list.

<script>

  // list of employees
  var employee = ["John", "Jane", "Jack", "Jill"];
  var i = 0;

  while (employee[i]) {

    if (employee[i] == "John") {

      i++;
      continue;
    }

    document.write(employee[i], "<br>");
    i++;
  }

</script>

Once the loop gets to John, instead of printing his name to the page, we continue (skip the iteration). We increment the counter to the next employee, otherwise we’ll get stuck in an infinite loop where the translator will keep trying to evaluate John and being told to skip.

Let’s see another example, this time in a for loop.

<script>

  for (i = 1; i <= 10; i++) {

    if (i == 5) {

      continue;
    }

    document.write(i, "<br>");
  }

</script>

In the example above, we simply print the numbers 1 through 10 to the page. However, once we get to 5, we skip the iteration with continue so the translator never gets to the document.write() statement.

Summary: Points to remember

• Control statements control the flow of the conditional statements and loops in our application.
• The break statement stops execution of the loop or statement and moves on to code outside and below its code block.
• The continue statement skips the current iteration of the loop, and moves back to the top for the next one.