Mastering Break & Continue in JavaScript Loops: A Clear Guide - Featured Image

Mastering Break & Continue in JavaScript Loops: A Clear Guide

by

We are going to learn how to use _break_ and _continue_ in loops. _break_ is used to exit the loop and _continue_ is used to skip the current iteration. We will implement it in JavaScript step by step.

JavaScript Break and Continue

Basic loop

I want to get all the numbers from 0 to 9. This simple for loop prints them.

for (let i = 0; i < 10; i++) {
  console.log(i);
}
// Output: 0 1 2 3 4 5 6 7 8 9

 

Mastering Break & Continue in JavaScript Loops: A Clear Guide 3

 

If you are comparing loop types, see while loops.

Break in action

Let’s first understand the working of _break_. I will create a condition that checks when `i === 5`. When that condition is true, I will _break_. Else, just print the value of `i`.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  } else {
    console.log(i);
  }
}
// Output: 0 1 2 3 4

 

Mastering Break & Continue in JavaScript Loops: A Clear Guide 7

 

As per the logic, `i` starts from 0 and keeps running. It checks if `i === 5` or not. If not, it continues printing 0, 1, 2, 3, 4. When it checks `i === 5`, it _breaks_. _break_ stops the loop when `i === 5`.

Step-by-step:
 Create a for loop from 0 to 9.
Print `i` each time.
Add `if (i === 5)` as the stopping condition.
Place _break_ inside that `if` to exit the loop.

Mastering Break & Continue in JavaScript Loops: A Clear Guide 5

 

Continue in action

Here is the same idea with _continue_. Instead of stopping the loop, I will skip the current iteration when `i === 5`.

Mastering Break & Continue in JavaScript Loops: A Clear Guide 8
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}
// Output: 0 1 2 3 4 6 7 8 9

You can see it prints a lot of values, but it suddenly jumps from 4 to 6. It skipped 5. I put the condition `i === 5`, and in that condition we _continue_. _continue_ simply skips that particular iteration and moves to the next one.

Step-by-step:
 Create a for loop from 0 to 9.
Print `i` each time.
Add `if (i === 5)` as the skip condition.
Place _continue_ inside that `if` to skip only that iteration.

 

Mastering Break & Continue in JavaScript Loops: A Clear Guide 13

When writing the condition, remember to compare correctly. If you need to check types before comparing, see typeof.

Mastering Break & Continue in JavaScript Loops: A Clear Guide 9

Key points:

_break_ stops the loop entirely.
_continue_ skips the current iteration and lets the rest of the executions work properly.

Use _break_ when you want to finish the execution of the loop as soon as a particular condition comes. Use _continue_ when you want to skip the execution for a particular condition but keep the loop going.

This is how you work with _break_ and _continue_ in JavaScript loops. For broader JavaScript fundamentals around objects and methods, see prototypes.

Leave a Comment