概要
分割代入は ES6 で追加された大変便利な構文です。
今更ながら、引数内で分割代入ができることを知って感動したので共有します。
分割代入について
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です1。
配列の分割代入
const arr = ['Japan', 'Tokyo', 'Shinjuku'];
const [country, state, city] = arr;
console.log(`country: ${country}, state: ${state}, city: ${city}`);
// -> 'country: Japan, state: Tokyo, city: Shinjuku'
オブジェクトの分割代入
const obj = {country: 'Japan', state: 'Tokyo', city: 'Shinjuku'};
const {country, state, city} = obj;
console.log(`country: ${country}, state: ${state}, city: ${city}`);
// -> 'country: Japan, state: Tokyo, city: Shinjuku'
このようにして、配列から値を取り出したり、オブジェクトからプロパティを取り出して変数に代入できます。
他にもできることがあるのですが、本稿の内容から逸れてしまうので割愛します。
引数で分割代入を使う
それでは、引数内で分割代入をします。
引数で分割代入
const arr = ['Japan', 'Tokyo', 'Shinjuku'];
const obj = { country: 'Japan', state: 'Tokyo', city: 'Shinjuku' };
const fnArr = ([country, state, city]) => (
`country: ${country}, state: ${state}, city: ${city} from fnArr`
);
const fnObj = ({ country, state, city }) => (
`country: ${country}, state: ${state}, city: ${city} from fnObj`
);
console.log(fnArr(arr));
// -> 'country: Japan, state: Tokyo, city: Shinjuku from fnArr'
console.log(fnObj(obj));
// -> 'country: Japan, state: Tokyo, city: Shinjuku from fnObj'
このようにして、配列やオブジェクトが展開できます。
2018/10/02 追記
@yuta0801 さんにコメントをいただきました。
下記のようにすることで、デフォルトの引数を与え、 TypeError を引き起こさないようにできます。
デフォルト引数
const fnArr = ([country, state, city] = []) => (
`country: ${country}, state: ${state}, city: ${city} from fnArr`
);
const fnObj = ({ country, state, city } = {}) => (
`country: ${country}, state: ${state}, city: ${city} from fnObj`
);
console.log(fnArr());
// -> 'country: undefined, state: undefined, city: undefined from fnArr'
console.log(fnObj());
// -> 'country: undefined, state: undefined, city: undefined from fnObj'
さらに、 undefined ではなくデフォルトの値を代入する場合は下記のようにします。
デフォルト引数
// このようにデフォルト引数を書いても同様の結果を得られます
// ([country = 'USA', state = 'DC', city = 'Washington'] = [])
const fnArr = ([country, state, city] = ['USA', 'DC', 'Washington']) => (
`country: ${country}, state: ${state}, city: ${city} from fnArr`
);
// このようにデフォルト引数を書いても同様の結果を得られます
// ({ country = 'USA', state = 'DC', city = 'Washington'} = {})
const fnObj = ({ country, state, city } = {country: 'USA', state: 'DC', city: 'Washington'}) => (
`country: ${country}, state: ${state}, city: ${city} from fnObj`
);
console.log(fnArr());
// -> 'country: USA, state: DC, city: Washington from fnArr'
console.log(fnObj());
// -> 'country: USA, state: DC, city: Washington from fnObj'
まとめ
今までは、配列やオブジェクトを関数内で分割代入していました…。
分割代入を初めて使ったときに、その便利さに感動しましたが、2度目の感動がありました。
参考
-
分割代入 - JavaScript | MDN より引用 ↩