【JavaScript】 インクリメント・デクリメントと後置・前置の違い

JavaScriptの演算子にインクリメント(Increment)とデクリメント(Decrement)というものがあります。
そして、その使用する位置により後置(Postfix)と前置(Prefix)にわけることができます。

今回は、インクリメントとデクリメントとは何か、後置と前置の違いについて解説します。

インクリメントは増加、デクリメントは減少という意味があります。
このことから、インクリメント演算子は、対象の変数に対して1を加算し、デクリメント演算子は1を減算します。

let a = 0;
a ++;  // a に 1 を加算し、 結果は 1
++ a;  // a に 1 を加算し、 結果は 2

上の例の ++ がインクリメント演算子です。
次の式と同じ意味となります。

a = a + 1;

let a = 0;
a --;  // a に 1 を減算し、 結果は -1
-- a;  // a に 1 を減算し、 結果は -2

上の例の -- がデクリメント演算子です。
次の式と同じ意味となります。

a = a - 1;

インクリメント・デクリメント演算子は変数に対して使用します。
次のように数値リテラルに対して使用すると構文エラーです。

let a = b + (1 ++); // Uncaught SyntaxError: invalid increment/decrement operand

変数の後で ++ または -- を使用すると、後置インクリメントまたは後置デクリメントです。
前で使用すると、前置インクリメントまたは前置デクリメントです。

前項の例では、前置でも後置でも結果は同じです。

しかし、次のように変数に代入をすると結果が変わってきます。

// 前置
let a = 0;
let b = 1 + (++ a) + 2;
// 結果： a = 1 , b = 4

// 後置
a = 0;
b = 1 + (a ++) + 2; 
// 結果： a = 1 , b = 3

前置は a をインクリメントした後、その値を使用して他の演算をおこない、bに代入します。
つまり上の例は、次のように置き換えることができます。

// 前置
a = a + 1;
let b = 1 + a + 2;

後置は、インクリメントをする前のaの値で演算をおこない、結果をbに代入後にaをインクリメントします。
つまり上の例は、次のように置き換えることができます。

// 後置
let b = 1 + a + 2;
a = a + 1;

一つの式で、同じ変数に対して複数回インクリメント演算をおこなうケースを考えてみます。

let a = 0;
let b = 1 + ( ++a ) + 2 + ( ++ a);
// 結果：a = 2 , b = 6

aは2回インクリメントしているので、最終的な結果は2です。

bは、結果が6になりました。
これは次のような計算がおこなわれたためです。

b = 1 + (1) + 2 + (2);

つまり、インクリメントの結果を次のインクリメントに引き継いでいます。

次に後置インクリメントを使用してみます。

let a = 0;
let b = 1 + ( a ++ ) + 2 + ( ++ a);
// 結果：a = 2 , b = 5

bの結果が5になりました。
これは次のような計算がおこなわれたためです。

b = 1 + (0) + 2 + (2);

つまり前置と同様に、後置インクリメントの演算を行ってから、次の前置インクリメントをおこなっています。
次の例は、この特徴を活かすことで簡潔なコードに書き換えることができます。

let count = 0;
let b = func(count);
count++;
b += func2(count);

次のように、書き換えることができます。

let count = 0;
let b = func(count++) + func2(count);

これは特殊なケースのような気がしますが、意外と遭遇します。
例えば、次のようなコードです。

    const obj={count:0};

    const func =  v => {
        const result = func2( obj.count );
        obj.count++;
        return result;
    };
    const func2 =  v => {
        return v * 100;
    }

    let a = func( obj );

ここで重要なのがfunc関数です。
func2( obj.count )　の結果を変数resultに格納した後、obj.countをインクリメントして、最後にresultを返しています。
3行まとめて、次のようにとても簡潔に記述できます。

return func2( obj.count++);

ぜひ、覚えておいてください。