MENU

JavaScript変数構文サンプルコード

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

更新日:2020/10/07

 

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++);

 

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

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php