制御構文においての記述順の処理

Question

プログラミング初心者です。
javascriptの基本的な制御構文についてご教授願います。

while文で、下記ソースコード①は理解できました。
しかし、ソースコード②の期待値に対しての結果が違いました。
そもそもの記述する順番が違うだけという話ですが、x < 5 は、「xの値が5より低ければ命令を繰り返す」
ということであれば、結果の”5”は何故出力されるのはでしょうか。

以上、よろしくお願いします。

該当のソースコード

①
let x = 0;
while (x < 5) {
  console.log(x); 　　　　//期待値【 0,1,2,3,4 】
  x++;　　　　　　　　　　  //結果　【 0,1,2,3,4 】
}

②
let x = 0;
while (x < 5) {
  x++; 　　　　　　　　　　//期待値【 1,2,3,4 】
  console.log(x);　　　  //結果　【 1,2,3,4,5 】
}

試したこと

②ソースコードを、while (x <= 5) にした場合の結果は【 1,2,3,4,5,6 】

補足情報（FW/ツールのバージョンなど）

使用エディタ:vscode（ver1.54.1）

Answer 1

もしかして、「while文は、条件式が成立するかどうかを常に監視しており、成立しなくなった瞬間に繰り返しを終了する」のだと考えていませんか? それは誤った理解です。

実際にwhile文が条件式をチェックするのは、「最初の処理を始める前」の時点と、「一回分の処理を終えて、次の処理を始める前」の時点です。処理とは、ここでは{}の内部に書かれたx++:とconsole.log(x);を指しています。

ですから、②ではx++;によってxの値が5になったからといって、その時点で繰り返しが終了するわけではありません。console.log(x);が実行されてから、条件式のチェックが行なわれて繰り返し処理が終了します。

Comments

[kunionick]

回答ありがとうございます！

全くその通りの理解でした。
すみません、うまく言葉に出来ませんが...
console.log実行後＋1され次の処理を始めるのと、＋1され、console.log実行して次の処理を始めるのとでは違いますよね。
処理終了の段階で、もうすでにconsole.logで出力してしまっているから結果は「5」までということですね。
とても勉強になりました。
どうもありがとうございます！！

Answer 2

whileの段階でxが４の場合、
その後で、x++ してるので、console.logでは５になりますよね

Comments

[kunionick]

ご回答ありがとうございます！
何となくわかった気がしてきました。

②の場合、判定後にconsole.logで出力するまでにもう一度1を足しているので期待値＋1が出力されているという考えで正解でしょうか。

[y_waiwai]

１の場合は、まずconsole.logされてるので４がでます。
その後で５になります
２では、５になってから、console.logされてますね

[kunionick]

再度回答ありがとうございます！

記述された順番に処理を行っていくということを理解しました。
貴重なお時間をどうもありがとうございました。
とても勉強になりました！