JavaScriptのデフォルト引数
「引数を渡し忘れても、賢く初期値が入る仕組み」がデフォルト引数です。関数のパラメータに「= 値」を書いておくと、その引数が未指定または undefined のときに、その値が自動で使われます。
基本の使い方
function greet(name = "ゲスト") {
console.log(`こんにちは、${name}さん！`);
}
greet(); // こんにちは、ゲストさん！
greet("太郎"); // こんにちは、太郎さん！
- ポイント: 引数を渡さなかったとき、name には “ゲスト” が入ります。
- 対象: 未指定（省略）または undefined のときだけ。null や 0 などは「値がある」とみなされ、デフォルトは使われません。
よくある落とし穴と注意点
- undefined のときだけ効く:
次の 2つは挙動が違います。
function show(x = 10) { console.log(x); }
show(); // 10（省略 → デフォルト）
show(undefined);// 10（undefined → デフォルト）
show(null); // null（値あり → デフォルト使わない）
show(0); // 0（値あり → デフォルト使わない）
- 式や関数も書ける（遅延評価）:
デフォルト値は「呼び出し時」に評価されます。
let counter = 0;
function nextId(id = ++counter) { return id; }
nextId(); // 1
nextId(); // 2
nextId(99); // 99（値あり → デフォルト無視）
- 前の引数を使って決める:
後ろのパラメータのデフォルトに、前の値を参照できます。
function makeRange(start = 0, end = start + 10) {
return { start, end };
}
makeRange(); // { start: 0, end: 10 }
makeRange(5); // { start: 5, end: 15 }
makeRange(5, 7); // { start: 5, end: 7 }
- パラメータの順番は大事:
省略される可能性が高いものを後ろに置くと使いやすいです。
// よい例
function fetchUser(id, cache = true) {}
- 古い書き方との違い（ES5以前）:
以前はこう書いていました（今も動くけど冗長）。
function greet(name) {
name = (name === undefined) ? "ゲスト" : name;
console.log(`こんにちは、${name}さん！`);
}
実用パターン集
文字列の整形（区切りのデフォルト）
function joinNames(names, sep = ", ") {
return names.join(sep);
}
joinNames(["Alice", "Bob"]); // "Alice, Bob"
joinNames(["Alice", "Bob"], " / "); // "Alice / Bob"
数値の計算（倍率のデフォルト）
function multiply(a, b = 1) {
return a * b;
}
multiply(5); // 5（5 * 1）
multiply(5, 2); // 10
オプションオブジェクトのデフォルト（よく使う）
function createButton(label = "送信", options = { color: "blue", size: "md" }) {
return { label, ...options };
}
createButton();
// { label: "送信", color: "blue", size: "md" }
createButton("保存", { color: "green" });
// { label: "保存", color: "green", size: "md" } ← sizeはデフォルトを維持
分割代入と組み合わせる（安全にオプションを受け取る）
function setup(
{ host = "localhost", port = 8080 } = {} // ← 引数自体が省略されても安全
) {
return `http://${host}:${port}`;
}
setup(); // "http://localhost:8080"
setup({ port: 3000 }); // "http://localhost:3000"
setup({ host: "example.com" });// "http://example.com:8080"
- ポイント: 左の {} にもデフォルトを設定すると、引数まるごと省略してもエラーになりません。
練習問題（手を動かして理解を深める）
- 省略時に円の半径を 1 として面積を返す関数 areaCircle を作る
// ヒント: Math.PI, デフォルト引数
function areaCircle(r /* ここにデフォルト */) {
// 実装
}
console.log(areaCircle()); // 3.14159...
console.log(areaCircle(2)); // 12.56636...
- ユーザーの表示名 displayName を作る
第一引数 first、第二引数 last。last が省略されたら first だけ返す。どちらも省略されたら “ゲスト” を返す。
function displayName(first /* ここにデフォルト */, last /* ここにデフォルト */) {
// 実装
}
displayName(); // "ゲスト"
displayName("太郎"); // "太郎"
displayName("太郎", "山田");// "太郎 山田"
- fetch のような関数 getData を作る
url は必須。第二引数 options のデフォルトは { method: “GET”, timeout: 5000 } とし、呼び出し側の値で上書き可能にする。
function getData(url, options /* ここにデフォルト */) {
// 実装（ここではオブジェクトを返すだけでOK）
}
getData("/api/users");
// { url: "/api/users", method: "GET", timeout: 5000 }
getData("/api/users", { timeout: 10000 });
// { url: "/api/users", method: "GET", timeout: 10000 }
直感で覚えるためのコツ
- 「渡されなかったら、この値にしておく」と考える。
- falsy（0、””、false、null）と undefined を混同しない。 デフォルトは undefined にだけ発動。
- デフォルトは呼び出し時に評価。 関数や計算式を置くと「毎回」新しく計算される。
- オプションはオブジェクトで受けて、分割代入＋デフォルトが鉄板。
