Необов'язковий ланцюг (?.) та нульове об'єднання (??) у JavaScript

Операція необов'язкового ланцюга (?.)

Оператор необов'язкового ланцюга ?. дозволяє безпечно отримувати доступ до глибоко вкладених властивостей, не перевіряючи кожен рівень на null або undefined. Якщо будь-яка частина є null/undefined, вираз коротко зупиняється і повертає undefined.

Без необов'язкового ланцюга

javascript

// ❌ Багато коду і схильний до помилок
const city = user && user.address && user.address.city;

// ❌ Викличе помилку, якщо user або address є null/undefined
const city = user.address.city; // TypeError!

З необов'язковим ланцюгом

javascript

// ✅ Безпечно і чисто
const city = user?.address?.city; // undefined, якщо будь-яка частина є null/undefined

Необов'язкові виклики методів

javascript

const result = obj.method?.();       // Виклик тільки якщо метод існує
const item = arr?.[0];               // Безпечно доступ до індексу масиву
const value = map?.get?.("key");     // Ланцюгування кількох перевірок

Практичні приклади

javascript

// Відповідь API
const userName = response?.data?.user?.name ?? "Unknown";

// Обробник подій
document.querySelector("#btn")?.addEventListener("click", handler);

// Необов'язковий зворотний виклик
function fetchData(url, onSuccess) {
  fetch(url)
    .then(res => res.json())
    .then(data => onSuccess?.(data));
}

Об'єднання null (??)

Оператор ?? повертає правий операнд, коли лівий операнд є null або undefined — і тільки ці два значення.

?? проти ||

javascript

// || обробляє ВСІ хибні значення як "порожні"
0 || "default";        // "default" (0 є хибним!)
"" || "default";       // "default" (порожній рядок є хибним!)
false || "default";    // "default"

// ?? обробляє тільки null/undefined як "порожні"
0 ?? "default";        // 0 ✅
"" ?? "default";       // "" ✅
false ?? "default";    // false ✅
null ?? "default";     // "default"
undefined ?? "default"; // "default"

Коли використовувати ??

javascript

// ✅ Налаштування, де 0 або "" є допустимими значеннями
const port = config.port ?? 3000;
const name = user.name ?? "Anonymous";
const count = response.count ?? 0;

// ❌ Не використовуйте || тут — це ігноруватиме допустимий 0
const timeout = settings.timeout || 5000; // Помилка, якщо timeout є 0!
const timeout = settings.timeout ?? 5000; // Вірно ✅

Присвоєння об'єднання null (??=)

javascript

let user = { name: "Alice" };

user.name ??= "Default";   // "Alice" (не null, тому без змін)
user.age ??= 25;           // 25 (undefined, тому присвоєно)
user.score ??= 0;          // 0 (undefined, тому присвоєно)

Комбінування ?. і ??

javascript

const displayName = user?.profile?.displayName ?? "Guest";
const theme = settings?.appearance?.theme ?? "light";
const items = response?.data?.items ?? [];

Таблиця порівняння

Оператор	Повертає значення за замовчуванням, коли	Випадок використання
`\|\|`	Будь-яке хибне значення (0, "", false, null, undefined, NaN)	Логічні значення за замовчуванням
`??`	Тільки null або undefined	Збереження допустимих хибних значень
`?.`	Безпечний доступ до вкладених властивостей	Глибокий доступ до властивостей

Важливо:

Використовуйте ?? замість ||, коли 0, "" або false є допустимими значеннями. Комбінуйте ?. з ?? для безпечного доступу до властивостей з значеннями за замовчуванням: user?.name ?? "Guest".

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

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

Premium

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

Дочитали статтю?

Практика завдань