Break and Continue in Javascript
Tags: javascript, tutorial
Published: 2021-07-13 06:50:28

You would have probably used `break` or `continue` in your javascript code at least once. Break and continue in javascript are known as *jump statements*. Let's look into both the statements. 

## Break

The `break` statement causes the innermost enclosing loop or switch statement to exit immediately.

You would be already familiar how `break` works in `switch` statements and it can be used to break a statement prematurely with or without any condition or reason. However in a `for` loop *break* can be used to exit when it finds a match and no longer need to loop through next elements like below. 

```
for(let item of array) {
    if (item === target) break;
}
```

### Break with labels

`Break` can be used with a **label**, it jumps to the end of, or terminates, the enclosing statement that has the specified label. 

**Note**: With this form of the break statement, the named statement **need not be a loop or switch**: break can break from **any** enclosing statement (except you cannot label a function definition statement and then use that label inside the function). 

```
let matrix = getData();  // Get array of numbers
// Now sum all the numbers in the matrix.
let sum = 0, success = false;
// Start with a labeled statement that we can break out of if errors occur
computeSum: if (matrix) {
    for(let x = 0; x < matrix.length; x++) {
        let row = matrix[x];
        if (!row) break computeSum;
        for(let y = 0; y < row.length; y++) {
            let cell = row[y];
            if (isNaN(cell)) break computeSum;
            sum += cell;
        }
    }
    success = true;
}
```

## Continue

The `continue` statement continues restarting a loop at the next iteration, instead of exiting a loop.

```
for(let i = 0; i < array.length; i++) {
    if (!array[i]) continue;  // Can't proceed with undefined
    total += array[i];
}
```

### Continue with labels

Unlike `break`, the `continue` statement, in both its labeled and unlabeled statements, can be used **only within the body of a loop**.

```
const array = [[1, "one"], [2, "two"], [3, "three"], [4, "four"]];
outer: for (const arrayElement of array) {

  inner: for (const arrayElementElement of arrayElement) {
    if(typeof (arrayElementElement) === "number"){
      console.log(`${arrayElementElement} is a number`);
      continue outer;
    }
    console.log(arrayElement); //this would not be logged
  }
}
```

Continue statement works differently for different types of loops:

#### `while` loop
The specified expression at the beginning of the loop is tested again, and if it’s true, the loop body is executed starting from the top.

#### `do/while` loop
Execution skips to the bottom of the loop, where the loop condition is tested again before restarting the loop at the top.

#### `for` loop
The increment expression is evaluated, and the test expression is tested again to determine if another iteration should be done.

#### `for/of` or `for/in` loop
The loop starts over with the next iterated value or next property name being assigned to the specified variable.

Hope you will make use of break and continue with this understanding next time on you code. If you have any questions or comments please type in below. 

References:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue
- Javascript: The definitive guide