JavaScriptのcontinueの使い方！サンプルコード3つ！

JavaScriptのcontinueの使い方について書いています。
continueについて解説した後に、下記のことについて書きました。

それぞれにサンプルコードをつけて解説しています。

continueの使い方

continueを使うことで、ループ中に後続の処理をスキップすることができます。
continueが呼ばれたときに、ループの先頭に戻って処理を続けます。

例えば、下記のようにcontinueを使うことができます。

for (let i = 0; i < 7; i++) {
  if (i === 5) {
    continue
  }
  console.log(i)
}

for文で繰り返し処理をしています。
変数iが始めは「0」で、「7」になるまでの7回繰り返します。

for文の中の処理ですが、変数iが「5」だったときにcontinueしています。
そのため、変数iが「5」のときには後続の処理がされずに、ループの先頭に戻ります。

ループの最後にconsole.logで変数iの値を出力しています。
プログラムを実行して内容を確認すると、下記のようになりました。

0
1
2
3
4
6

変数iが「5」のときは、continueされるため後続の処理がスキップされました。

continueをラベルで使う

continueをラベルを指定して、使うこともできます。
下記は九九を「1 x 1」〜「5 x 5」まで出力するプログラムですが、continueを使って「n x 3」以降をスキップするようにしています。

label1: for (let i = 1; i < 6; i++) {
  label2: for (let j = 1; j < 6; j++) {
    if (j === 3) {
      continue label1
    }
    console.log(`${i} x ${j} = ${i*j}`)
  }
}

変数iがnの段になります、変数jがかける値です。
for文を2重ループにして、それぞれラベルをつけました。

2重ループの中の処理で、変数jが「3」だったら、label1にスキップするようにしました。
これで、最初のループに戻るため、変数jが「3」以降の繰り返しはスキップされます。

出力結果を確認すると、下記のようにスキップされたことが確認できました。

1 x 1 = 1
1 x 2 = 2
2 x 1 = 2
2 x 2 = 4
3 x 1 = 3
3 x 2 = 6
4 x 1 = 4
4 x 2 = 8
5 x 1 = 5
5 x 2 = 10

continueはforEachで使える？

continueは配列のforEachメソッドでは使うことができません。
例えば、下記のように使おうとするとエラーになります。

const fruits = ['apple', 'orange', 'grape', 'peach', 'lemon']

fruits.forEach((fruit) => {
  if (fruit === 'grape') {
    continue
  }
  console.log(fruit)
})

このプログラムを実行すると、下記のSyntaxErrorが発生します。
SyntaxError: Illegal continue statement: no surrounding iteration statement

配列をループする方法として、for...ofもあるので、そちらを使うことも検討してみてください。
for...ofを使うと、下記のようにエラーにならずcontinueできます。

const fruits = ['apple', 'orange', 'grape', 'peach', 'lemon']

for (fruit of fruits) {
  if (fruit === 'grape') {
    continue
  }
  console.log(fruit)
}

最初にfruits変数に果物名を5つ入れて配列を作っています。
その後にfor...ofを使って、ループ処理しています。

fruit変数に配列要素がひとつずつ代入されながらループ処理されます。
fruit変数が「grape」だったときにcontinueするようにしました。

ループの最後にfruit変数をconsole.logで出力しています。
出力結果を確認すると、下記のように出力されました。

apple
orange
peach
lemon

fruit変数が「grape」だったときは、continueされてループの先頭に戻るので出力されていません。

continueとbreakの違い

continueは呼ばれたときに、ループ先頭に戻るため、後続の処理がスキップできる機能でした。
breakは呼ばれると、ループ処理を抜ける機能になります。

breakを解説した、下記の記事に比較するサンプルコードを書いたので確認してみてください。
・JavaScriptのbreakの使い方！(ループを抜ける)

終わりに

今回はJavaScriptのcontinueの使い方について書きました。

記事をまとめると、下記になります。