JavaScriptのデフォルト引数（default parameters）の使い方
生徒
「先生、JavaScriptで関数を作るときに、引数に値を渡さなかったらどうなるんですか？」
先生
「渡さなかった引数はundefinedになります。そうすると、関数の中で困ることもありますね。」
生徒
「じゃあ、引数がないときに自動的に決まった値を使う方法ってありますか？」
先生
「ありますよ！それが『デフォルト引数』という仕組みです。関数の引数に初めから決まった値を設定しておけるんです。」
生徒
「どうやって書くんですか？具体的に見せてください！」
先生
「はい、それでは基本からわかりやすく説明しますね！」
1. デフォルト引数とは？
デフォルト引数（default parameters）とは、関数の引数に値が渡されなかったときに、自動的に使われる初期値のことです。
例えば、関数を呼ぶときに「何も指定しなかったら自動的にこの値を使う」という約束を作れます。
これにより、コードを書くときに毎回全ての引数を指定しなくてもよくなり、便利で間違いも減ります。
2. デフォルト引数の基本的な書き方
JavaScriptの関数でデフォルト引数を使うには、引数名の後に「= 値」を書くだけです。
function greet(name = "ゲスト") {
console.log(name + "さん、こんにちは！");
}
greet(); // ゲストさん、こんにちは！
greet("太郎"); // 太郎さん、こんにちは！
上の例では、greet関数のname引数に値が渡されなかったら、「ゲスト」が使われます。
3. なぜデフォルト引数が便利なのか？
デフォルト引数を使わないと、引数がない場合はundefinedになり、エラーや思わぬ動作の原因になることがあります。
以前のJavaScriptでは、関数内で自分で値をチェックして、値がなければ初期値を設定するコードを書いていました。
function greet(name) {
if (name === undefined) {
name = "ゲスト";
}
console.log(name + "さん、こんにちは！");
}
これが面倒でミスも起きやすかったため、デフォルト引数ができてからはコードがずっとシンプルになりました。
4. 複数の引数にデフォルト値を設定する例
デフォルト引数は複数の引数にも使えます。例えば：
function makeGreeting(name = "ゲスト", message = "ようこそ") {
console.log(name + "さん、" + message + "！");
}
makeGreeting(); // ゲストさん、ようこそ！
makeGreeting("花子"); // 花子さん、ようこそ！
makeGreeting("次郎", "お久しぶりです"); // 次郎さん、お久しぶりです！
このように、必要に応じて引数を省略して使うこともできます。
5. デフォルト引数に他の引数や関数の結果を使う
デフォルト値には、他の引数の値や関数の結果も使えます。
function greet(name = "ゲスト", message = name + "さん、こんにちは") {
console.log(message);
}
greet(); // ゲストさん、こんにちは
greet("太郎"); // 太郎さん、こんにちは
ここではmessageのデフォルト値がnameを使って動的に作られています。
6. undefinedとnullの違いに注意
デフォルト引数は、関数呼び出し時に引数がundefinedのときだけ有効です。
引数にnullを渡すと、デフォルト値は使われません。nullは「値がない」という意味ですが、undefinedとは違います。
function greet(name = "ゲスト") {
console.log(name);
}
greet(undefined); // ゲスト
greet(null); // null
つまり、nullは明示的に「値なし」を渡したことになります。
7. 古い書き方との違い
昔のJavaScriptでは、引数に値がなければ自分で初期値を設定する方法が一般的でしたが、今はデフォルト引数を使う方が簡単でわかりやすいです。
古い書き方は以下の通りです：
function greet(name) {
name = name || "ゲスト";
console.log(name + "さん、こんにちは！");
}
この方法はnameが""や0などの偽の値でもデフォルトが使われてしまう問題があります。
8. まとめないけどポイント
- デフォルト引数は関数の引数に最初から決まった値を設定する仕組み
- 引数を省略したときに
undefinedならデフォルト値が使われる - 複数の引数にもデフォルト値を設定できる
- デフォルト値には他の引数や関数の結果を使うことも可能
nullを渡すとデフォルト値は使われないので注意- 昔の方法よりコードがシンプルでわかりやすくなる
JavaScriptのデフォルト引数は、関数を使いやすくし、ミスを減らす便利な機能です。ぜひ使いこなしてみてください！
