分割代入 const { } = の使い方

分割代入

分割代入const { } =を学習したので使い方、注意などを忘れないためにしておくための備忘録。

MDN 分割代入 ( Destructuring assignment )

ES5で書いた場合

var character = {
  name: 'ミッキー',
  name2: 'ミニー'
}
//個別に使うときに変数に入れる必要がある
var name = character.name;
var name2 = character.name2;

参照するときにコードが冗長になってしまう。

ES6の分割代入で書いた場合

var character = {
  name: 'ミッキー',
  name2: 'ミニー'
}

//characterの中で抽出(分割代入)したい値を中括弧の中に書く
const { name, name2 } = character;

//name; ミッキー
//name2; ミニー 

中括弧の変数名は必ずcharacterで書いたキーと同じ名前でないと参照できない。
中括弧に存在しないプロパティ名を書いた時はエラーにならずundefindとして返される。

参照と分割代入

変数で分割代入

const a = {
  prop: 0
}

let { prop } = a;
prop = 1;

console.log(a, prop);

関数fnに分割代入
関数の引数に中括弧と変数名を記述すると、この時点で変数propとして分割代入が行われ、簡略化することができます。

function fn({ prop }) {
  prop = 1;
  console.log(a, prop);
}

fn(a);

オブジェクトに参照を保持している場合

const c = {
  prop1: {
    prop2: 0
  }
}

let { prop1 } = c;

prop1.prop2 = 1;

console.log(c, prop1);

分割代入は変数のプロパティをコピーしますが、参照にオブジェクトを保持している場合は元の『　prop1　』まで変更することになり、変数cに影響することになります。