Кратко
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).
Примеры
**Самый простой:**
const user = { name: 'Анна' };
// Без optional chaining:
// console.log(user.address.city); // Ошибка!
// С optional chaining:
console.log(user?.address?.city); // undefined?. проверяет каждое звено цепочки. Если адреса нет — не падает с ошибкой.
**Простой:**
const data = {
user: {
name: 'Анна',
posts: [
{ title: 'Первый пост' }
]
}
};
console.log(data?.user?.posts?.[0]?.title); // 'Первый пост'
console.log(data?.user?.posts?.[5]?.title); // undefined?. работает с любым количеством вложеностей и с массивами.
**Реальный пример:**
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) — массивы: упорядоченные коллекции значений.