break in JavaScript: leaving a loop or a switch before the end

A loop has one stubborn habit: it goes all the way to the end. It walks through everything it is given, even when the answer showed up at the third item and the thousands that follow are of no use at all.

break is the way to say it is over. It serves in two different contexts, a loop and a switch, with an identical effect: stopping the nearest structure.

Definition

break stops the enclosing loop straight away. Items not yet visited are dropped, and the program resumes at the first line written after the loop.

const orders = [12, 0, 30];
let firstEmpty = -1;

for (let i = 0; i < orders.length; i++) {
  if (orders[i] === 0) {
    firstEmpty = i;
    break;                  // no point carrying on, the answer is here
  }
}

console.log(firstEmpty);    // 1

Two things change. Compute time first, on a large array. Readability second, and it matters more: the line states out loud the condition that ends the walk, instead of leaving it to be guessed from a flag tested ten lines higher up.

Inside a switch, it blocks the next branch

A case is not a closed block. Without a break, execution spills into the next case, then the one after that, until the end of the structure.

const day = "saturday";

switch (day) {
  case "saturday":
    console.log("Weekend");
    break;                     // without this line, the default branch would follow
  default:
    console.log("Working day");
}

A case ending in a return needs no break, since the function has already been left. That is why a switch that only hands back values reads more safely than a switch that acts.

Leaving several loops at once

break leaves only the nearest loop. On a two-dimensional walk, the outer loop carries on as if nothing had happened, which produces a discreet flaw: the result is sometimes still correct, only slower.

JavaScript allows a loop to be named and that name to be targeted, which is called a label.

const grid = [[1, 2], [3, 4]];
let found = null;

search:
for (const row of grid) {
  for (const cell of row) {
    if (cell === 3) {
      found = cell;
      break search;       // leaves both loops at once
    }
  }
}

console.log(found);   // 3

Frequently asked questions

Both interrupt something, but not the same thing. break leaves the loop entirely, and whatever was left will never be visited. continue drops only the current turn and moves straight on to the next item. The question to ask is simple: do the remaining items still hold any interest?

Because the body handed to Array.forEach() is a function, not a loop block: a break written there stops the file from loading at all. To interrupt a walk you need a for loop, or a method that stops on its own such as Array.find() and Array.some(), which hand back control as soon as one item matches.

That is an old debate inherited from other languages, and the answer is no. Leaving early avoids a pointless walk and states the intent better than a stop condition made of three tests glued together. The one case worth pausing on is a long loop riddled with scattered exits: the problem is no longer the break, it is the loop.