最新！JavaScript入門講座ーWhile文をわかりやすく解説

プログラミングで繰り返し処理を行う場合はfor文を使うことが多いです。ですが、そのほかにも繰り返し処理を行うことのできる式があります。

それがwhile文です。while文も繰り返し処理ですが、for文とは少々使い方が異なります。
今回は、繰り返し処理を行うwhile文をわかりやすく解説していきます！

while文をわかりやすく解説

while文の解説

while文はfor文と違い、変数を初期化する必要がありません。
条件式がtrueである状態でのみ、繰り返し処理が行われます。そして、条件式がfalseになったとき、whileの処理を抜けます。
このような特性を持つので、意図的に無限ループを起こす、一定の条件を満たすまで処理を続ける、といったことが可能になります。

一方で、条件式にミスがあると、処理が永遠に続くといったことが起こるので注意が必要になります。

では、whileの具体的な使い方をみていきましょう。

let money = 100000;

while(money < 200000){
    money += 10000;
    console.log(money);
}

$ node while.js

110000
120000
130000
140000
150000
160000
170000
180000
190000
200000

実行するとこのような結果になります。
moneyが200000を超えたらループ処理が終了します。

whileの中で変数などを使いたいときは、ループの外側で初期化することが基本です。ループの中で初期化してしまうと、値がループするたびに初期化されてしまい値が変わりません。

次の例を見てみましょう。

let fx = 1000000;

while(fx > 0){
    console.log(fx);
    fx -= 100000;
}

$ node while.js

1000000
900000
800000
700000
600000
500000
400000
300000
200000
100000

実行するとこのようになります。
つづいてはfxという変数には1000000が代入されています。fxが0よりも大きい間だけ、実行されるので、fxが0になった瞬間、ループから抜けます。
なので、出力されるのは100000までになります。

無限ループの注意点

先ほどはwhileの例を示しましたが、ここでは注意点について解説していきます。
まずは例を見てみましょう。

let ng = 1000;

while(ng >= 1000){
    ng += 100;
    console.log(ng);
}

これを実行すると、処理が永遠に終わらない無限ループに入ることになります。
処理の内容としては、ngが100ずつ増加していきます。ですが、条件式はngが1000以上の場合に実行されるのでfalseになることがありません。

このように、条件式を間違えると、無限ループに入ってしまうので注意が必要です。

まとめ

では、今回のまとめに入ります。
今回は次のようなことを学びました。

では、ここまでとなります。お疲れ様でした。

参考文献

ループと反復処理 - JavaScript | MDN

ループは繰り返し何かを実行するための簡便な方法を提供します。本章では JavaScript で利用可能な反復処理を行う数々の文を紹介します。

developer.mozilla.org

ループと反復処理 · JavaScript Primer #jsprimer

for文やwhile文を使った反復処理についてを紹介します。また、同等の反復処理がArrayのメソッドでも実現できることについても紹介します。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org