?. 演算子によるオプショナルチェーン

問題点

const user = {};
console.log(user.profile && user.profile.name);

?.演算子

const user = {};
console.log(user.profile?.name); // undefined, no error

深いプロパティの読み取り

const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"

短絡評価

const data = { user: null };
console.log(data.user?.address?.city); // undefined

nullish値だけがトリガーになる

const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"

&&との比較

const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);

呼び出し後のチェーン

const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080

チェーン途中での短絡評価

const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/d

代入には使えない

const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);

配列との組み合わせ

const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"

使いすぎを避ける

const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"

クイックチェック

まとめ