Help us understand the problem. What is going on with this article?

関数の引数で分割代入ができる

More than 1 year has passed since last update.

概要

分割代入は 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away