JavaScript の デフォルト引数を、プログラミング初心者向けにやさしく、例題付きで解説します。
1. デフォルト引数とは？
関数を呼び出すときに、引数を渡さなかった場合に自動で使われる値のことです。
通常の関数ではこう書きます：
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("太郎"); // こんにちは、太郎さん！
greet(); // こんにちは、undefinedさん！
- 2回目の呼び出しでは引数
nameを渡していないので、undefinedになります。 - でも、「名前が未指定のときは“ゲスト”にしたい」と思ったら…？
ここで デフォルト引数 を使います。
2. デフォルト引数の書き方
function greet(name = "ゲスト") {
console.log("こんにちは、" + name + "さん！");
}
greet("太郎"); // こんにちは、太郎さん！
greet(); // こんにちは、ゲストさん！
name = "ゲスト"と書くことで、引数が渡されなかったときに"ゲスト"が自動で代入されます。
3. 複数の引数にも使える
function introduce(name = "名無し", age = 20) {
console.log(name + "さんは、" + age + "歳です。");
}
introduce("花子", 25); // 花子さんは、25歳です。
introduce("太郎"); // 太郎さんは、20歳です。
introduce(); // 名無しのさんは、20歳です。
- 引数ごとにデフォルト値を設定可能
- 左から順番に渡すのが基本
- 後ろの引数もデフォルト値にできる
4. デフォルト引数に関数を使う
デフォルト値には 定数だけでなく式や関数の結果 も使えます。
function getRandomNumber() {
return Math.floor(Math.random() * 100);
}
function showNumber(num = getRandomNumber()) {
console.log("数字は " + num);
}
showNumber(10); // 数字は 10
showNumber(); // 数字は 37 （ランダム）
- 引数が未指定の場合に、関数
getRandomNumber()の結果が自動で使われます。
5. デフォルト引数の注意点
undefinedだけがデフォルト値になる
function sayHi(name = "ゲスト") {
console.log("こんにちは、" + name + "さん！");
}
sayHi(undefined); // こんにちは、ゲストさん！
sayHi(null); // こんにちは、nullさん！
nullを渡すとデフォルト値は使われません。- デフォルト値が使われるのは 引数が未指定 or undefined の場合のみ。
- 順番に注意
function test(a = 1, b) {
console.log(a, b);
}
test(); // 1 undefined
test(undefined, 5); // 1 5
test(10); // 10 undefined
- 前の引数にデフォルト値があっても、後ろの引数は指定しなければ
undefinedです。
6. 例題：便利なデフォルト引数
例題1：挨拶関数
function greetUser(name = "ゲスト", greeting = "こんにちは") {
console.log(greeting + "、" + name + "さん！");
}
greetUser(); // こんにちは、ゲストさん！
greetUser("太郎"); // こんにちは、太郎さん！
greetUser("花子", "やあ"); // やあ、花子さん！
例題2：配列の合計関数
function sum(numbers = [1,2,3]) {
return numbers.reduce((a,b) => a+b, 0);
}
console.log(sum()); // 6 （デフォルトの [1,2,3]）
console.log(sum([10,20])); // 30
💡 まとめ
- デフォルト引数は「引数が未指定でも安全に動かせる」ために便利
- 式や関数も使える
undefinedの場合だけ有効- 複数引数の順番や指定の仕方に注意
