「はじめてのJavascript」5章の前置・後置インクリメントの仕様がわからない

Question

以下、本に出た例題のわからない箇所です。

let x = 2;
console.log(x++ + x++) //5
//後置は1加える前の数字だから4になると思ったのに、5になった何故？

console.log(++x + ++x) //11
//①前置は1加えた後の数字と出てるから6になると思ったのに、5になった何故？
//②あと何故11になる？前の5が引き継がれてる？

console.log(x++ + ++x) //14
//前置と後置の組み合わせだから5になると思ったが何故14に？

console.log(++x + x++) //18
//5じゃないの？

console.log(x) //10
//もはや何故10なのかわからない。上に代入された式が破壊的になってたとしてもどのような過程で10になったのかわからない。

どなたか優しい人、内部でどういう風になってるか1つ1つ分解して説明してほしいです。
初歩的な質問で申し訳ございません。
よろしくお願いいたします。

#追記(2021.8.18)

色々な方に回答いただき、自分なりに理解したことを以下の通りまとめます。

//前提：インクリメントがある度に1は加算される。なので例えばインクリメントが10個あったら10加算される

//前置インクリメント：1を加算し、その後も1を評価する
//後置インクリメント：1を加算するが、その後は1を評価しない


let x = 2;
console.log(x++ + x++) //5
//最初のx++に2+1が入り、後置インクリメントなので、+1が評価されず、計算後は2となる。結果の3が次のx++に入る
//次のx++は前のx++の3が入り、3+1となる。後置インクリメントなので+1が評価されず、計算後は3となる。結果の4が次のx++に入る。

console.log(++x + ++x) //11
//x++に前の4が入り、4+1。前置インクリメントなので+1を評価し、5となる。
//次のx++に5が入り、5+1、前置インクリメントなので+1を評価し、6となる。

console.log(x++ + ++x) //14
//前の数字がなので6、6+1、後置インクリメントなので+1を評価しないので結果は6となる。
//前の数字が7なので7+1、前置インクリメントなので8となる。

console.log(++x + x++) //18
//上の3つの式と同じ感じ

console.log(x) //10
//インクリメント(x++)が8回宣言されたので2+8

Answer 1

まず、xの中身はリセットされませんので、どんどん増えていきます。

上に代入された式が破壊的になってたとしてもどのような過程で10になったのかわからない。

インクリメントを8回行っているので、2+8で10になります。

let x = 2;
console.log(x++ + x++) //5


// ここでは x=4

console.log(++x + ++x) //11

// ここではx=6

console.log(x++ + ++x) //14

// ここではx=8

console.log(++x + x++) //18
//5じゃないの？

Comments

[maisumakun]

なお、JavaScriptの場合、加算演算も「左から評価する」と決められていますので、結果は一貫します。C言語のような「未定義の動作」を心配する必要はありません。

…が、こんなコードを書いても読みづらいのでやめたほうがいいです。

[Hinoarashi.]

回答ありがとうございます！
コードが読みづらいという意味が理解できました。。

ありがとうございました！

Answer 2

console.log(x++ + x++) //5
//後置は1加える前の数字だから4になると思ったのに、5になった何故？

まず、x++されてxが2⇒3となり、もとの2が加算式に渡されます。
次に、x++されてxが3⇒4となり、もとの3が加算式に渡されます。
結果、2+3が実行され、5がconsole.logで出力されます。

そして、次の処理に進みます。

console.log(++x + ++x) //11

まず、++xされてxが4⇒5となり、5が加算式に渡されます。
さらに++xされてxが5⇒6となり、6が加算式に渡されます。
結果、5+6が実行され、11がconsole.logで出力されます。

Comments

[Hinoarashi.]

コメントありがとうございます！大変参考になりました！

Answer 3

後方インクリメントは読み取ったあとに加算するので、
x = 2
a = x++
これでa=2,x=3になります。
なので、
x++ + x++
は
2 + 3 = 5
であり、計算後x=4です。

一方前方インクリメントは加算してから読み取るので、その状態で
b = ++x
としたらb=5,x=5になります。
なので
++x + ++x = 5 + 6 = 11
であり、
x = 6
になります。

あくまでインクリメントは元の値に加算をするモノなので、使えば前方であれ後方であれxは加算されていくことになります。
x+=1してからxを読みとるか、xを読み取ってからx+=1するかの違いです。

---

追記

ちょっと分かりやすく書いてみましょう。
まず後方インクリメントについて、

x = 1
a = x++

は、

x = 1
a = x
x += 1

と同じです。
なので、

x = 2
y = x++ + x++

なら、

x = 2
a = x
x += 1
b = x
x += 1
y = a + b

となります。
これならa=2,b=3,x=4,y=5となることが理解しやすいでしょうか？

逆に、前方インクリメントは、

x = 1
a = ++x

が、

x = 1
x += 1
a = x

になります。
なので、

x = 4
y =++x + ++x

が、

x = 4
x += 1
a = x
x += 1
b = x
y = a + b

でa=5,b=6,x=6,y=11になるんですね。

Comments

[Hinoarashi.]

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

>x = 2
a = x++
これでa=2,x=3になります。
なので、
x++ + x++
は
2 + 3 = 5

上記少しわからないのですが、
x++ + x++は何故2 + 3なのでしょうか？
もしかして後置インクリメントが評価してるのは、2番目のx++を指していて、
1番目のx++は何も処理が行われないのでしょうか？

>であり、計算後x=4です。

計算後とは何を指すのでしょうか・・
僕からしたら2+3だから計算後は5になると思ったのですが。。

[kairi003]

追記しました。要はインクリメントはx+=1の省略ということが伝わるとよいのですが…
console.logは計算結果を出力しているだけで、それがxに代入されるわけでは無いのです。
追記の例では、console.logで出力される分をyに代入しています。

[kairi003]

もちろん、インクリメントを使ったからといって変数aやbが勝手に宣言されるわけではなく、あくまで計算上こういった動作をしています、という例です。

[Hinoarashi.]

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

ishina_yumさんの回答も参考にさせていただき、考えたところ、イメージ的には以下のような感じじゃないかと推測しました。

let x = 2;
console.log(x++ + x++)

①最初のx++は2+1で後方インクリメントなので結果は3になるが、足した1の値を評価しないので、2となる。
②次のx++は最初のx++の結果を引き継いでるので3となり、1足すので結果は4になる。しかし、後方インクリメントなので1足した数は評価しないので3となる。
③結果2+3になり、値は5となる。
④次の++x + ++xは前方インクリメントなので、②の4に1をそのまま足せるので5
⑤次の++xは5に1を足して、そのまま出力されるので6
⑥結果5+6になる。

上記のような感じでインクリメントが前にあるか後ろにあるかで、1を加算(評価)するかしないかを決めるという感じでしょうか？
ただし、前方だろうが後方だろうが、1を足した結果は変わらないのでインクリメントが増えれば増えるほどxは1ずつ増えていくと思ってます。
なんか書いていてよくわからなくなってきました。。

難しいですね、インクリメントって。

[kairi003]

その理解で問題ないです。要は1足すのがxを読む前か後かの違いです。

まあ仰る通り可読性が下がるので普通はあまり複雑な式では使いません。
ループ中でconsole.log(cnt++)としてカウントと出力を同時にするくらいの使い方が一般的だと思います。

[Hinoarashi.]

わかりました！色々ありがとうございました！