Optional chaining: безопасный доступ к вложенным свойствам (?.)

Что такое Optional Chaining и зачем он нужен? 😎

Представь ситуацию: ты работаешь с объектом, у которого есть вложенные свойства, но некоторые из них могут отсутствовать (undefined или null). Обычный доступ через точку . приведёт к ошибке, если на каком-то уровне будет undefined.

const user = {
  name: "Alice",
  address: {
    city: "Wonderland",
    street: "Rabbit Hole"
  }
};

console.log(user.address.city); // "Wonderland" — всё ок
console.log(user.contacts.email); // TypeError: Cannot read property 'email' of undefined

Optional Chaining (?.) решает эту проблему! Если свойство не существует, вместо ошибки мы просто получим undefined.

console.log(user.contacts?.email); // undefined — без ошибок!

Как работает синтаксис `?.`

Оператор ?. проверяет, существует ли свойство перед точкой. Если да — движемся дальше, нет — возвращаем undefined.

Основные варианты использования:

Доступ к свойствам объекта
obj?.prop — если obj существует, вернёт obj.prop, иначе undefined.
Вызов методов
obj.method?.() — если метод существует, он будет вызван.
Доступ к элементам массива
arr?.[0] — если массив существует, вернёт первый элемент.

Примеры из реальной жизни 🛠️

Пример 1: Работа с API

Часто данные приходят с сервера вложенными, и не все поля обязательны:

const apiResponse = {
  user: {
    id: 1,
    profile: {
      name: "Bob",
      age: 30
    }
  }
};

const userName = apiResponse.user?.profile?.name; // "Bob"
const userEmail = apiResponse.user?.contacts?.email; // undefined (без ошибки)

Пример 2: Вызов метода, который может отсутствовать

Допустим, у объекта есть метод, но только если выполняется определённое условие:

const config = {
  debugMode: true,
  log: (message) => console.log(`DEBUG: ${message}`)
};

// Вызов метода, если он есть:
config.log?.("Starting app..."); // "DEBUG: Starting app..."

const anotherConfig = { debugMode: false };
anotherConfig.log?.("Hello?"); // Ничего не произойдёт (метода нет)

Пример 3: Работа с DOM

При работе с DOM-элементами Optional Chaining спасает от ошибок, если элемент не найден:

const element = document.querySelector(".non-existent-element");
const text = element?.textContent; // undefined (без ошибки)

Optional Chaining vs "Классическая" проверка

Раньше нам приходилось писать громоздкие проверки:

// Старый способ:
const city = user && user.address && user.address.city;

// С Optional Chaining:
const city = user?.address?.city;

👉 Optional Chaining делает код чище и читабельнее!

Особенности и подводные камни ⚠️

1. ?. останавливает вычисления при undefined/null
Если на каком-то этапе цепочки встретилось undefined или null, дальше проверка не идёт.

user?.contacts?.email?.work; // Если contacts === undefined, email даже не проверяется

2. Не работает на записи (obj?.prop = value)
Optional Chaining — только для чтения. Записывать так нельзя!

user?.name = "Alice"; // SyntaxError

3. Используй ?. только там, где свойство действительно может отсутствовать
Если ты уверен, что свойство существует, лучше использовать обычный доступ . — это быстрее.

Итоги 🎯

Optional Chaining (?.) — безопасный способ доступа к вложенным свойствам.
Избегает ошибок при обращении к undefined или null.
Упрощает код, заменяя многословные проверки.
Работает с свойствами, методами и элементами массива.

Теперь ты можешь писать код, который не падает из-за undefined или null! 🚀