オプショナルチェイニングとNull合体 ― 安全に取り出す

導入

深いオブジェクトから値を取り出すとき、途中が無いとエラーになります。?.（オプショナルチェイニング）と ??（Null合体）を使うと、無いときも落ちない安全なコードが書けます。ES2020 で入った、いまや必須の記法です。

説明

?. は、手前が null / undefined なら、その先を読まずに undefined を返します（エラーになりません）。

const user = { name: "太郎", address: { city: "東京" } };
console.log(user.address?.city);   // 東京
console.log(user.company?.name);   // undefined（company が無くてもエラーにならない）

?? は、左が null / undefined のときだけ右の値を使います。「値が無ければ既定値」を安全に書けます。

const guest = { name: null };
console.log(guest.name ?? "ゲスト");  // ゲスト

似た || との違いが重要です。|| は 0 や ""（空文字）も「無し」とみなしてしまいますが、?? は null / undefined だけを対象にします。「0 や空文字を正しい値として残したい」ときは ?? を使います。

console.log(0 || 100);   // 100 ← 0 が「無し」扱いされてしまう
console.log(0 ?? 100);   // 0   ← 0 はちゃんと残る
console.log("" ?? "既定"); // ""  ← 空文字も残る

?. と ?? は組み合わせられます。

const data = {};
console.log(data.user?.name ?? "名無し");  // 名無し

やってみよう

user から存在しないプロパティを ?. で読んでみたり、0 や "" に対して || と ?? の結果が変わることを確かめましょう。

演習

const config = { retries: 0 }; に対して、config.retries ?? 3 を表示してください。0 が既定値に置き換えられず、そのまま残ることを確かめます。