【JavaScript】分割代入まとめ

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です
mdnから引用

配列での分割代入

例えば、配列から値を取り出すためには通常だと個々の要素にアクセスしなければならない。

sample.js

let data = [1, 2, 3, 4, 5, 6];
let x0 = data[0];
let x1 = data[1];
let x2 = data[2];
let x3 = data[3];
let x4 = data[4];
let x5 = data[5];

これを分割配列を使用して行うと下記のように書き換えることができる。

sample.js

let data = [1, 2, 3, 4, 5, 6];
let [x0, x1, x2, x3, x4, x5] = data;  

右辺の配列の要素が左辺の各変数にそれぞれ代入される。(x0 = 0, x1 = 1のような感じ)

また、演算子「...」を使用することで、個々の変数に代入できなかったあまりの変数を配列として切り出すこともできる。

sample.js

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let [x0, x1, x2, x3, x4, x5, ...other] = data;    
console.log(x0);
console.log(x1);
console.log(x2);
console.log(x3);
console.log(x4);
console.log(x5);
console.log(other);

出力結果

オブジェクトでの分割代入

オブジェクトのプロパティを分割代入を使用して変数に分解することが可能。

配列のときは[]でくくっていたがオブジェクトの場合は｛｝でくくる。

sample.js

let human = {name: "jon", age: 20, gender: "male"};

let {name, age, gender} = human;

console.log(name);
console.log(age);
console.log(gender);

出力結果

配列の分割代入とは異なる点があり、オブジェクトの場合は、代入する変数とプロパティ名が一致していないといけない。

オブジェクトの場合は名前でプロパティを個々に分解しているためである。

したがって、変数の並び順はプロパティの定義順と一致していなくても、プロパティ名にはない変数名があっても問題ない。

プロパティ名にはない変数は無視される。

sample.js

let human = {name: "jon", age: 20, gender: "male"};

let {age, gender, name, personalMemo} = human;

console.log(name);
console.log(age);
console.log(gender);
console.log(personalMemo);

出力結果

プロパティに存在しない変数に対して、デフォルト値を設定することも可能である。
形式は「変数名 = デフォルト値」。

sample.js

let human = {name: "jon", age: 20, gender: "male"};

let {age, gender, name, personalMemo = "特になし"} = human;

console.log(name);
console.log(age);
console.log(gender);
console.log(personalMemo);

出力結果

ちなみに「変数名：別名」の形式でプロパティとは異なる名前の変数に値を割り当てることが可能である。

sample.js

let human = {name: "jon", age: 20, gender: "male"};

let {name: namae, age: nenrei, gender: seibetu} = human;

console.log(namae);
console.log(nenrei);
console.log(seibetu);

出力結果

入れ子のオブジェクトの分割代入

オブジェクトのプロパティは入れ子構造で表すこともできるがこのような場合でも分割代入で可能。

sample.js

let human = {name: "jon", age: 20, gender: "male", 
child: {childName: "catherine", childAge: 10, childgender: "female"}};

let {name, age, gender, child, child: {childName}} = human;

console.log(name);
console.log(age);
console.log(gender);
console.log(child);
console.log(childName);

出力結果

単純にchildを指定した場合はchildのプロパティがまとめて格納される。

「オブジェクト: {プロパティ名}」とすることでオブジェクトのプロパティのみを格納することができる。(今回の例でいうとchild: {childName}の部分)