分割代入とは？
ES2015から使用できるようになった、配列からオブジェクトから値を取り出して変数に代入する方法です。
一回の宣言で配列・オブジェクトの複数の値を変数に代入することができる便利な機能になります。
本記事では使用方法などをサンプルコードを用いて整理していこうと思います。
この記事でわかること
- 分割代入を用いて配列・オブジェクトから値を取得する
- 取得対象がundefinedの時にデフォルト値を設定する
- rest構文を使用して分割代入の残りを取得する
分割代入を使用して値を変数に代入する
配列・オブジェクトの分割代入の使用方法についてになります。
配列の分割代入
配列の各要素を任意の変数名で複数代入することができます。
const rgbColorArray = ['red','green','blue'];
// 配列rgbColorArrayの先頭 ~ ２個目まで、任意の変数名で代入。
const [r,g] = rgbColorArray;
console.log(r); // red
console.log(g); // green
また、不要なインデックスの値についてはスキップすることも可能です。
上記の例で言うと、配列rgbColorArrayから'red'と'blue'を取得したい場合は、間の'green'を無視することができます。
const rgbColorArray = ['red','green','blue'];
// 無視したい箇所を空白にすることで、不要な値をスキップして取得することが可能。
const [r,,b] = rgbColorArray;
console.log(r); // red
console.log(b); // blue
オブジェクトの分割代入
分割代入したいオブジェクトのプロパティ名と同じ名前の変数名に代入することができます。
const rgbColorObj = {r : 'red', g : 'green', b : 'blue'};
// オブジェクトのプロパティの値を、同名の変数に簡単に代入することが可能。
const {r,g} = rgbColorObj;
console.log(r); // red
console.log(g); // green
変数名についてはプロパティと異なる名前を設定することもできます。
その場合、下記サンプルのように、宣言時にプロパティ名:変数名とすることで実現できます。
const rgbColorObj = {r : 'red', g : 'green', b : 'blue'};
// プロパティ名と異なる変数名を設定する。
const {r,g,b:blueColor} = rgbColorObj;
console.log(r); // red
console.log(g); // green
console.log(blueColor); // blue
取得対象がundefinedの時にデフォルト値を設定する
分割代入を使用した際に対象の配列やオブジェクトの値がなかった場合、何も設定しないと変数にはundefinedが設定されます。
デフォルト値を設定しておくと、undefinedとなるときにデフォルトの値を設定するようにできます。
配列の分割代入時のデフォルト値の設定
配列の場合、対象の配列の数より、変数宣言した数が多い場合、余った変数にはundefinedが設定されてしまいます。
const rgbColorArray = ['red','green'];
// 配列は２個しか値がないが、3個の変数に分割代入をしている。
const [r,g,b] = rgbColorArray;
console.log(r); // red
console.log(g); // green
console.log(b); // undefined
undefinedを設定したくない場合は、下記サンプルのように、undefinedの場合はデフォルトの値を変数に設定することが可能です。
const rgbColorArray = ['red','green'];
// 配列は２個しか値がないが、3個の変数に分割代入しようとしている。
const [r,g,b = 'blue'] = rgbColorArray;
console.log(r); // red
console.log(g); // green
console.log(b); // blue
オブジェクトの分割代入時のデフォルト値の設定
オブジェクトの場合、対象のオブジェクトが保持していないプロパティ名を変数宣言した場合、その変数にはundefinedが設定されてしまいます。
(TypeScriptだと存在しないプロパティにアクセスしよとするとコンパイルエラーとなりますが、オプショナルが設定されているプロパティを分割代入しようとした時にはコンパイルエラーは起きずにundefinedが設定されます。)
const rgbColorObj = {r : 'red', g : 'green'};
// オブジェクトが持っていないプロパティを分割代入しようとしている。
const {r,g,b} = rgbColorObj;
console.log(r); // red
console.log(g); // green
console.log(b); // undefined
配列の時と同じようにして、undefinedの場合はデフォルトの値を変数に設定することが可能です。
const rgbColorObj = {r : 'red', g : 'green'};
// オブジェクトが持っていないプロパティを分割代入しようとしている。
const {r,g,b = 'blue'} = rgbColorObj;
console.log(r); // red
console.log(g); // green
console.log(b); // blue
rest構文を使用して分割代入の残りを取得する
rest構文（...変数名）を使用すると、分割代入で余った値を変数に代入することができます。
配列の分割代入でrest構文を使用する
const rgbColorArray = ['red','green','blue'];
// 先頭のredは個別に変数に代入し、それ以外はotherColorに代入する。
const [r,...otherColor] = rgbColorArray;
console.log(r); // red
console.log(otherColor); // ['green','blue']
オブジェクトの分割代入でrest構文を使用する
const rgbColorObj = {r : 'red', g : 'green', b : 'blue'};
// redは個別に変数に代入し、それ以外はotherColorに代入する。
const {r,...otherColor} = rgbColorObj;
console.log(r); // red
console.log(otherColor); // {g : 'green', b : 'blue'};