Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Optional chaining оператор». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Optional chaining (`?.`)** - це сучасний оператор (ES2020), який дозволяє безпечно звертатися до властивостей об'єктів, навіть якщо частина ланцюжка - `undefined` або `null`. **Ключове:** якщо значення до `?.` дорівнює `null` або `undefined`, повертається `undefined`, і програма не падає.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Optional chaining (**`?.`**)** - це сучасний оператор (ES2020), який дозволяє **безпечно звертатися до властивостей об'єктів**, навіть якщо частина ланцюжка - `undefined` або `null`. --- ## Проблема без optional chaining Припустимо, у нас є вкладений об'єкт: ```javascript const user = { profile: { name: 'Oleh' } }; ``` Якщо ми спробуємо звернутися до неіснуючого поля: ```javascript console.log(user.address.city); // TypeError: Cannot read properties of undefined ``` > Помилка виникає, тому що `user.address` - `undefined`, > а спроба звернутися до `undefined.city` ламає код. --- ## Рішення: оператор `?.` ```javascript console.log(user.address?.city); // undefined (без помилки) ``` > Якщо значення **до** `?.` **існує**, повертається властивість. > Якщо воно `undefined` **або** `null`, повертається `undefined`, і програма не падає. --- ## Як працює синтаксис ### 1. Доступ до властивостей ```javascript user?.profile?.name // "Oleh" user?.address?.city // undefined ``` ### 2. Доступ до методів ```javascript user.sayHi?.(); // викличе метод, якщо він існує ``` ### 3. Доступ до елементів масиву ```javascript const arr = null; console.log(arr?.[0]); // undefined (без помилки) ``` --- ## Приклад з API-даними ```javascript const response = { user: { name: 'Oleh', address: null } }; console.log(response.user?.address?.city); // undefined ``` Без `?.` довелося б писати довгі перевірки: ```javascript response && response.user && response.user.address && response.user.address.city ``` --- ## Optional chaining + nullish coalescing Часто їх використовують разом: ```javascript const city = user.address?.city ?? 'Не вказано'; console.log(city); // "Не вказано" ``` > `?.` безпечно звертається до властивості. > `??` задає типове значення, якщо результат `undefined` або `null`. --- ## Що робить під капотом ```javascript obj?.prop // еквівалентно: obj == null ? undefined : obj.prop ``` --- ## Де можна застосовувати | Ситуація | Приклад | Результат | |---|---|---| | Властивість об'єкта | `user?.name` | `'Oleh'` або `undefined` | | Вкладені об'єкти | `user?.address?.city` | безпечно | | Виклик методу | `user.method?.()` | викликається, якщо метод є | | Елемент масиву | `arr?.[0]` | перший елемент або `undefined` | --- ## Не можна використовувати ```javascript // не можна зліва від присвоєння user?.name = 'Alex'; // SyntaxError // не спрацює для перевірки існування (завжди undefined, не false) if (user?.missing) ... ``` --- ## Підсумок | Що робить | Як працює | |---|---| | **Optional chaining (**`?.`**)** | Безпечно звертається до властивості, не кидаючи помилку | | **Повертає** | `undefined`, якщо натрапляє на `null` або `undefined` | | **Використовується** | при доступі до вкладених властивостей, методів і елементів | | **Комбінується** | часто з `??` для типових значень | --- ## Коротко > `obj?.prop`: не впаде, якщо `obj` дорівнює `null` або `undefined` > `obj?.method?.()`: викличе метод, якщо він існує > `arr?.[0]`: безпечний доступ до елемента > Чудово працює у зв'язці з `??`Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.