Break and Continue in JavaScript
How Break and Continue Differ
In our Basics of JavaScript Loops. article, we talked about the break statement and how we can control the execution flow in the loops.
While break allows us to exit a loop early, commonly explained as "jumping out" of a loop, the continue statement skips an iteration and moves on to the next one in order.
Let's take a look at a simple example to understand the difference between the two.
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
In this code, we have a for loop that iterates 10 times and prints the value of i. Then, the if statement checks if the value of i is equal to 5, and if it is, the break statement is executed and the loop is exited early.
As a result, we get the following output:
1
2
3
4
Now, let's modify the code to use the continue statement instead:
for (let i = 1; i <= 10; i++) {
if (i === 5) {
continue;
}
console.log(i);
}
Here, the if statement still checks if i is equal to 5, but instead of exiting the loop, the continue statement is executed and the current iteration is skipped.
As you can see, the number 5 is missing from the output, as the continue statement skips the iteration where i is equal to 5.
1
2
3
4
6
7
8
9
10
Continue in a While Loop
Observe the following use case where we only print the odd numbers from 1 to 10:
let i = 1;
while (i <= 10) {
if (i % 2 === 0) {
i++;
continue;
}
console.log(i);
i++;
}
We have a while loop that continues as long as the value of i is less than or equal to 10. With the if statement, we check if the value of i is even, and if so, the continue statement is executed and the iteration is skipped.
// Output
1
3
5
7
9
Break in Conditionals
A break isn't only used in loops. We come across it in switch statements to exit a case early and prevent our code from falling through the next one.
Imagine a mock example of a weather app, where you want to give your users a suggestion for what to wear based on the weather forecast. You could use a switch statement to check the weather conditions and display a message accordingly.
let weather = "sunny";
switch (weather) {
case "rainy":
console.log("Don't forget your umbrella, it's raining cats and dogs outside!");
break;
case "sunny":
console.log("Slather on that sunscreen, it's a beautiful day in the sun!");
break;
case "cloudy":
console.log("It's a little overcast, better bring a light jacket just in case.");
break;
default:
console.log("I'm not sure what the weather will be like, better check again later.");
}
// Output: Slather on that sunscreen, it's a beautiful day in the sun!
We first declare a variable weather and set it to sunny. Then, we use a switch statement to check the value of weather against several different case statements.
When the value of weather matches a particular case, the code block associated with that case will run.
Now, you may be wondering why there's a break statement at the end of each case. The break statement is crucial because it tells JavaScript to exit the switch statement as soon as a match is found. If there were no break statements, the code would continue to run through all of the other cases, even if a match has already been found, which is not what we want.
Labeling
Labeling could be particularly useful when you have nested loops and you want to break out of a specific one.
outerLoop: for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
if (i === 2 && j === 2) {
break outerLoop;
}
console.log(`i: ${i}, j: ${j}`);
}
}
To demonstrate, we have labeled the outer loop as outerLoop and used the break statement to exit out of it. Now, the if statement checks if i and j are equal to 2, and if they are, the break statement is executed and the outer loop is exited.
The output of this implementation will be:
i: 1, j: 1
i: 1, j: 2
i: 1, j: 3
Caveats
While the break and continue statements are supported in all browsers, there are some nuances to keep in mind. First off, make sure that you are using the correct syntax and always check if you're using the correct label when breaking out of a labeled statement — if they don't match we won't achieve the result that we intended.
Another thing to be mindful of is that the break and continue statements can make your code harder to read and maintain, especially if you are using them in complex nested loops.