JS Core

Optional chaining

Научиться безопасно обращаться к вложенным свойствам объектов с помощью ?. , избегая ошибок при отсутствии промежуточных значений.

Начальный (Beginner)
Нужно знать:Объекты

Кратко

Optional chaining (?.) — оператор, который безопасно обращается к свойствам. Если промежуточное значение null или undefined, выражение вернёт undefined вместо ошибки. Раньше приходилось писать длинные проверки.


Подробно

Проблема без optional chaining: const user = {}; console.log(user.address.city); // TypeError: Cannot read property 'city' of undefined

Решение с optional chaining: const user = {}; console.log(user?.address?.city); // undefined (без ошибки!)

Синтаксис: obj?.prop // свойство obj?.[key] // свойство через переменную obj?.method() // метод

Как это работает:

  • Если user — null/undefined → undefined
  • Если user.address — null/undefined → undefined
  • Если user.address.city — существует → возвращает значение

Раньше (без ?.): let city = user && user.address && user.address.city;

Теперь (с ?.): let city = user?.address?.city;

Optional chaining также работает с методами: user.greet?.() // если greet существует — вызовет, нет — undefined


Ментальная модель

?. — как безопасная лестница. Если на каком-то этаже лестницы нет (null/undefined), вы не упадёте — просто вернётесь в начало (undefined).


Примеры

**Самый простой:**

javascript
const user = { name: 'Анна' };

// Без optional chaining:
// console.log(user.address.city); // Ошибка!

// С optional chaining:
console.log(user?.address?.city); // undefined

?. проверяет каждое звено цепочки. Если адреса нет — не падает с ошибкой.

**Простой:**

javascript
const data = {
  user: {
    name: 'Анна',
    posts: [
      { title: 'Первый пост' }
    ]
  }
};

console.log(data?.user?.posts?.[0]?.title); // 'Первый пост'
console.log(data?.user?.posts?.[5]?.title); // undefined

?. работает с любым количеством вложеностей и с массивами.

**Реальный пример:**

javascript
const config = {
  settings: {
    theme: 'dark'
  }
};

// Без ?. — длинная проверка:
let theme1 = config && config.settings && config.settings.theme;

// С ?. — коротко:
let theme2 = config?.settings?.theme;

console.log(theme2); // 'dark'

?. заменяет длинные цепочки && — код становится короче и читаемее.


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

**Неправильно:** Думать, что ?. предотвращает все ошибки

**Почему:** ?. защищает только от null/undefined. Другие ошибки (например, вызов не-функции) — нет.

**Правильно:** ?. — это безопасный доступ к свойствам, а не универсальная защита от ошибок.

**Неправильно:** Использовать ?. для каждого обращения к свойству

**Почему:** Если вы уверены, что значение существует — ?. излишен и загромождает код.

**Правильно:** Используйте ?. когда есть реальная возможность отсутствия значения.


Важно запомнить

  • ?. безопасно обращается к свойствам
  • Если промежуточное значение null/undefined → undefined
  • ?. работает с объектами и массивами
  • ?.method() — безопасный вызов метода
  • Заменяет длинные цепочки &&

Связь

Назад: Вы знаете объекты (J11) — теперь вы умеете безопасно обращаться к вложенным свойствам.

Вперёд: Следующий урок (J13) — массивы: упорядоченные коллекции значений.

Материалы курса JS Core — PROlab Academy.