【JavaScriptの基本】インクリメント演算子とデクリメント演算子における前置・後置の違い

JavaScriptでは、数値に1を足す場合や引く場合に、インクリメント演算子やデクリメント演算子が使われています。
しかし、これらにおける前置演算と後置演算の違いに対して、いまいちピンときていない人もいるのではないでしょうか。

今回は、前置インクリメント/デクリメントと後置インクリメント/デクリメントの違いを解説していきます。

インクリメント演算子とデクリメント演算子

まずはじめに、数値に1を足したり減らしたりするには、加算演算子や減算演算子で実現することができます。

let a = 3;
let b = 5;

a = a + 1; // 加算演算子で1を足す
b = b - 1; // 減算演算子で1を引く

// a → 4
// b → 4

しかし、インクリメント演算子やデクリメント演算子を使うことでより簡潔に書くことができます。

インクリメント演算子とは、++を使って対象の数値に1を加算するための演算子です。
また、デクリメント演算子とは、--を使って対象の数値に1を減算するための演算子です。

上記の例をインクリメント演算子/デクリメント演算子で表現すると以下のように書くことができます。

let a = 3;
let b = 5;

a = ++a // インクリメント演算子で1を足す
b = --b // デクリメント演算子で1を引く

// a → 4
// b → 4

前置演算と後置演算

インクリメント演算子とデクリメント演算子は、前置と後置に分けられます。
数値の前に演算子++/--を置く場合には、前置と呼ばれ、数値の後に演算子++/--を置く場合には、後置と呼ばれます。

let a = 3;

++a; // 前置インクリメント
a++; // 後置インクリメント

--a; // 前置デクリメント
a--; // 後置デクリメント

前置演算と後置演算の違い

ここまででインクリメント演算子とデクリメント演算子、それらの前置と後置についてかんたんに解説しましたが、今回の本題はここからです。
前置インクリメント/デクリメントと後置インクリメント/デクリメントは、前と後ろの置く場所によって異なる挙動が発生します。

前置演算と後置演算の振る舞い

まずは、かんたんに以下の例を見てみましょう。
ここでは前置と後置の振る舞いに注目するため、インクリメントのみ取り上げます。
デクリメントも同じ挙動となるため参考にしてください。

// 前置演算の場合
let a = 3;
let b = ++a;

console.log(a); // 4
console.log(b); // 4

// 後置演算の場合
let a = 3;
let b = a++;

console.log(a); // 4
console.log(b); // 3

インクリメントを使わずに表現

なぜ上記のように結果に違いが出たのか疑問を持つ人もいるかもしれません。
では、インクリメントを使わずに前置演算と後置演算を表現してみるとどうでしょうか。

// 前置演算の場合
let a = 3;
let b;

a = a + 1;
b = a;

console.log(a); // 4
console.log(b); // 4

// 後置演算の場合
let a = 3;
let b;

b = a;
a = a + 1;

console.log(a); // 4
console.log(b); // 3

この結果を紐解いていくと、以下のような処理の流れに違いがあることに気が付きます。

// 処理の流れ
* 前置演算：「変数aを加算」→「変数bに変数aを代入」という流れで処理されているため、aとbのどちらも出力結果が4になる
* 後置演算：「変数bに変数aを代入」→ 「変数aを加算」という流れで処理されているため、aが4、bが3という出力結果になる

これを踏まえて考えてみると、なぜ前置インクリメントという名前なのか、なぜ後置インクリメントという名前なのか謎が解けるのではないでしょうか。
つまり、加算するタイミングが先に来るのが前置インクリメント、後に来るのが後置インクリメントということになります。

繰り返し処理における前置演算と後置演算の振る舞い

具体的な実践の場としては、for文などの繰り返し処理が行われる際に、前置演算と後置演算の違いの理解が役に立ちます。
以下のように処理結果の違いを見比べてみると分かりやすいです。

// 前置演算の場合
for (let i = 0; i <= 5; ++i) {
    let a;
  a = ++i;
    
    console.log("i = " + i);
    console.log("a = " + a);
}
// "i = 1"
// "a = 1"
// "i = 3"
// "a = 3"
// "i = 5"
// "a = 5"

// 後置演算の場合
for (let i = 0; i <= 5; i++) {
  let a;
    a = i++;

    console.log("i = " + i);
    console.log("a = " + a);
}
// "i = 1"
// "a = 0"
// "i = 3"
// "a = 2"
// "i = 5"
// "a = 4"

明らかに出力結果が異なることが分かります。
繰り返し処理を行う場合には、前置演算と後置演算の違いを理解していないと、予期していない処理結果に繋がる場合があるため注意が必要です。
変数に代入するよりも前に数値を足したいのか、変数に代入した後に数値を足したいのか、目的によって使い分けられるすることが大切です。