Optional chaining и nullish coalescing

Optional chaining (?.) — оператор безопасного доступа к свойствам, прерывающий цепочку и возвращающий undefined при null/undefined; nullish coalescing (??) возвращает правый операнд только если левый null или undefined.

Зачем нужно

До ES2020 для безопасного доступа к вложенным свойствам требовались длинные цепочки && или try/catch. Оба оператора кардинально сокращают этот boilerplate. ?? решает проблему оператора ||, который отбрасывает не только null/undefined, но и 0, '', false.

Где используется

• Работа с данными из API (вложенные объекты, опциональные поля)
• Безопасный вызов методов, которые могут быть undefined
• Значения по умолчанию для конфигурации
• Работа с DOM (элемент может не существовать)

Основной контент

Optional chaining (?.)

const user = {
  profile: {
    address: {
      city: 'Москва'
    }
  }
};

// Без optional chaining — многословно
const city1 = user && user.profile && user.profile.address
  && user.profile.address.city;

// С optional chaining — коротко
const city2 = user?.profile?.address?.city;
console.log(city2); // 'Москва'

// Если что-то null/undefined — возвращает undefined (не ошибка)
const noUser = null;
console.log(noUser?.profile?.city); // undefined

// Вызов методов
const str = null;
console.log(str?.toUpperCase()); // undefined (не ошибка!)

const arr = null;
console.log(arr?.map(x => x * 2)); // undefined

// Доступ по индексу
const list = null;
console.log(list?.[0]); // undefined

Nullish coalescing (??)

// ?? возвращает правый операнд если левый null или undefined
const config = {
  timeout: 0,
  retries: null,
  debug: false,
  name: ''
};

// || — теряет falsy значения
console.log(config.timeout || 3000);  // 3000 (неправильно! timeout = 0)
console.log(config.debug || true);    // true (неправильно! debug = false)
console.log(config.name || 'default'); // 'default' (может быть неправильно!)

// ?? — только null/undefined
console.log(config.timeout ?? 3000);  // 0 (правильно!)
console.log(config.debug ?? true);    // false (правильно!)
console.log(config.name ?? 'default'); // '' (правильно!)
console.log(config.retries ?? 3);     // 3 (retries = null → дефолт)

Комбинация ?. и ??

const response = {
  data: {
    users: null
  }
};

// Безопасный доступ + дефолтное значение
const users = response?.data?.users ?? ;
console.log(users); // 

// Безопасный вызов функции обратного вызова
function process(data, callback) {
  const result = transform(data);
  callback?.(result); // вызовет только если callback не null/undefined
}

// Опциональный chaining с индексом
const firstUser = response?.data?.users?.[0] ?? { name: 'Гость' };

Nullish Assignment (??=)

// ??= — присвоить если значение null или undefined
let settings = {
  theme: null,
  lang: 'ru',
  timeout: 0
};

settings.theme ??= 'light';   // theme = 'light' (был null)
settings.lang ??= 'en';       // lang = 'ru' (не null, не меняем)
settings.timeout ??= 5000;    // timeout = 0 (не null, не меняем!)

console.log(settings);
// { theme: 'light', lang: 'ru', timeout: 0 }

Частые ошибки

• || вместо ?? для значений по умолчанию — options.count || 10 вернёт 10 при count = 0. Используйте ?? когда 0, false, '' — допустимые значения.
• Чрезмерная цепочка ?. — a?.b?.c?.d?.e?.f маскирует архитектурные проблемы. Если данные всегда должны присутствовать — нужна явная проверка с информативной ошибкой.
• Смешение ?. и ! (TypeScript) — obj!.prop отключает null-проверку TypeScript. Предпочитайте ?. для реальной безопасности.

Связанные темы

• _MOC JavaScript
• 1, 2, 3
• WeakMap и WeakSet
• _MOC Функции

Ресурсы

• MDN — Optional chaining
• MDN — Nullish coalescing
• javascript.info — Optional chaining

---

🎓 Источник: 💻 Новое в JavaScript ES.Next, ECMAScript 2020

• 📅 2019-12-03 · YouTube
• Тезисы: оба оператора пришли в ES2020. ?. останавливает цепочку при null/undefined и возвращает undefined. ?? — coalescing только на nullish, в отличие от || который реагирует на любое falsy

🎓 Источник: 💻 Report by 1st year students ECMAScript 2022 and 2021 features

• 📅 2022-06-13 · YouTube
• Тезисы: доклад студентов 1-го курса. Logical assignment операторы ??=, ||=, &&= — современный синтаксис. ??= особенно полезен для дефолтов

🎓 Источник: 💫 JavaScript 2024 — 2025 українською для початківців

• 📅 2024-01-02 · YouTube
• Тезисы: Optional chaining и nullish — стандарт modern JS. ?. для опционального вызова метода, ?.[key] для опционального индекса