for文に続くif文の処理

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
下記のコードの結果が5になる理由がわかりません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

Javascript
for (i = 0; i < 3; i++) {
i = i + 1;
}
if ( i % 2 === 0 ) {
++i;
} else {
--i;
}
alert(i);

### 試したこと

for文の結果、iの値は3になり、if文の結果falseを返すので値は2になると思います。
しかしながら、実際にコードを実行するとfor文の結果は3になりますが、そのあとのif文の結果は5になります。
3%2===0はfalseなので値がマイナスされて2になるはずだと思ったんですが、5になるのはどういう理由からなんでしょうか？
仮にfor文の中にif文が含まれていたとしてもfor文で値が1になり、if文でfalseを返すので0に戻り計算が永遠に終わりません。
いくら考えてもiの値が3を超える理由がわからなかったので質問させていただきました。


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

ここにより詳細な情報を記載してください。

Answer 1

まず、for の結果が3 というのが勘違いかと思います。結果(for 文を抜けた後の i の値)は 4 になります。

そのため、条件 i % 2 === 0 が true となってさらに加算され、最終的に 5 になります。

for分の処理の流れを展開すると、以下のようになります。

i = 0 // for 文の初期化処理 i=0
i = i + 1 // for 文の中の処理 i = 1
i++ // for 文の繰り返し処理 i = 2
i < 3 // for 文の条件判定 = true により繰り返し
i = i + 1 // for 文の中の処理 i = 3
i++ // for 文の繰り返し処理 i = 4
i < 3 // for 文の条件判定 = false により、繰り返し終了
// 以降if文へ

ポイントは、for 文の繰り返し処理に i++ を記載しておきながら、for 文の中の処理に i = i + 1 を記載してしまったがために、一回のループで i の値が 2 ずつ上がっている点にあります。そのため、i は常に偶数となり、 if の条件判定の結果は常に true となります。

Comments

[Demerara]

for文を抜ける時にi++となることをすっかり失念してました。
大変わかりやすかったです。ありがとうございました。

Answer 2

forループ中にループ変数に代入すると意味不明な挙動になるのでご法度だと思いますが、

for (i = 0; i < 3; i++) {
    console.log("1:"+i)
    i = i + 1;
    console.log("2:"+i)
}
console.log("3:"+i)

if ( i % 2 === 0 ) {
    ++i;
} else {
    --i;
}
alert(i);

こうやってfor文中および抜けたタイミングでiの値がどう変化したのかを追えばわかるんじゃないですかね。

Comments

[Demerara]

回答ありがとうざいます。
回答にあるコードの意味がわからず、また暫く頭を抱えていましたが、"1:"や"2:"というのは処理の順番ということですね。1番目の位置では値は0、2番目の位置では1。理解した上で見るとこちらの回答も大変わかりやすいです。ありがとうございました。

Answer 3

for文を抜けた時点ではi は４となります
１行づつどう動作するのか追っていきましょう。

Comments

[Demerara]

回答ありがとうざいます。
1行ずつ何度も考えたのですが、for文の部分だけをコンソールに打ってEnterを押すと3と出力されるので混乱してしまいました。

Answer 4

JSという言語が自由すぎて元ソースでも動いてしまうようですがバグの温床にしかなりません。
もっとスコープを意識した書き方にしましょう。

let result = 0
for (let i = 0; i < 3; i++) {
  result += i
}
if (result % 2 === 0) {
  result++
} else {
  result--
}
alert(result)

これであれば2になるはずです。

Comments

[退会済みユーザー]

変数宣言時は必ずletかconstをつけましょう。

[Demerara]

回答ありがとうございます。
上記のコードはsololearnというアプリで出題された問題で、5という正解に納得がいかなく実際に試したりあれこれ考えたりしたんですが、全くわからなかったので質問させていただきました。
アドバイスは自身でコードを書く際の参考にします。ありがとうございました。