【Javascript】「++」のような、インクリメント演算子の挙動には注意

インクリメント/デクリメント演算子ってなに？

JSのちょっと面白い挙動を勉強したので、備忘録も兼ねて書きます。

今回取り扱うのは、「インクリメント演算子」と「デクリメント演算子」というやつです。

x = ++x;
y = --y;

こんなやつ。

「++」がインクリメント演算子で、「--」がデクリメント演算子です。

こいつらが何をしているかというと、

x = x + 1;
y = y -1;

このように、変数自身に1を足したり引いたりしてくれています。

「++」を変数の前に置く（前置演算）のと、後ろに置く（後置演算）ので挙動が変わる

この演算子の注意点は、「置く場所を気をつけろ」ということです。

実は、インクリメント/デクリメント演算子は、変数の前にも後ろにも置くことができます。

それぞれ挙動が異なるので、注意が必要です。

前に置く場合の挙動（前置演算）

var a = 1;
var b = ++a;

console.log(a);
=>2

console.log(b);
=>2

変数a, b共に1足されていることがわかります。

「++」を変数の前に置くと、「変数aをインクリメントしてから、変数bに代入する」という挙動になります。

だから、どっちも2になっているわけですね。

後ろに置く場合の挙動（後置演算）

var a = 1;
var b = a++;

console.log(a);
=>2

console.log(b);
=>1

今度は変数bの中身が1のままで出力されました。

「++」を後ろに置くと、「変数aを変数bに代入してから変数aをインクリメントする」という挙動になります。

気をつけましょう。

参考図書

勉強に使ってるのがこの本。

Kindle版が見やすくなってておすすめです。

画像ベタ張りじゃなくて、ちゃんとKindle用にフォーマットされてて使いやすいです。