JavaScriptの制御構文(2)〜while/do...while命令〜

はじめに

こんにちは。
今日は、昨日に引き続き、JavaScriptの文法の復習をしておりまして、こちらの方でまとめてみます。今回から複数回、繰り返し処理の構文について復習していきます。

繰り返し処理には、
* while
* do…while
* for
* for…in
* for…of
などがあります。
その中でも、今回は、while/do…while命令に焦点を当ててみます。

While命令とdo...while命令

まずは、それぞれの命令の書き方について！
while命令

while (条件式) {
    条件式がtrueである間に繰り返す処理
}

do...while命令

do {
    条件式がtrueである間に繰り返される処理
} while (条件式); 

do...while命令において、最後のwhile(条件式)の後にセミコロンをつけるのを忘れない！

whileの位置が違うだけで、同じような処理に見えます。一体、どこが違うのでしょうか。

while命令とdo...while命令の違い

whileの位置の違いが重要です。
whileの後に続く条件式を「いつ判断するのか」によって、処理結果が変わってきます。

while命令の場合
前置判断。
処理を実行する前に、条件式を判断し、trueであれば、実行する。falseであれば、実行しない。場合によっては、最初からfalseであれば、処理を全く実行しないこともありうる。

do...while命令の場合
後置判断。
最後にwhile(条件式)を配置していることからも、後から、条件式を判断し、falseが出てきたら終わり。falseであろうがなんであろうが、とにかく最低1回は処理を実行する。で、実行してからtrueかfalseか判断する。trueであれば、また処理を継続して、falseであれば、そこでストップする。

実際のコードで比較してみましょう！

while命令ver.

let x = 8;
while (x < 10) {
    console.log(x);
    x++;
}
// 結果
// 8
// 9

do...while命令ver.

let x = 8;
do {
    console.log(x);
    x++; 
} while (x < 10); // すでに1加算されたxと条件式を比較する事になる！

// 結果
// 8
// 9

後置判断でも、同じ挙動になったのは、do…while命令で、x=9になった時のループ処理で、最後にx++でx=10になり、その直後に条件判断をすると、x=10は、条件式x<10を満たさないからfalseになり、処理が終了するからです。

もし仮に、次のような、コードを実行するとどうなるのでしょうか。
while命令ver.

let x = 10;
while (x < 10) {
    console.log(x);
    x++;
}

// 結果
// 何も起こらない

do...while命令ver.

let x = 10;
do {
    console.log(x);
    x++;
} while (x < 10);

// 結果
// 10

上記のように、後置判断である、do…whileは最低でも1度はループ処理を実行するので、xの値が表示されるが、最後に条件式を判定してみると、falseになるので、処理は終了します。

しかし、前置判断である、while命令の場合は、初期値を判断するため、初期値がすでに条件式を満たさない10が来てfalseになったので、処理の実行には至らず、そこで、終了してしまったので、consoleには何も表示されませんでした。

復習していて、
どこで条件が判断されるのかだけに囚われず、どこで何がどう判断されるのか、処理の順番や細部に気を付けることが重要だなと感じました！

個人開発でも、あまり、while/do..while命令を利用することがなかったので、詳しく理解できていませんでしたが、これから何かの機会で利用できたらなと思います！！

理解不足による不備等ございましたら、コメントをお願い致します！

参考文献・資料

山田祥寛著『[改訂新版]JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』(2018)
※第1刷は、2016年。

do...while命令の挙動の理解がきちんとできていなかったので、teratailにて、質問をさせて頂きました。
https://teratail.com/questions/284149