break を一言でいうと
break は、
「いま実行中の switch 文 や ループ（for / while）を、その場で“ブチッ”と抜けるためのキーワード」 です。
今回のテーマは「条件分岐」なので、特に
switch文の中のbreakが何をしているのかbreakを書かないとどう危ないのか
をしっかりイメージできるようになることをゴールにします。
ここが重要です。break は「なんとなくお約束で書くもの」ではありません。
「ここで、そのブロックの処理を終わらせて外に出たい」という、はっきりした意思表示 です。
switch 文の中での break の役割
case ごとの「出口」を作る
まず、基本の switch 文を確認します。
const color = "red";
switch (color) {
case "red":
console.log("赤");
break;
case "blue":
console.log("青");
break;
default:
console.log("その他");
}
ここでの break は、
「この case の処理が終わったら、switch 全体から抜ける」 という意味です。
color が "red" のときの流れを追うと：
switch (color)→"red"case "red":に一致 →"赤"と表示break;に到達 → switch 文全体を終了"blue"の case やdefaultは一切実行されない
もし break がなかったら、どうなるでしょうか。
break を書かないと「下まで全部流れてしまう」
同じコードから break をわざと削ってみます。
const color = "red";
switch (color) {
case "red":
console.log("赤");
case "blue":
console.log("青");
default:
console.log("その他");
}
このとき "red" の場合、出力はこうなります。
赤
青
その他
理由は、
"red"にマッチ → そこから下に向かって、breakに出会うまで全部実行する
という「フォールスルー（落ちていく）」挙動があるからです。
ここが重要です。
switch 文では、「case に入ったら、break を書かない限り下に向かって全部実行される」がデフォルトです。
“その case だけの処理で終わりたい” ときに、出口として break が必要になります。
意図したときだけ使うフォールスルーと break
複数の値を同じ処理にしたいときのテクニック
さっきの「フォールスルー」は、
意図して使えば便利な場面もあります。
例えば、「月〜金は平日、土日が週末」というメッセージを出したいとします。
const day = "Wed";
switch (day) {
case "Mon":
case "Tue":
case "Wed":
case "Thu":
case "Fri":
console.log("平日です");
break;
case "Sat":
case "Sun":
console.log("週末です");
break;
default:
console.log("不明な曜日です");
}
day が "Wed" のとき：
"Mon"→ 不一致"Tue"→ 不一致"Wed"→ 一致 → この位置から処理開始- そのまま下に落ちて
"平日です"が実行される break;に達したので switch を抜ける
ここでは、「Mon〜Fri は全部同じ処理にしたい」という意図があるので、
あえて break を付けずに case を並べ、最後の 1 箇所でだけ break している わけです。
ここが重要です。
フォールスルーは、「複数ケースをまとめて同じ処理にしたいとき」にだけ意識して使う。
それ以外は原則、各 case の最後に必ず break を付ける、というルールにしておくと安全です。
break はループでも使える（ざっくりイメージ）
ループを途中で「やめる」役目
break は switch だけでなく、for や while などのループでも使えます。
for (let i = 1; i <= 5; i++) {
console.log(i);
if (i === 3) {
break; // i が 3 になった時点でループを抜ける
}
}
console.log("ループ終了");
出力は：
1
2
3
ループ終了
i が 3 になったところで、
「この for ループ全体をここで終わらせたい」 という意思表示として break を使っています。
switch と同じく、「いま自分がいるブロック（この場合は for ループ）から抜ける」働きです。
条件分岐と組み合わせるから意味が出る
ループの中で break を使うのは、
たいてい if とセットです。
for (const user of users) {
if (user.id === targetId) {
console.log("見つけた:", user);
break; // 目的のユーザーが見つかったので、これ以上探さない
}
}
「条件が満たされたら、もうこれ以上ループを回さなくていい」と決めているからこそ、if の中に break を置きます。
ここが重要です。
switch でもループでも、break は「条件がこうなったら、ここで終わりにする」という判断を書くためのボタンです。
“いつ終わらせたいのか？” を意識できていないまま break を書くと、たいていバグになります。
break と continue の違い（よく混ざるポイント）
break は「そのブロックから完全に出る」
break は、
- switch なら、その switch 文から抜ける
- ループなら、そのループ自体を終わらせる
という「完全脱出」です。
continue は「今回だけスキップして、次の周回に進む」
一方、continue はループ専用で、
「この周の残り処理をスキップして、次の i へ進む」 という意味です。
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue; // 3 のときだけ、この周の残りを飛ばして次の i へ
}
console.log(i);
}
結果は：
1
2
4
5
3 のときだけ console.log が実行されません。
ループ自体はちゃんと 5 まで回っています。
ここが重要です。break は「ここでループ／switch 全体を終わり」、continue は「この 1 回だけ飛ばして次へ」。
条件分岐の中でどちらを使うべきかを間違えると、処理が途中で止まりすぎたり、止まらなかったりします。
break を使うときに本当に意識してほしいこと
「どのブロックから抜けるのか」を常に意識する
break は「自分が今いる 一番内側の switch またはループ から抜ける」だけです。
入れ子の場合をイメージしてみます。
for (let i = 0; i < 3; i++) {
console.log("外側:", i);
for (let j = 0; j < 3; j++) {
console.log(" 内側:", j);
if (j === 1) {
break;
}
}
}
この break は「内側の for」からしか抜けません。
外側の for は、i = 0, 1, 2 まで普通に回り続けます。
ここが重要です。break が「どのスコープ（どの switch / どのループ）」を対象にしているのかを、コードを読むとき・書くときに必ず意識してください。
“この break で、どこまで終わらせたいんだっけ？” を自分に毎回問い直す癖をつけると、変なバグを減らせます。
初心者として「break の役割」で本当に押さえてほしいこと
switch 文の中での break は、「この case の処理が終わったら、switch 全体から抜ける」ための出口。
書き忘れると、下の case や default まで実行されてしまう（フォールスルー）。
複数の case を同じ処理にしたいときだけ、意図的に break を省いてフォールスルーを使う。
それ以外は、基本的に各 case の最後に break; を書く習慣を持つ。
ループ（for / while）の中の break は、「ループ全体をそこで終わらせる」ボタン。
たいてい if とセットで、「この条件になったら、もうこれ以上回さない」という判断を表現する。
break は「完全に抜ける」、continue は「この 1 回だけスキップして次へ進む」。
この二つの違いを頭の中でハッキリ分けておく。
ここが重要です。break は、“ここで終わりでいい” と自分が決めた場所にだけ置くべきものです。
「とりあえず入れておく」ものではなく、「ここで区切るべき理由があるからこそ入れる」もの。
その感覚を大事にしながら、switch やループの流れを、頭の中でトレースする練習をしてみてください。
練習としては、次のようなコードを書いてみると理解が深まります。
// 1. switch + break:
// - 数値 num に応じて「1」「2」「3」「その他」を表示する switch を書き、
// break をわざと消したバージョンも試して、どんなログになるか比べてみる。
// 2. for + break:
// - 1〜10 をループし、5 になったら break するコードを書いて、
// どこまでログが出るか確認する。
// - 5 のときに break ではなく continue にするとどう変わるかも試してみる。
「ここで処理が終わるべき」と自分で思う場所と、実際に break が効いている場所が一致しているかを、
自分の目と感覚で確かめてみてください。
それが、break を“自分の意志でコントロールできる”ことにつながります。