Пошук уроків, статей та іншого контенту
Як оператор ?. запобігає помилкам при читанні глибоко вкладених та відсутніх полів об'єкта.
Спроба прочитати властивість неіснуючого об'єкта кидає помилку і зупиняє виконання скрипту:
const user = { profile: null };
console.log(user.profile.avatar); // TypeError: Cannot read properties of nullconst avatar = user && user.profile && user.profile.avatar; // громіздкоТой самий результат, набагато коротше й читабельніше:
const avatar = user?.profile?.avatar; // undefined, без помилкиПрацює й для викликів методів, і для елементів масиву:
user.getName?.(); // викличе getName, тільки якщо це функція
users?.[0]?.name; // безпечний доступ до першого елемента масиву?. зупиняє обчислення лише коли ліва частина null або undefined — на будь-яке інше falsy-значення (0, порожній рядок) він не реагує і продовжує ланцюжок.
Найкорисніший патерн — поєднання ?. для безпечного доступу і ?? для значення за замовчуванням:
const city = user?.address?.city ?? "Не вказано";Очікування, що ?. зупиняє ланцюжок на будь-якому falsy-значенні (0, порожній рядок) — насправді лише на null/undefined.
Надмірне «обвішування» ?. там, де об'єкт гарантовано існує — кожен зайвий ?. приховує потенційну помилку в логіці, замість того щоб дати їй проявитись явно.
Використання || замість ?? для значення за замовчуванням після ланцюжка — та сама пастка з попереднього уроку: 0 чи порожній рядок можуть бути валідним, а не «відсутнім» значенням.
Optional chaining (?.) зупиняє звернення до вкладеної властивості одразу, щойно попередня ланка ланцюжка виявляється null або undefined, повертаючи undefined замість помилки — і працює так само для викликів методів і елементів масиву. У парі з ?? він дає короткий, безпечний спосіб дістати глибоко вкладене значення з запасним варіантом за замовчуванням.
Спробуйте самостійно
Маючи об'єкт const order = { customer: { name: "Марія" } }, напишіть вираз, який безпечно дістане order.customer.address.city і поверне "Невідомо", якщо адреси немає.