【JavaScript】breakでループ処理を中断させる方法

break 文は、ループを途中で中断して抜けるための構文です。特定の条件を満たしたら、それ以降の繰り返しを実行せずにループを終了できます。

この記事では、基本の使い方から、continue との違い、forEach で break できない問題とその代替、ネストしたループを一気に抜けるラベル付き breakまで解説します。

基本：breakでループを抜ける（for / while）

条件を満たしたら break を実行すると、その時点でループが終了します。for でも while でも同じです。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // iが5になったらループを中断
  }
  console.log(i); // 0, 1, 2, 3, 4 が出力される
}

let i = 0;
while (i < 10) {
  if (i === 5) break;
  console.log(i);
  i++;
}

値が見つかったら抜ける（for…of）

配列から特定の値を探し、見つかった時点で検索を終了したいときに break が役立ちます。

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

for (const number of numbers) {
  if (number === 7) {
    console.log("見つかりました:", number);
    break; // 7が見つかったので終了
  }
}

「条件に合う要素を探す」だけなら、find() や some() を使うと自動的に見つかった時点で止まり、より宣言的に書けます（配列から条件に合う要素を取り出す方法）。

continueとの違い（スキップ vs 中断）

break と混同しやすいのが continue です。continue は現在の反復だけスキップして次へ進み、break はループ自体を終了します。

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // 2のときだけスキップ
  console.log(i); // 0, 1, 3, 4（2だけ飛ぶ。ループは続く）
}

forEachではbreakできない（代替）

forEach では break が使えません（構文エラーになります）。forEach 内の return も「現在の要素をスキップ」するだけで、ループは止まりません。途中で止めたいなら次のいずれかを使います。

// ① for...of なら break が使える
for (const n of [1, 2, 3, 4]) {
  if (n === 3) break;
  console.log(n);
}

// ② some()：trueを返した時点で停止
[1, 2, 3, 4].some((n) => {
  console.log(n);
  return n === 2; // ここで停止
});

// ③ find()：条件に合う最初の要素で停止
const found = [5, 6, 7, 8].find((n) => n > 6); // 7

ネストしたループを一気に抜ける（ラベル付きbreak）

ループが入れ子になっている場合、ふつうの break はもっとも内側のループしか抜けません。外側まで一気に抜けたいときは、ループにラベルを付けてbreak ラベル名 とします。

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i + j === 3) {
      break outer; // 外側のループごと抜ける
    }
    console.log(i, j);
  }
}

outer: がラベルです。break outer で、内側だけでなく outer ラベルの付いた外側のループも終了します。

よくある質問（FAQ）

まとめ

break は for / while / for...of を途中で終了させる構文です。値が見つかったら抜ける、といった処理に便利です。

注意点は、forEach では break できないこと（for...of や some / find で代替）、ネストを一気に抜けるにはラベル付き breakを使うこと、そして現在の反復だけ飛ばす continue との違いです。用途で使い分けましょう。