オブジェクトと配列のでストラクチャーリング JavaScript (ES6, ES2015)

Destructuring　(分割代入)

日本語難しいので、デストラクチャーリング って横文字で読んでます。、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

1. オブジェクトのデストラクチャーリング(Object Destructuring)

今までのデータをこう読み込んでいたのが・・・

data.js

var user = {
  name: 'Ayako Sayama',
  age: 16,
  location: 'Vancouver',
}

var name = user.name;
var age = user.age;
var location = user.location;

こうやって読み込むことができるようになりましたー。

data.js

var user = {
  name: 'Ayako Sayama',
  age: 16,
  location: 'Vancouver',
}
const { name, age, location } = user;

2. 配列のデストラクチャーリング(Array Destructuring)

配列も上記のオブジェクトと一緒です。
{} が []に変わるだけ。

data.js

var user = [
  'Ayako Sayama', 'Vancouver', 'Megane'
];

var name = user[0]; // 'Ayako Sayama'
var age = user[1]; // 'Vancouver'
var location = [2]; // 'Megane'

data.js

var user = [
  'Ayako Sayama', 'Vancouver', 'Megane'
];
const [ name, age, location ] = user;
console.log(name); // 'Ayako Sayama'

ここでは、デストラクチャーリングする時に、好きな変数に置き換えることができます。(name="Ayako Sayama")

3. 関数のパラメーターをでストラクチャーリング(Destructuring in function parameters)

Before

パラメーターの中身もわからないし、順番も正確じゃないといけないので面倒！

fetchData.js

function fetchData(language, name, age, nationality, hasBoyfriend) {
  ...
}

fetchData("Japanese", "Ayako", 10, "Japanese", true);

After

fetchData.js

function fetchData({ language, name, age, hasBoyfriend, nationality }){
  ...
}

fetchData({
  language: 'Japanese',
  name: 'Ayako Sayama',
  hasBoyfriend: true,
  nationality: 'Japanese',
  age: 16,
});

順番はバラバラでOK!