デフォルト値の設定とは何か
デフォルト値は「値が未指定（または欠損）のときに使う“代替値”」です。ここが重要です：何を“未指定”とみなすかで手段が変わります。undefined/null だけを未指定と扱うのか、0・””・false まで未指定とみなすのかを、意図に合わせて選びます。JavaScript では主に null 合体（??）、論理 OR（||）、分割代入の既定値、関数の既定引数、オプショナルチェーン（?.）との併用が基本パターンです。
null 合体演算子（??）で安全な既定値
undefined/null のときだけ既定値にする
const cfg = { timeout: undefined, retry: 0 };
const timeout = cfg.timeout ?? 5000; // 5000（undefined なので既定値）
const retry = cfg.retry ?? 2; // 0（値あり扱い、既定値は発動しない）
ここが重要です：?? は「undefined と null のときにだけ」既定値を使います。0・””・false を“有効な値”として尊重したい場合は必ず ?? を選びます。
オプショナルチェーンと組み合わせる（欠損に強い）
const user = {}; // user.profile が無い可能性
const theme = user.profile?.theme ?? "light";
?. は「存在すれば辿る、無ければ undefined」。これと ?? を合わせると、ネスト欠損でも落ちない既定値が書けます。
論理 OR（||）で“偽値”も既定にする
0・””・false まで未指定として扱いたいとき
const input = { page: 0, q: "" };
const page = input.page || 1; // 1（0 を未指定扱い）
const q = input.q || "all"; // "all"（空文字を未指定扱い）
ここが重要です：|| は「偽値（false, 0, “”, NaN, null, undefined）」を未指定として扱います。0 や “” が有効な値なら使うべきではありません。誤った上書きの温床になります。
代入版（??= と ||=）で“その場で補完”
プロパティへ直接既定値を入れる（null/undefined のときだけ）
const cfg = { timeout: undefined, retry: 3 };
cfg.timeout ??= 5000; // timeout が undefined/null の時だけ 5000 を代入
cfg.retry ??= 2; // 変更されない（3 は値あり）
偽値を未指定扱いで補完する（慎重に）
const params = { page: 0, q: "" };
params.page ||= 1; // 1（0 を未指定扱いで上書き）
params.q ||= "all"; // "all"（空文字を未指定扱い）
ここが重要です：??= は「安全な補完」、||= は「偽値も補完」。データ仕様に合わせて選びます。
分割代入の既定値で“宣言時に整える”
単純な既定値
const cfg = { retry: 3 }; // timeout が無い
const { retry = 2, timeout = 5000 } = cfg;
// retry=3, timeout=5000
ネストの欠損に備える受け皿パターン
const payload = {}; // config が無いかも
const { config: { locale = "en", theme = "light" } = {} } = payload;
// 例外にならず、locale="en", theme="light"
ここが重要です：分割代入では ?. が使えません。中間に {} を既定値として置いて欠損を吸収するのが定番です。
関数の既定引数で“呼び出しレベル”から安全化
受け取る時点で既定値を入れる
function connect({ host = "localhost", port = 8080, secure = false } = {}) {
// 何も渡されなくても安全、個別キーにも既定が入る
}
スカラー引数の既定値
function paginate(page = 1, perPage = 20) {
// page や perPage が undefined のとき既定値になる
}
ここが重要です：関数の入口で整えると、内部コードがシンプルになります。外部入力に対して最も堅牢な層です。
マージで既定値を適用（スプレッド／Object.assign）
既定値 → ユーザー設定 → 実行時上書き（後勝ち）
const defaults = { theme: "light", lang: "ja", timeout: 5000 };
const userCfg = { lang: "en" };
const runtime = { theme: "dark" };
const cfg = { ...defaults, ...userCfg, ...runtime };
// { theme:"dark", lang:"en", timeout:5000 }
ここが重要です：後勝ちの合成で“必要な箇所だけ上書き”。欠損は defaults が補います。UI状態や設定での王道パターンです。
具体例で理解を固める（選び方の指針）
数値の 0 を有効値にしたい（?? を使う）
const options = { retries: 0 };
const retries = options.retries ?? 3; // 0（尊重される）
空文字は未指定として扱いたい（|| を使う）
const params = { q: "" };
const q = params.q || "all"; // "all"
ネストの欠損でも落ちない文言取得
const msg = { title: { ja: "ようこそ" } };
const title = msg.title?.ja ?? "Welcome"; // "ようこそ"
その場でオブジェクトへ既定値を補う
const cfg = {};
cfg.timeout ??= 5000;
cfg.theme ??= "light";
よくある落とし穴（ここが重要）
|| で“正当な 0 や空文字”を潰してしまう
const price = 0;
const shown = price || 100; // 100（意図せず上書き）
0・””・false を尊重したいなら ?? を使う。
分割代入で中間欠損を考慮しない
// NG: settings.api が undefined だと TypeError
// const { api: { host = "localhost" } } = settings;
// OK
const { api: { host = "localhost" } = {} } = settings;
既定値の“発動条件”を誤解する
分割代入の既定値は「undefined のときだけ」。null・0・”” は発動しません。必要なら後段で value ?? default を合わせて使う。
まとめ
デフォルト値の設定は「何を未指定とみなすか」を明確にして手段を選ぶのが核心です。undefined/null のみを対象にするなら ??／??=、偽値も既定にしたいなら ||／||=。分割代入の既定値とネストの {} 受け皿で宣言時に安全化し、関数の既定引数で入口から整える。設定の合成はスプレッドで後勝ちに。これらを使い分ければ、初心者でも意図どおりで壊れにくい“デフォルト設計”が書けます。