2022/03/14(月) JSprimer(演算子④-代入演算子-)

代入演算子（=）

• 代入演算子（=）は右辺の変数に対して左辺のオペランドの値を代入する演算子です。
• また、代入演算子は二項演算子と組み合わせて利用できます。組み合わせて使用するときは、複合代入演算子と呼ばれます。評価をする順番は、演算が先に行われて、次に値の代入が行われます。
• 二項演算子は、2つのオペランドを評価して結果を返す演算子のことです。例えば、+や-のことです。

複合代入演算子の例⏬

MDN-代入演算子

// 加算代入の例
let num = 1;
num += 10; // num = num + 10; と同じ
console.log(num); // => 11

• 初めにnum + 10のプラス演算が行われます。
• 次に変数numにnum + 10の結果値が代入されます。

[ES2015] 分割代入（Destructuring assignment）

• 分割代入は、配列またはオブジェクトの中身を複数の変数へ同時に代入できる構文です。
• 短縮記法のひとつでES2015から導入されました。
• JSでよく使われる2種類のデータ構造にObject と Arrayがあります。さまざまなデータをまとめて扱えることは便利なのですが、時と場合によりオブジェクト・配列全体の値が必要でない場合があります。
  例えば、関数の引数としてオブジェクト・配列内の個々の値が使いたい場合などです。そのような場合に分割代入を活用すると、オブジェクト・配列内の使いたいデータだけを取り出すことができて便利です。
• まとめると、配列または、オブジェクトのある特定の情報だけを参照して、変数に格納したい場合に用いられます。

配列を分割代入した例

const array = [1, 2];
// aには`array`の0番目の値、bには1番目の値が代入される。以下の代入式をまとめてできるのが分割代入です。
// const a = array[0];
// const b = array[1];
const [a, b] = array;
console.log(a); // => 1
console.log(b); // => 2

• 要素が2つある配列arrayを定義します。
• 次にarray配列内の値をそれぞれ変数a,bに分割代入しています。この時、変数aにはarrayの0番目の値が、変数bには1番目の値が代入されます。
• 代入される要素の順番は配列のインデックス順です。

オブジェクトを分割代入した例

const obj = {
    "summer": "夏",
    "spring": "春", 
    "autumn": "秋"
};
// プロパティ名`summer`の値を、変数`summer`として定義する
const { spring } = obj;  // const summer = obj.summer;と同じ。キー名と同じ変数にキーと紐づく値を代入できる。
console.log(spring); // => 春

// プロパティ名`spring`の値を、変数`spring`として定義する
const { summer } = obj;
console.log(summer); // => 夏

// オブジェクトに未定義のプロパティ名を変数名として記載すると、対応する値がないのでundefinedが代入される
// const { winter = "冬"} = obj;でデフォルト値を設定できる。
const { winter } = obj;
console.log(winter);  // => undefined

// オブジェクトに定義済みのプロパティ名であったとしても変数名を{}オブジェクトリテラルで囲まないと、分割代入は出来ない。オブジェクト全体が代入されてしまうので注意。
const autumn = obj;
console.log(autumn);  // => { summer: '夏', spring: '春', autumn: '秋' }

• {}オブジェクトリテラルを使って変数名を宣言することで、分割して変数に値が代入されます。
• {}オブジェクトリテラルをを使わないと、オブジェクト全体が代入されてしまうので、注意が必要です。
• オブジェクトの分割代入では、プロパティ名に対応する値が代入されます。そのため、変数名にはプロパティ名と一致する名前を指定するようにしましょう。
• オブジェクトに存在しないプロパティ名を変数名として指定するとundefinedが代入されます。さらに=デフォルト値でデフォルトの値を設定できます。
• オブジェクトの分割代入を活用するメリットは２つあります。
  • 1つ目は、オブジェクトのプロパティ値をより直感的に扱えるという点です。summerでアクセス出来ることで、「あ、夏のデータにアクセスしているのね。」ということが一目で分かります。
  • 2つ目は、変数に代入できるので、記述が少なくなるという点です。obj .summerよりもsummerでアクセス出来る方が簡単です。

参考

JSPrimer

MDN-代入演算子

JAVASCRIPT.INFO-分割代入

【JS】分割代入の方法まとめ

朝会ブログ