【JavaScriptの入門】代入演算子

JavaScriptで使われる演算子の中で、変数に対して値を代入するための代入演算子というものがあります。
今回は、代入演算子の使い方について解説していきます。

代入演算子（=）

代入演算子は、変数に対して値を代入するために使用されます。

以下の変数宣言で使われている=が代入演算子です。

let a = 5; // 変数宣言
console.log(a); // 5

代入演算子の前にある変数に対して、代入演算子の後ろにあるオペランドを代入するという意味になります。

変数 代入演算子 値（オペランド）

代入演算子は、イコール（同等）とは異なります。
この場合、変数aが5であることを宣言した後、aに6を再代入しているということになります。

let a = 5;
console.log(a = 6); // 6

値の5と6がイコールであるかそうでないか確認するには、代入演算子ではなくて、比較演算子を使用します。

let a = 5;
console.log(a === 6); // false

このように、代入演算子の=は、イコールであるか判断するためのものではなく、値を代入するための演算子であることに注意しましょう。

分割代入

従来の代入演算子は、1つの変数に対して値を代入するものでした。
しかし、ES2015から分割代入という機能が導入されたことにより、複数の変数に同時に値を代入できるようになりました。

分割代入には、配列リテラルやオブジェクトリテラルを使用します。
配列の場合、代入演算子の前のオペランドが配列リテラルとなります。

// 配列を作成
let array = [1, 2];

// 分割代入。aに配列の0番目の値、bに1番目の値を代入
let [a, b] = array;

console.log(a); // 1
console.log(b); // 2

これを分割代入ではなく、通常の方法で書くとこのようになります。

let array = [1, 2];

let a = array[0];
let b = array[1];

console.log(a); // 1
console.log(b); // 2

オブジェクトの場合には、代入演算子の前のオペランドがオブジェクトリテラルになります。

// オブジェクトを作成
let obj = {
  name: 'John',
  id: 1 
};

// 分割代入。右側のオブジェクトのプロパティ値を、左側のキーに代入
let { name, id } = obj;

console.log(name); // "John"
console.log(id); // 1

これを通常の方法で書くとこのようになります。

let obj = {
  name: 'John',
  id: 1
};

let name = obj.name;
let id = obj.id;

console.log(name); // "John"
console.log(id); // 1

複数の変数にまとめて代入を行いたい場合には、分割代入を使う方が記述量が少なくて便利です。

多重代入（代入のチェーン）

複数の変数に対して、同じ値を代入することもできます。

このような代入方法を、多重代入や代入のチェーンと呼びます。

let a, b, c;

// 5 → c → b → aの順で代入されていく
a = b = c = 5;

console.log(a); // 5
console.log(b); // 5
console.log(c); // 5

多重代入は、右から左へと評価されます。
この場合、最初に5が評価され、その後、左の変数に代入されていき、結果的にはすべての変数は同じ値になります。

これを複数の行に分割して書いた場合、以下のようになります。

let a, b, c;

c = 5;
b = c;
a = c;

console.log(a); // 5
console.log(b); // 5
console.log(c); // 5

単純な値であれば多重代入を使用しても問題ありませんが、場合によっては、複数の行に分割した方が可読性が高くなることも頭に入れておきましょう。

代入演算子と算術演算子の組み合わせ

代入演算子は、算術演算子と組み合わせて使うことができます。
例えば、変数に数値を格納した後、新しい結果を同じ変数に格納したい時などです。

let a = 5;

a = a + 3;
a = a * 2;

console.log(a); // 16

変数aに初期値として5を代入した後、aに3を加算させ、さらにaに2を掛けた値を変数aに代入しています。
この表記は、+=や*=を使用することで短縮して書くことができます。

let a = 5;

a += 3; // a = a + 3 と同じ
a *= 2; // a = a * 2 と同じ

console.log(a); // 16

このような短縮した代入演算記法は、算術演算子やビット演算子と呼ばれるものに適用されます。
該当する演算子のすぐ後ろに代入演算子を記述する形で使用できます。

以下は、算術演算子と代入演算子を組み合わせた表です。

まとめ

今回は、代入演算子について解説しました。

// ポイント
* 代入演算子は、値を代入するための演算子
* 分割代入は、複数の変数に同時に値を代入する
* 多重代入は、右から左の順番に評価し、複数の変数に単一の値を代入する
* 代入演算子と算術演算子を組み合わせる短縮記法がある

代入演算子は、常に使用する演算子のため、ここでポイントをしっかりおさえておきましょう。

合わせて読みたい演算子入門シリーズ

第1回：演算子の優先順位
第2回：演算子の種類と役割
第3回：算術演算子
第4回：代入演算子（当記事）
第5回：比較演算子
第6回：論理演算子