Exiting Loops with Javascript Break and Javascript Continue

A core Javascript feature is the control structure, more commonly known as a loop or branching statement. The Javascript standard provides many types of control structures, and they most commonly execute to completion. This means that all iterations of a loop will run or all necessary branches in a branching statement will be evaluated.

Sometimes, developers must stop loops from executing or restrict the branches executed in a branching statement. The Javascript break and Javascript continue keywords manage these needs, providing fine-grained control over every iteration and branch.

This article covers how the Javascript break and Javascript continue keywords change the default behavior of control structures.

Javascript Break Keyword

The Javascript break keyword causes immediate termination of a loop or branching statement. It prevents fall-through between cases in Javascript switch statements and provides a fail-safe in Javascript while loops for instances where they might not meet their end conditions.

Switch statements often have cases of deliberate fall-through, and the break keyword ensures that the result of a switch statement’s evaluated expression is routed to the proper place. In this example, four specific cases (including a default) determine which instructions to execute. The break keyword provides control flow out of the switch statement.

switch (expression) {
    case 1:
    case 3:
        ... instructions ...
        break;
    case 2:
        ... instructions ...
        break;
    default:
        ... instructions ...
        break;
}

While loops exit when they reach the end condition, but there may be circumstances where the looping needs to be halted immediately. A break keyword wrapped in a Javascript if statement ends the loop:

let x = 5;
let y = someFunction();

while (x > 0) {
    if (y == 100) { break; }
    ... instructions ...
}

// the break causes execution to continue here

Loops of all types can be placed inside each other, or “nested.” To break out of nested loops, label the loops and pass the label name to the break keyword. This works no matter how many nested levels exist.

In this example, the break keyword within “innerloop” would cause flow to continue within “outerloop”, but break outerloop causes the flow to exit both loops at once, as shown:

outerloop: while (end condition 1) {
    ... instructions ...
    innerloop: while (end condition 2) {
        if (break condition) { break outerloop; }
        ... instructions ...
    }
}

// the break outerloop causes execution to continue here

Javascript Continue Keyword

The Javascript continue keyword skips an iteration in a loop. If it’s at the very beginning of a loop, the entire iteration is skipped; if it’s in the middle of a loop, the rest of the current iteration is skipped, and if it’s at the very end of a loop, the next iteration is skipped.

It is common to see the continue keyword used in Javascript for loops, but they are also useful in other loop types. This example shows a for loop that demonstrates all three types of iteration skipping while moving from the numbers one to 10.

The if statement at the start of the for loop skips over iteration 2 just after it starts, while the if statement in the middle of the loop ends iteration 5 just after it prints out its number. The if statement at the end of the loop skips over iteration 9 immediately as iteration 8 ends.

let total = 0;

for (let i = 1; i <= 10; i++) {
    if (i == 2) { continue; }
    console.log(i);
    if (i == 5) { continue; }
    total += i;
    if (i == 8) { continue; }
}

// Prints 1, 3, 4, 5, 6, 7, 8, 10
// Total = 1 + 3 + 4 + 6 + 7 + 8 + 10

The continue keyword can skip iterations in nested loops when given a loop label, just like the break keyword. The keyword only skips iterations within its own loop; it cannot skip iterations in other nested loop levels.

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        if (j == 2) { continue; }
        console.log(i + "," + j);
    }
}

// Prints 1,1, 1,3, 2,1, 2,3, 3,1, 3,3

Using Javascript Break and Javascript Continue Together

The Javascript break and Javascript continue keywords may be present in the same loop or control statement, but bad coding practices might make them unreachable or cause unexpected behavior. Always make sure that your control statement has the potential to execute every break or continue iteration.

In this example, the loop never gets to the continue iteration because it always encounters the break keyword first.

for (let i = 1; i <= 5; i++) {
    console.log(i);
    if (i >= 4) { break; }
    if (i % 4 == 0) { continue; }
}

Reorganizing the conditional statements allows the loop to reach both keywords and execute one more iteration of the loop than before:

for (let i = 1; i <= 5; i++) {
    console.log(i);
    if (i % 4 == 0) { continue; }
    if (i >= 4) { break; }
}

Conclusion

The Javascript break keyword is a crucial part of some control structures, while the Javascript continue keyword is useful for specific circumstances. You can use the two keywords together, depending on how your control structures’ default behavior should change.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript break, Javascript continue, and other programming concepts.

Start Learning