はじめに
JavaScriptで演算を行う時、予想と違う結果になって悩んだことはありませんか？
バグのもとにもなりますし、理由がわからないと修正方法もわからず困ってしまいますよね。
この記事では、よくある原因の１つである前置演算・後置演算の挙動の違いについて解説します。
意外に正しく理解できていないことも多いので、自信のない方はぜひこの機会に学習してくださいね。
前置演算・後置演算とは
まず、前置演算・後置演算とは何かについて説明します。
インクリメント・デクリメント
JavaScriptに限らず、多くのプログラミング言語に存在する演算方法としてインクリメント・デクリメントがあります。
前置演算と後置演算はこの演算に関わるトピックであるため、先にこの内容について理解しておきましょう。
インクリメント（increment）は英語で増加の意味で、値を１増やすことです。
下記のように変数の横にプラスを２回書くとインクリメントされて値が１増えます。
var x = 10; x++; //インクリメント console.log(x); //11
デクリメント（decrement）は英語で減少の意味で、値を１減らすことです。
下記のように変数の横にマイナスを２回書くとデクリメントされて値が１減ります。
var x = 10; x--; //デクリメント console.log(x); //9
前置演算・後置演算とは、このインクリメント・デクリメントを変数の前に書くか（前置）、後に書くか（後置）のことを指します。
前置演算の場合
前置演算では、変数の前に演算子を書きます。
例えばインクリメントする場合は下記のようになります。
var x = 10; ++x; //前置演算 console.log(x); //11
後置演算の場合
後置演算では、変数の後に演算子を書きます。
例えばインクリメントする場合は下記のようになります。
var x = 10; x++; //後置演算 console.log(x); //11
変数単体の演算では同じ結果になる
上記のように、変数x（初期値：10）について、前置・後置に関わらず演算後の変数の値は同じ（11）です。
この通り、変数単体で演算を行う場合の結果は前置演算・後置演算とも同じとなります。
変数への代入結果
前置演算・後置演算で挙動が異なるのは別の変数への代入時です。
下記の例を見てください。
var x = 10; var y; var a = 10; var b; var y = ++x; //前置演算 var b = a++; //後置演算 console.log(x); //11 console.log(y); //11 console.log(a); //11 console.log(b); //10
このように、前置演算と後置演算で代入先の変数の値が異なっていますね。
一体なぜなのでしょうか。
前置演算と後置演算の違い
実は、前置演算では先にインクリメント（またはデクリメント）を行ってから他の処理を行い、後置演算では先に他の処理を行ってから最後にインクリメント（またはデクリメント）を行うという挙動の違いがあります。
文章では理解しづらいため、実際にインクリメントするときに起きていることをコードを見ながら確認しましょう。
前置演算で実際に起きていること
前置演算では先にxをインクリメントした後、yにxを代入します。
var x = 10; var y; y = ++x; //「++x; の後に y = x;」と同じ console.log(x); //11 console.log(y); //11
そのため、前置演算での代入の後、yは１増えた後のx（つまり11）、xはインクリメントされた値（つまり11）となる訳です。
後置演算で実際に起きていること
後置演算では先にbにaを代入した後、aをインクリメントします。
var a = 10; var b; b = a++; //「b = a; の後に a++;」と同じ console.log(a); //11 console.log(b); //10
そのため、後置演算での代入の後、bは１増える前のa（つまり10）のまま、aはインクリメントされた値（つまり11）となる訳です。
まとめ
JavaScriptでの前置演算・後置演算の違いについて解説しました。
実はJavaScriptに限らず、C言語やJava等の一般的なプログラミング言語でも同じ違いがあります。
慣れるまではややこしいですが「前置演算は（代入の）前に演算」「後置演算は（代入の）後に演算」と語呂合わせで覚えるのがおすすめです。
正しく理解し使い分けて、バグを未然に防ぎましょう！
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
