JavaScriptの括弧で囲まれた変数名とは(分割代入)

JavaScriptの括弧で囲まれた変数名とは(分割代入)

タイトルが分かりづらいですが、ReactであったりQiitaの記事などをみているとconst {something} = somethingelseみたいな構文をよく見かけます。
調べてみると分割代入と呼ばれる記法でありES6で導入されたみたいです、、JavaScriptを学び始めたときは動けばええんじゃ!!スタイルでしたが最近は知らない記法などをみると調べる癖がつきました。時間はかかりますが調べた事が後々繋がるので無駄な時間とは思わず取り組めています。
初めてみたときはどういった処理をしているのかさっぱりでしたが調べた事をまとめます。

分割代入(オブジェクト)

/** ES6 */
// データ構造を作成
let person = {
  name: 'kuma',
  age: 23
}
// データ構造を分割
let {name, age} = person;
console.log(name, age); // "kuma 23"

/** ES5 */
let name = person.name;
let age = person.age;
let {name, age} = person;

ここで分割代入をしている。
オブジェクトから抽出したいフィールドのプロパティ名を指定する必要があります。
そうすると、そのフィールドと同じ名前の変数にフィールドの値が代入されます。
今回で言えば、nameという変数にpersonオブジェクトのnameプロパティを指定している。

今回あげた例ですとメリットを感じづらいですがプロパティの数が多いと十分に効果を発揮します。

// プロパティ数が多く分割代入を使用しない場合は「オブジェクト.プロパティ名」を書き続けることになります
let name = person.name;
let age = person.age;
ler avatar = person.avatar;
let address = person.address;
let ... = person.プロパティ名
...

 分割の際に別の名前をつける

let person = {
  name: 'kuma',
  age: 23
}
let {name: firstName, age: yearsOld} = person;
console.log(firstName, yearsOld) // -> kuma 23

見ての通りfirstName、yearsOldという変数が作成されそれぞれそれぞれ呼び出すことが可能です。

下記をみて分かる通り、データ構造を構築する方法の逆が分割です。

// ↓↓データ構造を構築
let firstName = person.name;
let yearsOld = person.age
let person = {name: firstName, age: yearsOld}
// ↑↑

// ↓↓データを分割
let {name: firstName, age: yearsOld} = person;
// ↑↑

分割を入れ子にする(ネストさせる)事も可能です。

let me = {
  name:{
    first: 'kuma',
    last: 'ren'
  },
  address: {
    street: 'doko',
    region: 'tokyo',
    zipcode: '122',
  },
}

// 入れ子でも変数を割り当てる事が可能
let { name: {first: firstName, last}, address: {street, region, zipcode} } = me;

分割代入(配列)

配列もオブジェクトと同様です。
配列を分割するための構文は、配列を構造化するための構文の逆になる。

let array = ['a', 'b']
let [first, second] = array;

console.log(first); // a
console.log(second); // b

配列とオブジェクトの分割を組み合わせる

let product = {
  name: 'whisky',
  details: {
    price: 3000,
    description: 'Enjoy your time with this'
  },
  images: {
    primary: '/images/xxx.jpg',
    others: [
      '/images/xxx.jpg',
      '/images/xxx.jpg',
    ]
  }
};

let {
  name,
  details: {price, description},
  images: { 
    primary,
    others: [secondary, third]
  }
}