Nullish 合体 — ?? 演算子の正体
このトピックを修了すると
?? と || の違いを理解し、デフォルト値を設定する際にどちらを使用すべきかを判断できるようになります。
|| でデフォルト値を設定する
javascript
const port = config.port || 3000;config.port が falsy の場合、3000 を使用します。これは一般的なパターンです。しかし、落とし穴があります。
javascript
const config = { port: 0, debug: false, name: "" };
const port = config.port || 3000; // 3000 — 0 は falsy
const debug = config.debug || true; // true — false は falsy
const name = config.name || "default"; // "default" — "" は falsy0、false、"" は有効な値ですが、|| はこれらをすべて falsy とみなし、デフォルト値で上書きします。ポートを 0 に設定したのに 3000 になり、デバッグをオフにするために false を入力したのに true になります。
?? は null と undefined のみをチェックします
javascript
const port = config.port ?? 3000; // 0 — 維持
const debug = config.debug ?? true; // false — 維持
const name = config.name ?? "default"; // "" — 維持?? (nullish 合体演算子) は、左側の値が null または undefined の場合にのみ、右側の値を使用します。0、false、"" は有効な値として扱います。
text
|| → falsy チェック (0, "", false, null, undefined, NaN)
?? → nullish チェック (null, undefined のみ)実務における違い
API レスポンスからデフォルト値を設定する状況を見てみましょう。
javascript
const response = { total: 0, items: [], message: "" };
// || を使うと
const total = response.total || "N/A"; // "N/A" — 0 を無視
const msg = response.message || "없음"; // "없음" — 空文字列を無視
// ?? を使うと
const total = response.total ?? "N/A"; // 0 — 正確
const msg = response.message ?? "없음"; // "" — 正確関数パラメータのデフォルト値でも同じ問題が発生します。
javascript
function createUser(name, age) {
const userAge = age || 25; // age が 0 の場合？ 25 になる
const userAge2 = age ?? 25; // age が 0 の場合？ 0 を維持
}?? と || を組み合わせて使用することはできません
javascript
// SyntaxError
const value = a || b ?? c;?? と || (または &&) を括弧なしで組み合わせると、構文エラーになります。優先順位が曖昧であるため、JavaScript は明示的に禁止しています。括弧で囲む必要があります。
javascript
const value = (a || b) ?? c;選択基準
簡単です。
- 値が 「存在しない」 場合にデフォルト値を設定したい →
?? - 値が 「空である」 場合にデフォルト値を設定したい →
||
「存在しない」と「空である」は異なります。0 は空ですが、存在する値です。null は本当に存在しないものです。
ほとんどの場合、?? が意図により正確です。|| は、0 と "" を本当にデフォルト値で置き換えたい場合にのみ使用してください。
結論
??は、nullとundefinedの場合にのみデフォルト値を適用します。||は、すべての falsy 値 (0, false, "") にデフォルト値を適用します。 「値が存在しない」 場合にデフォルト値を設定するには、??が適切です。