【JavaScript】 「引数」の「デフォルト値」を簡単に指定する

こんにちは、さち です。

先日、「JavaScript」を書いているときに、「関数」の「引数」に「デフォルト値」を定義したいことがありました。

ただ、「引数」が複数あると、if を使って書くのは地味に面倒……。

そこで今回は、「引数」の「デフォルト値」を簡単に指定する方法について書いていきます。

使い方

「関数」で「引数」を利用する場合、引数の「名前」を定義するときに「値」を渡しておくことで、その引数の「デフォルト値」を定義できます。

下記の例でいうと、関数の name = '虹ヶ咲学園' club = '同好会' の部分です。

function getGroup(name = '虹ヶ咲学園', club = '同好会') {
  return `${name} スクールアイドル${club}`;
}

/* 値を渡さない場合 */
let unsetval = getGroup();
console.log(unsetval);// 虹ヶ咲学園 スクールアイドル同好会

/* 値を渡す場合 */
let setval = getGroup('蓮ノ空女学院', 'クラブ');
console.log(setval);// 蓮ノ空女学院 スクールアイドルクラブ

通常、関数に「値」を渡さず getGroup() のようにとすると、引数 name club はどちらも undefined になります。

しかし、デフォルト値 name = '虹ヶ咲学園' club = '同好会' が指定されているので、戻り値は '虹ヶ咲学園 スクールアイドル同好会' になります。

反対に、「値」を渡して getGroup('蓮ノ空女学院', 'クラブ') のようにすると、各引数の値は name が '蓮ノ空女学院' に、 club が 'クラブ' になり、戻り値は '蓮ノ空女学院 スクールアイドルクラブ' になります。（デフォルト値から上書きされる）

if を使うより簡単だし、何より分かりやすいです。これからどんどん使っていこうと思います。