[JavaScript入門]while文の使い方(繰り返し処理)

JavaScriptのwhile文について書いています。

最初にwhile文の使い方を、実際に動作するプログラムと一緒に解説しています。
その後に、while文の下記について書きました。

while文の使い方

JavaScriptのwhile文は、条件が合っている間(trueのとき)、whileブロック内の処理がループできる構文です。

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

let count = 0

while (count < 10) {
  console.log(`count value: ${count}`);
  count++;
}

最初にcount変数に数値の「0」を代入しています。

次の処理で、while文を使っています。
丸括弧「()」の中に条件を書きました。

条件として「count < 10」を指定しています。
count変数が10になるまでの間、波括弧「{}」の中の処理をループします。

ループ処理では、console.logで文字列の「count value:」とcount変数の値を一緒に出しています。
その後にcount変数の値をひとつ足しています。

こうすることで、count変数の値が0から9まで足されていきます。
そして、10になると、条件に合わなくなるのでループを抜けます。

プログラムを実行すると、下記のように結果が出力されました。
0から9までの10回、ループ処理されていることが確認できました。

count value: 0
count value: 1
count value: 2
count value: 3
count value: 4
count value: 5
count value: 6
count value: 7
count value: 8
count value: 9

while文の無限ループとは？

while文の無限ループは、条件がずっと合っている(true)の状態になってしまい、ループが終わらないことです。
例えば、下記のようにカウントアップを忘れると、無限ループになってしまいます。

let count = 0

while (count < 10) {
  console.log(`無限ループ！！ ${count}`);
}

最初のプログラムを少し変えて、count変数を足している箇所を削除しました。
このようにcount変数の値が変わらない状態だと、count変数の値はずっと「0」のままです。

そのためwhile文の条件が、いつまでも合っている状態(trueのまま)になり、ループ内の処理がずっと繰り返されます。
このようなバグを作り出さないためにも、条件文の箇所には注目して、しっかりとループを抜けれるようになっているか確認するようにしましょう。

while文にtrueを入れて無限ループ

while文は条件が合っている間は繰り返されると書いてきました。
正確には、論理値のtrueが入っている間、繰り返されます。

比較演算子を使って、「0 < 10」などと比較すると、論理値が返ってきます。
その論理値がfalseになると、ループの処理を抜けるといった形です。

そのため、while文に直接trueを指定することも可能です。
こうすると、条件は書いていませんが、ずっとtrueのためループ処理が続きます。

while (true) {
  console.log(`無限ループ！！`);
}

while文のループ処理を抜ける(break)

while文をループ条件とは別に、一定の条件に当てはまったときにループを抜けたいときには、break文を使います。
例えば、下記のように使うことができます。

let fruits = ['apple', 'orange', 'banana', 'peach', 'cherry'];
let i = 0;

while (i < fruits.length) {
  let fruit = fruits[i];
  console.log(fruit);

  if (fruit === 'banana') {
    break;
  }

  i++;
}

最初にfruits変数に果物名を並べた配列を代入しました。
その次に変数iを作って、0を代入しました。(カウント用の変数です)

そして、while文を使っています。
条件としては「i < fruits.length」としています。
カウント変数が、fruits配列の要素数より少ない間、繰り返されます。(0 < 5)

ループ処理の中では、最初に配列の要素を取得しています。
「fruits[i]」で、要素番号で指定した配列の要素をひとつ取得できます。
要素番号のiは最初は0なので、appleが取り出されます。

その次の行で、console.logで取り出した要素を出力しています。
次のif文で、fruit変数をbananaか比べています。
bananaだったときにbreak文を使うようにしました。

最後に変数iをひとつ足して、ループ処理が終わります。

ループ処理を3行で、まとめると下記のような感じです。

break文が使われているので、bananaの要素が出力された後はループ処理が終わります。
結果、プログラムを実行すると、下記のようになります。

apple
orange
banana

break文を使って、ループ処理の途中で、処理を抜けたことが確認できました。

while文でスキップする(continue)

while文で、処理をスキップしたいときにはcontinue文を使います。
continue文を使うと、ループの先頭に戻って処理を続けます。

条件を抜ける処理を意識しないとバグになりやすいので、気をつけましょう。
例えば、下記のように使います。

let fruits = ['apple', 'orange', 'banana', 'peach', 'cherry'];
let i = 0;

while (i < fruits.length) {
  let fruit = fruits[i];

  if (fruit === 'banana' || fruit === 'peach') {
    i++;
    continue;
  }

  console.log(fruit);

  i++;
}

先ほどのプログラムを少し変えてます。
fruits配列の要素数の間ループしているところは変わっていません。

ループ処理の中を変えています。
ループ処理の最初にfruit変数に配列の要素をひとつ取り出しています。

次に、if文でfruit変数が「banana」または「peach」のときに、下記の処理をしています。

ここで、変数iのカウントアップを忘れてしまうと、ずっとfruit要素が変わらないまま無限ループになってしまいます。

if文の条件判定が終わった後は、console.logでfruit変数の内容の出力をしています。
最後に変数iのカウントアップをして、ループ処理が終了です。

プログラムを実行して、結果を確認すると、下記のようになりました。

apple
orange
cherry

fruit変数が「banana」または「peach」のときには、continue文で処理をスキップして、先頭に戻っていました。
そのため、2つの要素は出力されずに、その他の要素だけ出力されたことが確認できました。

おわりに

今回はJavaScriptのwhile文について書きました。

記事の内容をまとめると、下記のようになります。

while文を使ってきましたが、while文では条件しか書かないため、バグを作り出しやすいのかなと感じています。
通常のループをする場合は、for文を使うようにした方が良いかと思います。

また、配列の要素数分ループするときには、forEachが使えるので検討してみてください。