Что такое опциональная цепочка в JavaScript и как она работает?

Что такое опциональная цепочка в JS?

• оператор, который обеспечивает безопасный доступ к вложенным свойствам
• синтаксис: obj?.prop?.subprop
• не допускает ошибку TypeError при обращении к null или undefined
• возвращает undefined, если промежуточного свойства нет
• уменьшает объём кода без явных проверок if или &&
• особенно удобна для глубоко вложенных объектов и внешних данных
• поддерживается актуальными версиями ECMAScript, современными браузерами и Node.js

Опциональная цепочка упрощает проверку вложенных свойств и помогает безопасно обращаться к данным без ошибок.

Подробный ответ

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

Опциональная цепочка (optional chaining) в JavaScript — это синтаксический сахар для безопасного доступа к вложенным свойствам объекта. Если промежуточная ссылка равна null или undefined, выражение не вызывает ошибку типа TypeError. Оператор ?. сначала проверяет значение слева и лишь затем продолжает обращение к следующему уровню.

Ключевые моменты

• Конструкция делает код короче и безопаснее. Например, user?.address?.street вернёт undefined, если отсутствует user или address, вместо того чтобы выбросить ошибку.
• Оператор появился в ECMAScript 2020 и поддерживается современными браузерами, а также Node.js 14+.
• Его часто комбинируют с оператором nullish coalescing (??), чтобы задать значение по умолчанию, например: user?.name ?? 'гость'.
• Опциональная цепочка работает не только со свойствами: её можно применять при вызове функций (obj?.method()) и при обращении к элементам массива (arr?.[0]).

Практический контекст

Опциональная цепочка заметно сокращает число вложенных проверок через if и логические операторы. Это улучшает читаемость и снижает риск ошибок при работе с внешними API, где структура объекта может меняться. Например, в React 18 её часто используют для условительного рендера и безопасного обращения к необязательным данным из props.