オブジェクトのデフォルト引数 — function f(a = 1, b = {}) {}
関数の引数に「値が渡されなかったときの既定値（デフォルト）」を設定できます。
初心者は「未指定や undefined のときにだけ、右辺の値が使われる」と覚えると理解が速いです。
基本のコード例
function f(a = 1, b = {}) {
console.log("a:", a);
console.log("b:", b);
}
f(); // a: 1, b: {}
f(10); // a: 10, b: {}
f(undefined, {x:1}); // a: 1, b: {x:1}
f(null, null); // a: null, b: null（nullは未指定扱いではない）
- 未指定（または
undefined）ならデフォルトが使われる。 nullを渡したらデフォルトは使われない。「空」を明示した扱いになる。
よく使うテンプレート集
1. オブジェクトを安全に受け取る（空オブジェクトを既定値）
function config(opts = {}) {
const { theme = "light", debug = false } = opts;
console.log(theme, debug);
}
config(); // "light", false
config({ theme: "dark" }); // "dark", false
2. 依存するデフォルト値（前の引数を使う）
function greet(name = "ゲスト", message = `ようこそ ${name}`) {
console.log(message);
}
greet(); // "ようこそ ゲスト"
greet("Aki"); // "ようこそ Aki"
greet("Aki", "こんにちは！"); // "こんにちは！"
3. 配列や日付のデフォルト
function collect(list = []) {
list.push("item");
return list;
}
console.log(collect()); // ["item"]
console.log(collect([1])); // [1, "item"]
function stamp(date = new Date()) {
return date.toISOString();
}
4. デフォルト＋分割代入でプロパティごとに既定値
function drawRect({ w = 100, h = 100, color = "black" } = {}) {
console.log(`rect: ${w}x${h}, ${color}`);
}
drawRect(); // 100x100, black
drawRect({ w: 50 }); // 50x100, black
drawRect({ h: 80, color: "red" }); // 100x80, red
例題: フェッチ用オプションのデフォルト
function buildRequest(url, { method = "GET", headers = {}, body = null } = {}) {
return { url, method, headers, body };
}
console.log(buildRequest("/api"));
// { url: "/api", method: "GET", headers: {}, body: null }
console.log(buildRequest("/api", { method: "POST", body: "{}" }));
// { url: "/api", method: "POST", headers: {}, body: "{}" }
- 必要なものだけ上書きし、残りはデフォルトで埋める設計が簡単。
実務でのコツ
- 未指定扱いは
undefinedのみ:nullは「値あり」とみなされ、デフォルトは使われない。 - オブジェクト/配列の既定値は毎回新しい値が作られる:
b = {}やlist = []は呼び出しごとに新規生成されるので、前回の呼び出しと共有されない。 - 分割代入と併用が強力: 引数自体と各プロパティそれぞれにデフォルトを置ける。
- 計算や関数呼び出しもOK: 右辺は式として評価される。重い処理は毎回実行される点だけ注意。
ありがちなハマりポイントと対策
nullを渡してもデフォルトが効かない- 対策: 「未指定にしたい」なら
undefinedを渡すか、呼び出し側で省略する。
- 対策: 「未指定にしたい」なら
- 重い既定値の無駄な実行
- 対策: 右辺で重い処理をしない。必要なら関数内で遅延評価（必要になった時に生成）。
- 部分的なオプション上書きの難しさ
- 対策: 分割代入で各プロパティにデフォルトを置く。
練習問題（ページネーションの設定）
function setupPagination({ page = 1, perPage = 20, order = "desc" } = {}) {
console.log({ page, perPage, order });
}
setupPagination(); // { page:1, perPage:20, order:"desc" }
setupPagination({ perPage: 5 }); // { page:1, perPage:5, order:"desc" }
setupPagination({ page: 3, order: "asc" }); // { page:3, perPage:20, order:"asc" }
直感的な指針
- デフォルトは「未指定（
undefined）」のときだけ使われる。 - オブジェクト引数は
{}を既定値にし、分割代入でプロパティごとの既定値を置く。 - 前の引数を使って次の引数のデフォルトを作れる。
- 迷ったら「オプションオブジェクト＋分割代入」が読みやすくて安全。