When working with loops in JavaScript, you might encounter situations where you need to stop a loop prematurely or skip certain iterations. This is where the break and continue statements come into play. In this guide, we’ll explore what these statements do, how they work, and when you might use them.

1. The `break` Statement

What Does `break` Do?

The break statement is used to immediately exit a loop. When JavaScript encounters a break inside a loop, it stops executing the loop entirely and jumps to the code following the loop.

When Should You Use `break`?

Terminating a Loop Early: When you have found what you’re looking for, there’s no need to continue iterating.
Conditional Exit: If a certain condition is met, you might want to stop the loop to avoid unnecessary computations.

Example 1: Using `break` in a `for` Loop

// Find the first even number in an array

const numbers = [1, 3, 5, 4, 9, 10];

let evenNumber;

for (let i = 0; i < numbers.length; i++) {

if (numbers[i] % 2 === 0) {

evenNumber = numbers[i];

break; // Exit loop as soon as an even number is found

}

}

console.log('First even number:', evenNumber); // Outputs: 4

Explanation:

In the example above, the loop stops as soon as it finds the first even number (4) and does not iterate through the rest of the array.

Example 2: Using `break` in a `while` Loop

let count = 0;

while (true) {

count++;

if (count === 5) {

break; // Exit the loop when count reaches 5

}

}

console.log('Count after loop:', count); // Outputs: 5

Explanation:

This while loop runs indefinitely (while(true)), but the break statement stops it when count reaches 5.

2. The `continue` Statement

What Does `continue` Do?

The continue statement skips the current iteration of a loop and jumps to the next iteration. It does not terminate the loop; it simply tells the loop to move on.

When Should You Use `continue`?

Skipping Iterations: When a certain condition is met, and you want to skip the current loop cycle without stopping the entire loop.
Filtering Data: When you want to ignore specific elements that do not meet your criteria.

Example 1: Using `continue` in a `for` Loop

// Print only odd numbers from an array

const numbers = [1, 2, 3, 4, 5, 6];

for (let i = 0; i < numbers.length; i++) {

if (numbers[i] % 2 === 0) {

continue; // Skip even numbers

}

console.log(numbers[i]); // Outputs: 1, 3, 5

}

Explanation:

Whenever the loop encounters an even number, it uses continue to skip to the next iteration, so only odd numbers are printed.

Example 2: Using `continue` in a `while` Loop

let i = 0;

while (i < 10) {

i++;

if (i % 2 === 0) {

continue; // Skip the rest of the loop for even numbers

}

console.log('Odd number:', i);

}

Explanation:

This loop increments i from 0 to 10 and uses continue to skip printing when i is even, resulting in only odd numbers being logged.

3. Combining `break` and `continue` in Complex Scenarios

Sometimes, you might need both break and continue within the same loop to handle different conditions.

Example:

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < data.length; i++) {

// Skip odd numbers

if (data[i] % 2 !== 0) {

continue;

}

// If an even number greater than 6 is found, exit the loop

if (data[i] > 6) {

break;

}

console.log('Even number:', data[i]); // Outputs: 2, 4, 6

}

Explanation:

In this example, the loop skips all odd numbers with continue. When it encounters an even number greater than 6 (i.e., 8), it stops the loop with break.

4. Best Practices and Considerations

Readability: Use break and continue judiciously. While they can make your code concise, overusing them may lead to less readable code.
Avoid Infinite Loops: Be careful when using these statements in while loops, especially if the loop’s exit condition depends on dynamic values.
Debugging: When debugging, remember that continue can sometimes make it tricky to follow the control flow since some iterations are skipped.

5. Conclusion

Understanding break and continue is essential for controlling loop execution in JavaScript. With break, you can exit a loop early when a condition is met, saving computational time. With continue, you can skip specific iterations, allowing you to filter out unwanted data without terminating the loop entirely.

References:

MDN Web Docs - break

MDN Web Docs - continue