Optional chaining оператор

JavaScriptJunior~1 хв читання

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]: безпечний доступ до елемента Чудово працює у зв'язці з ??

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.