In 'n' Out

値を入れるだけではない代入

JavaScriptでは、変数に値を入れるために代入演算子を使います。
値を足しながら代入したり、引きながら代入したりといった処理も、専用の演算子で簡潔に表現できます。
これらの書き方を使うことで、同じ変数を使った計算や更新を分かりやすく記述できるようになります。
ここでは、代入演算子の使用頻度の高いものに絞り、それぞれの役割と使い方を整理します。
なお、代入演算子はオブジェクトでもメソッドでもプロパティでもありません。

代入

代入演算子=は、変数に値を代入するための書き方です。
改めて説明すると、算数のイコールのように左右が等しいという意味ではありません。

構文

変数 = 値;

右側の値を左側の変数に入れる代入として使われます。
この書き方は変数を宣言した後の基本形なので、必ず覚えておきましょう。

コード例

//assignmentBasic.js
let num = 5;
       
alert(num);

動作例

この例では、最初にnumに5を代入しています。
その後、alertでnumの値をポップアップ表示します。
代入を使うことで、変数の現在の値を別の値に更新することができます。

加算代入

加算代入演算子+=は、変数の現在の値に数値を足し、その結果を同じ変数に代入するための書き方です。
計算と代入を1行でまとめて書けるのが特徴です。

構文

変数 += 値;

この書き方が何を意味しているかというと、変数 = 変数 + 値;と同じです。
変数の中身を一度取り出し、値を足したあと、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator1.js
let num = 5;

num += 2;
       
alert(num);

動作例

この例では、最初にnumに5を代入しています。
numには2が足された値が、alertに表示されます。
加算代入を使うことで、処理の意図が分かりやすくなり、コードも短く書けるようになります。

減算代入

減算代入演算子-=は、変数の現在の値から数値を引き、その結果を同じ変数に代入するための書き方です。
値を減らしながら更新したい場合に使います。

構文

変数 -= 値;

加算代入とは逆で、変数 = 変数 - 値;と同じです。
変数の中身から指定した値を引き、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator2.js
let num = 20;

num -= 5;
       
alert(num);

動作例

この例では、numの初期値を20にしています。
numには5が引かれた値が、alertに表示されます。
減算代入でも、処理の意図が分かりやすくなり、コードも短く書けるようになります。

乗算代入

乗算代入演算子*=は、変数の現在の値に数値を掛け、その結果を同じ変数に代入するための書き方です。
倍率をかけて値を更新したい場合に使われます。

構文

変数 *= 値;

この書き方は、変数 = 変数 * 値を省略したものです。
変数の中身に指定した値を掛け、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator3.js
let num = 5;

num *= 3;
       
alert(num);

動作例

この例では、numの初期値を5にしています。
numには3をかけた値が、alertに表示されます。

除算代入

除算代入演算子/=は、変数の現在の値に数値を掛け、その結果を同じ変数に代入するための書き方です。
倍率をかけて値を更新したい場合に使われます。

構文

変数 /= 値;

この書き方は、変数 = 変数 / 値を省略したものです。
変数の中身に指定した値で割り、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator4.js
let num = 10;

num /= 2;
       
alert(num);

動作例

この例では、numの初期値を10にしています。
numには2で割った値が、alertに表示されます。

代入演算子は文字も扱える

代入演算子は数値だけでなく、文字列に対しても使用できます。
ただし、文字列では足し算ではなく結合として扱われるため、加算代入（+=）のみしか使用できません。

コード例

//assignmentOperator5.js
let str = 'a';

str += 'b';

alert(str);

動作例

この例では、最初にstrにaという文字列を代入しています。
その後、str += 'b'によって、元の文字列の後ろに新しい文字列が追加されます。
結果として、alertにはabと表示されます。
文字列に対する加算代入は、数値の足し算ではなく、文字をつなげる処理として動作します。
表示用の文章を少しずつ組み立てたい場合に便利です。

インクレメント

インクレメントは、変数の値を1ずつ増加させるための記法です。

構文

変数++;
++変数;

++はインクレメントと呼ばれ、変数の値を1増やします。
変数の後と、変数の前のインクレメント演算子は単体では同じ処理となります。
それでは比較していきます。

コード例

//increment.js
let num1 = 0;

num1++;

alert(num1);

let num2 = 0;

++num2;

alert(num2);

let num3 = 0;
let numAfter = 0;

numAfter = num3++;

alert(numAfter);

let num4 = 0;
let numBefore = 0;

numBefore = ++num4;

alert(numBefore);

動作例

最初の後置インクレメントでは、num1に1が足され、その結果が表示されます。
次に前置インクレメントでも、num2に1が足され、同様に表示されます。
続いて、後置インクレメントを代入と組み合わせた例です。
numAfter = num3++ では、まず現在のnum3の値がnumAfterに代入され、その後にnum3が1増えます。
そのため、numAfterには0が代入されます。
一方、前置インクレメントでは、numBefore = ++num4 の時点でnum4が1増えてから代入されます。
そのため、numBeforeには1が代入されます。
このように、インクレメントは単体で使う場合は前置・後置で結果は同じですが、代入と組み合わせると処理順の違いによって結果が変わります。
なお、加算代入（+=）と異なり、インクレメントでは増加量を自由に指定することはできません。

デクレメント

デクレメントは、変数の値を1ずつ減算させるための記法です。

構文

変数--;

--はデクレメントと呼ばれ、変数の値を1減らします。
変数の後と、変数の前のインクレメント演算子は単体では同じ処理となります。
それでは比較していきます。

コード例

//Decrement.js
let num1 = 10;

num1--;

alert(num1);

let num2 = 10;

--num2;

alert(num2);

let num3 = 10;
let numAfter = 0;

numAfter = num3--;

alert(numAfter);

let num4 = 10;
let numBefore = 0;

numBefore = --num4;

alert(numBefore);

動作例

最初の後置デクレメントでは、num1から1が引かれ、その結果が表示されます。
次に前置デクレメントでも、num2から1が引かれ、同様に表示されます。
続いて、後置デクレメントを代入と組み合わせた例です。
numAfter = num3--では、まず現在のnum3の値がnumAfterに代入され、その後にnum3が1減ります。
そのため、numAfterには10が代入されます。
一方、前置デクレメントでは、numBefore = --num4の時点でnum4が1減ってから代入されます。
そのため、numBeforeには9が代入されます。
デクレメントもインクレメントと同様に、単体で使う場合は前置・後置で結果は同じですが、代入と組み合わせると処理順の違いによって結果が変わります。
なお、減算代入（-=）と異なり、デクレメントでは減少量を自由に指定することはできません。