[JavaScript]デフォルト引数で引数を省略できるらしい

はじめに

記述した関数の使う場面によって引数を省略できたりしないのかなと思い調べていたら、デフォルト引数という存在を知りました。
調べた内容を備忘録にまとめます。

デフォルト引数の設定の仕方

デフォルト引数は、下記の様に引数を記述する際にデフォルト値を"="に続いて記述をすることで指定することができます。

const ~ = ("引数1", "引数2" = "デフォルト値") => {
  "処理"
}

使用例

例として、引数に名前と挨拶を入れる関数を作りました。
下記の様にデフォルト値を設定すれば、引数を設定しなければ日本語の挨拶で、
それ以外の国の挨拶をしたい場合は"greet"の引数に別途表示させたい文言を入れる、というような形で記述することができます。

greetingメソッドを使用する状況が「ほとんど日本語の挨拶で時々別の国の挨拶を表示させたい」、等だと記述量が減って便利ですね。

const greeting = (name,greet = "こんにちは") => {
  return[name,greet]
}

console.log(greeting("太郎"))
// =>["太郎", "こんにちは"]
console.log(greeting("二郎"))
// => ["二郎", "こんにちは"]
console.log(greeting("三郎"))
// => ["三郎", "こんにちは"]
console.log(greeting("Jhon","Helllo"))
// => ["Jhon", "Helllo"]
console.log(greeting("chang","Ni Hao"))
// => ["chang", "Ni Hao"]

注意点

また、一つ目にデフォルト引数を設定し、二つ目にデフォルト値が存在しない引数を設定すると、デフォルト引数が二つ目の引数の値に上書きされてしまうので注意が必要です。

例えばgreetingメソッドがnameの引数にデフォルト値を設定し、greetの引数にはデフォルト値がない場合は下記の様に動作します。

const greeting = (name = "太郎",greet) => {
  return[name,greet]
}

console.log(greeting("こんにちは"))
// =>["こんにちは", undefined]が返ってくる
// =>["こんにちは", "太郎"]とはならない！！

※10/19 追記
@8348ee さんからご指摘を頂いた内容を追加しました！

初期値が指定されている引数の位置が分かっているのであれば、その引数にundefinedが当たるようにすれば良いです。

上記のご指摘頂いた内容の通り、引数にundefinedを追加してあげることで上書きが防げるとのことです！！

const greeting = (name = "太郎",greet) => {
  return[name,greet]
}

console.log(greeting(undefined, "こんにちは"))
// ['太郎', 'こんにちは']
//　　["こんにちは", undefined]とはならない！！

参考