#はじめに
こんにちは。
今日は、昨日に引き続き、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