ES6（分割代入）

はじめに

　分割代入とは、オブジェクトから特定のプロパティーを抽出して宣言を行うことです。

 let { a, b } = object; 
//objectに含まれるプロパティaとbが変数a、bの初期値として代入されることになります。

オブジェクトと変数は切り離された関係になる。

const a = {
  prop:0
}
let {prop} =a
prop = 1;　//再代入
console.log(a,prop);//{prop: 0} 1と出力される。

プロパティと変数の名前は一致させる！

const a = {
  prop:0
}
let {prop} = a
console.log(prop); //0が出力される。

もしプロパティと変数名が違うと…

const a = {
  prop:0
}
let {b} = a
console.log(b);//undefinedと出力される

ただどうしてもプロパティと変数名を変えたければ

const a = {
  prop:0
}
let {prop:b} = a 
//オブジェクトの定義のように：で新しい変数を定義すれば名前を変えることも可能です。
console.log(b);//0が出力される。

変数名を変えても等価性を確認するとtrueが返ります。

console.log(a.prop === b); //true

よくあるユースケース

①関数との利用ケース

1つ目

const a = {
  prop: 0,
};
function fn(obj) {
  let { prop } = obj;
  prop = 1;
  console.log(obj, prop); //{prop: 0} 1と出力される。
}
fn(a);

//省略形
const a = {
  prop: 0,
};
function fn({prop}) { //分割代入として関数の引数に渡す。
  prop = 1;
  console.log(a, prop); //{prop: 0} 1と出力される。
}
fn(a);

2つ目

const obj = {
  prop1: "naruto",
  prop2: "sasuke",
  prop3: "sakura",
};

function chara({ prop1, prop2, prop3 }) {
  return `${prop1} ${prop2} ${prop3}`;
}
const cha = chara(obj);
console.log(cha); //naruto sasuke sakura

②レストパラメータ（残余引数）との利用ケース

const something = {
  first: 1,
  second: 2,
  third: 3,
};
let { first, ...rest } = something;
console.log(first); //1が出力される
console.log(rest); //{second: 2, third: 3}が出力される。

③オブジェクトが多階層との利用ケース

const c = {
  prop1: {
    prop2: 0,
  },
};
let { prop1 } = c;
prop1.prop2 = 1; //再代入
console.log(c, prop1); //{prop1: {…}}prop1: {prop2: 1}__proto__: Object ,{prop2: 1}

オブジェクトが多階層の場合（分割代入内の変数（prop1）がオブジェクトの場合）、変数（prop1）を再代入すると元のオブジェクト（c）にも影響を及ぼし、オブジェクトと変数は切り離された関係になることに反するので注意が必要です。

さらに、分割を使用して構造体の深いデータを取得することもできます。

const c = {
  prop1: {
    prop2: 0,
  },
};
let { prop1:{prop2} } = c;
console.log(prop2); //0