👬

JavaScript Tips - 分割代入を関数の引数に使ったときにデフォルト値入れられるって知ってた?

2021/01/19に公開

はじめに

分割代入は, 配列やオブジェクトを分割して一気に変数に代入できる便利な仕組みです.
その分割代入を関数の引数として活用した際にデフォルト値を指定できることをご存知でしょうか?

その方法を例を交えて紹介したいと思います.

サンプル

country を省略しているのに 'Japan' と表示されているのが分かると思います.

https://runstant.com/phi/projects/3832432c

コード

// アドレスを表示(country 省略時は Japan が設定される)
function showAddress({country='Japan', state, city}) {
  console.log(`Address: ${city} ${state} ${country}`); // Address: Shinagawa-ku Tokyo Japan
};

// adress
var address = {
  state: 'Tokyo',
  city: 'Shinagawa-ku'
};
// 関数を実行
showAddress(address);

解説

デフォルト引数の指定方法は, 通常の引数時とほぼ同じです.
= でデフォルト値として使用したい値を渡しておくだけです.

function showAddress({country='Japan', state, city}) {
  console.log(`Address: ${city} ${state} ${country}`); // Address: Shinagawa-ku Tokyo Japan
};

これで渡したオブジェクトに country がなかった場合自動でデフォルト値を割り当ててくれます.

おわりに

今日はちょっとした Tips でした.

引数が毎回同じ値だけどたまに変えたいといった場面で活用できると思います. 良い実例を思いついたらまた改めて詳しく紹介できたらと思います.

分割代入を関数の引数にすると引数が順不同になるので便利ですよね♪

Discussion