break と continue でループを制御する

解説

このレッスンで分かること

• break はループそのものを終わらせます
• continue はその周だけ飛ばして、次の周に進みます

最後まで見なくていいのに、最後まで見ている

ここまでのループは、配列を必ず先頭から末尾まで全部まわしていました。ですが実際のデータには「飛ばしたい要素」と「ここまで来たらもう見なくていい」があります。作品一覧なら、非公開のものは飛ばしたいし、並べるのが 3 件までなら 4 件目以降は見る必要がありません。前者が continue、後者が break です。

どちらも単独では使わず、if と組み合わせて「この条件のときだけ」という形で書きます。条件を付けずに置くと、break は必ず 1 周で終わり、continue より後ろの処理は実行されません。

continue は、その周だけを捨てる

const views = [0, 120, 0, 80];
let total = 0;
for (const v of views) {
  if (v === 0) {
    continue; // 閲覧が無い日は数えない
  }
  total += v;
}
console.log(total); // 200

continue に出会うと、その周の残りの行は実行されず、次の要素に進みます。同じことは if (v !== 0) { ... } でも書けます。処理が 1 行ならそのほうが自然ですが、本体が 10 行あって除外条件が 3 つになると、if で囲む書き方はインデントがどんどん深くなります。除外を先に片付けて continue で抜ければ、本体を浅いまま保てます。

break は、そこでループを終わらせる

const titles = ["写真ギャラリー", "読書記録", "時計アプリ"];
for (const title of titles) {
  console.log(title);
  if (title === "読書記録") {
    break; // ここで終わり
  }
}
// 写真ギャラリー
// 読書記録

3 番目は出力されません。探しものが見つかったあとに残りを見ても意味が無い、という場面のための道具です。要素が数万件ある配列なら、break があるかどうかで処理時間がまるで変わります。

気を付けたいのは判定を書く位置です。件数を数えて打ち切るときは、足してから数える。

let count = 0;
for (const title of titles) {
  count++;
  if (count === 2) {
    break;
  }
}

count++ より前に判定を置くと、2 件を数えた次の周に入ってから止まります。必要な件数に届いたその周で止めるなら、増やしてから判定します。判定より前にある処理は実行されるので、追加と判定の順番を確かめてください。

解説

break は switch でも使いました。どちらも「いちばん近いループまたは switch を抜ける」という働きです。ループが二重になっているとき、内側の break が抜けるのは内側のループだけで、外側は続きます。

よくある間違い

• while の中で continue を使う — for の更新式は自動で実行されますが、while では更新行を自分で書いています。continue がその行を飛び越すと、条件がいつまでも変わらず止まらなくなります
• break のつもりで continue を書く — 結果は合っていても、最後まで無駄にまわります。飛ばすのか、終わるのか。ここが 2 つの唯一の違いです

演習に進む前に

演習では、同じ位置の作品名と公開状態を読むループを用意してあります。自分で書くのは、飛ばす条件と終える条件です。

const labels = ["朝", "昼"];
const enabled = [false, true];
console.log(labels[1], enabled[1]); // 昼 true

continue は追加前、件数で止める break は追加後に置きます。本文の例と同じように、次の周へ進むか、全部終えるかを選んでください。

1. 関数名は pickPublishedTitles、引数は配列 titles と配列 flags の 2 つ、戻り値は文字列の配列
2. flags[i] が false の要素は continue で飛ばすこと
3. 集めた件数が 3 になったら break でループを抜けること
4. 打ち切りの判定は、要素を追加したあとに行うこと