初心者向け！javascriptのbreak、continueの使い方【現役SEが紹介】

javascripのbreakやcontinueって何なのかを知りたい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptのbreakとcontinueについて解説していきます。

breakとcontinueとはfor文などの繰り返し処理で使用します。
そこまで、頻繁に使用するものでもありませんが、システムの仕様によってはこのbreakとcontinueを使う必要がでてきますので、繰り返し処理を学ぶついでに身に着けておきましょう！

javascripのbreakとcontinueとは何か

javascriptのbreakとcontinueがどういったものかについて、はじめに簡単に説明しておきます。

両方とも繰り返し処理の中で記載する文法で、どちらも処理を中断させる意味合いで使用します。

以下のようなイメージです。

breakは繰り返し処理を終了させる。

continueは繰り返し処理は終了せず、次の繰り返しの条件式に飛びます。
もちろん、繰り返し条件を満たさなかった場合は繰り返しは終わります。

javascripのbreakとcontinueの書き方

では、javascriptのbreakとcontinueの書き方をお伝えします。

breakの書き方

まず、break文は以下のような形です。

for (let i = 0; i < 10; i++) {
  console.log(i);
  if (i === 5) {
    break;
  }
  console.log('繰り返し処理：' + i);
}

上記を実行した結果が以下になります。

> 0
> "繰り返し処理：0"
> 1
> "繰り返し処理：1"
> 2
> "繰り返し処理：2"
> 3
> "繰り返し処理：3"
> 4
> "繰り返し処理：4"
> 5

if (i === 5)の条件内にbreakを書いてみました。
こうすることで5回目の繰り返しのときに処理が終了します。
break文の後にある処理も実行されません。（6行目のconsole.logは実行されない）

continueの書き方

続いて、continue文は以下のような形です。

for (let i = 0; i < 10; i++) {
  console.log(i);
  if (i === 5) {
    continue;
  }
  console.log('繰り返し処理：' + i);
}

先ほどのbreakをcontinueに変更しただけです。
結果は以下のような感じになります。

> 0
> "繰り返し処理：0"
> 1
> "繰り返し処理：1"
> 2
> "繰り返し処理：2"
> 3
> "繰り返し処理：3"
> 4
> "繰り返し処理：4"
> 5
> 6
> "繰り返し処理：6"
> 7
> "繰り返し処理：7"
> 8
> "繰り返し処理：8"
> 9
> "繰り返し処理：9"

いかがでしょうか。先ほどのbreakと違い繰り返し処理が終わっていないことが分かるかと思います。
5回目の処理でcontinueが実行されるように記載しているので、5回目のcontinue文以降の処理は実行されずに次の繰り返し処理が実行されます。

どういった時に使用するのか

javascriptのbreakとcontinueがどういった時に使用するのかお伝えします。

以下のケースでよく使われるかと思います。

よく複数データをチェックするときとかでfor文を書いたりもするのですが、例えばその中身のデータにあるデータがあるかどうかチェックする場合とかにbreak文とかが使えたりします。

対象のデータを見つけた場合、そこで処理を終了することで余計な繰り返し処理をしなくて済みます。
continueの場合だと、対象のデータがあるときだけ処理したい場合があったとして、その対象のデータがない場合はcontinueを使用することで後続の処理をせず、次の繰り返しを実行させることができます。

上記、breakとcontinueも使用することでプログラムの可読性をあげることができます。
もちろんbreakとcontinueを使用しなくてもif文を使用すれば同じようなことを実現することが可能です。

ただ、if文の中の処理が長くなってしまったり、if文の範囲が広いせいでその中でまた条件分岐があるとネストして書く必要が出てきますので、どんどん階層が深くなっていきます。

なので、あらかじめbreakとcontinueで処理すべきかどうかを判断して使用することによって、繰り返し処理内を読みやすくかくことができます。

最後に

javascriptのbreakとcontinueについて説明しました。

まとめると以下の通りです。

ざっくり上記のイメージを持っておけばよいかと思います。