デフォルト引数とは何か？
JavaScriptにはデフォルト引数という機能があります。
デフォルト引数とは、関数処理で引数が渡されなかった場合に、渡されなかった引数の値に指定した値を代入するものです。
デフォルト引数のメリット
引数の数が足りないと何が起こるか？
JavaScriptでは関数で引数が定義してある場合に、その関数を呼び出したときに引数の数が足りない（あるいは渡されていない）と、引数の値を「undefined」とします。
結果として、渡す引数の数が足りない四則演算の処理などは結果が「NaN」になってしまいます。
undefinedやNaNとなる例
const totalPrice = ( price, tax ) => {
console.log("price:", price, "tax:", tax)
return Math.floor( price * tax ) + "円"
}
//引数なしで呼び出す場合
totalPrice()
//処理結果
price: undefined tax: undefined
'NaN円'本来引数が２つ必要なtotalPriceで、引数を指定していない場合は、中で使われている引数「price」と「tax」のいずれもが「undefined」になります。
計算結果も「NaN」となっています。
デフォルト引数のメリット
デフォルト値を設定しておくと、「undefined」の代わりに指定した値を代入するので、処理結果がおかしくなることを防ぐことができます。
しかも、複数の引数が必要な場合に、少ない数の引数しか渡されていない時は、渡された引数を優先し、残りの引数にはデフォルト値を代入する処理をしてくれます。
デフォルト値の設定方法
書き方
デフォルト値の設定方法は簡単で、関数を定義したときに引数の横に「=値」とするだけです。
function( 引数1=値1, 引数2=値2,,,, ){ 処理 }↓ アロー関数の場合（functionの省略表記）
( 引数1=値1, 引数2=値2,,,, ) => { 処理 }実例：引数が１つもない場合
以下のように引数「price」と「tax」の二つをとり、掛け合わせた結果を返す計算処理があるとします。
このとき、priceのデフォルト引数に100, taxのデフォルト引数に1.10を指定する場合は以下のようになります。
const totalPrice = ( price=100, tax=1.10 ) => {
console.log("price:", price, "tax:", tax)
return Math.floor( price * tax ) + "円"
}
//引数なしで呼び出す場合
totalPrice()
//処理結果
price: 100 tax: 1.1
'110円'本来引数が２つ必要なtotalPriceで、引数を指定していない場合は、中で使われている引数「price」と「tax」のいずれもにデフォルト引数が適用されます。
計算処理は正しく動き、結果は「110円」となっています。
実例：引数が渡されているが、数が足りない場合
上記と同じく引数「price」と「tax」の二つをとり、掛け合わせた結果を返す計算処理があるとします。priceのデフォルト引数に100, taxのデフォルト引数に1.10が指定してあります。
このときに、引数を１つだけ渡す場合は以下のようになります。
const totalPrice = ( price=100, tax=1.10 ) => {
console.log("price:", price, "tax:", tax)
return Math.floor( price * tax ) + "円"
}
//引数１つで呼び出す場合
price1 = 1000
totalPrice( price1 )
//処理結果
price: 1000 tax: 1.1
'1100円'本来引数が２つ必要なtotalPriceで、引数が１つだけ指定してある場合は、1つ目の引数「price」のみ指定した値が入り、2つ目の引数「tax」のみにデフォルト引数が適用されます。
計算処理は正しく動き、結果は「1100円」となっています。
実例：引数の数が合っている場合
上記と同じく引数「price」と「tax」の二つをとり、掛け合わせた結果を返す計算処理があるとします。priceのデフォルト引数に100, taxのデフォルト引数に1.10が指定してあります。
このときに、引数を２つ渡す場合は以下のようになります。
const totalPrice = ( price=100, tax=1.10 ) => {
console.log("price:", price, "tax:", tax)
return Math.floor( price * tax ) + "円"
}
price1 = 1000
tax1 = 1.08
//引数２つで呼び出す場合
totalPrice( price1, tax1 )
//処理結果
price: 1000 tax: 1.08
'1080円'本来引数が２つ必要なtotalPriceに、引数が２つ渡されるので、1つ目の引数「price」と2つ目の引数「tax」に指定した値が入ります。
デフォルト引数の値は無視されます。
計算処理は正しく動き、結果は「1080円」となっています。
補足：引数の数が多くてもエラーにはならない
なお、JavaScriptでは引数の数が、関数の処理に必要な数以上に渡されていてもエラーにはなりません。
不要な引数は自動的に無視されます。
const totalPrice = ( price=100, tax=1.10 ) => {
console.log("price:", price, "tax:", tax)
return Math.floor( price * tax ) + "円"
}
price1 = 1000
tax1 = 1.08
text = "test"
price2 = 321
tax2 = 3.1
//余計な引数をつけて渡す場合
totalPrice( price1, tax1, text, price2, tax2 )
//処理結果
price: 1000 tax: 1.08
'1080円'余計な引数がたくさん渡されていますが、計算処理は正しく動いています。
