18. Опциональная цепочка ?.

JavaScript: Мозги. Урок: Опциональная цепочка ?.

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

Что такое опциональная цепочка?

Опциональная цепочка – это синтаксическая конструкция в JavaScript, которая позволяет читать значение свойства, расположенного глубоко внутри цепочки связанных объектов, не проверяя явно каждое звено цепочки на наличие null или undefined. Если какое-либо звено в цепочке окажется null или undefined, выражение немедленно вернет undefined, не вызывая ошибку.

Примеры кода

// Пример 1: Объект пользователя
const user = {
  profile: {
    address: {
      street: 'Main Street',
    },
  },
};

// Доступ к улице через опциональную цепочку
const street = user?.profile?.address?.street; // 'Main Street'

console.log(street);

// Пример 2: Объект без address
const userWithoutAddress = {
  profile: {},
};

// Попытка доступа к улице через опциональную цепочку
const streetWithoutAddress = userWithoutAddress?.profile?.address?.street; // undefined

console.log(streetWithoutAddress);

// Пример 3: Использование с функциями
const obj = {
  func: function() {
    return 'Hello';
  }
};

const result = obj?.func?.(); // 'Hello'

console.log(result);

const objWithoutFunc = {};
const resultWithoutFunc = objWithoutFunc?.func?.(); // undefined

console.log(resultWithoutFunc);

// Пример 4: Доступ к элементам массива
const arr = [1, 2, 3];
const element = arr?.[10]; // undefined

console.log(element);

Жизненный пример

Представьте себе веб-приложение, которое отображает информацию о пользователе, полученную с сервера. Данные с сервера могут быть неполными, и некоторые поля могут отсутствовать.

// Предположим, мы получили такой объект с сервера
const userData = {
  name: 'John Doe',
  address: {
    city: 'New York',
  },
  // phone: '123-456-7890' // Пользователь не указал телефон
};

// Без опциональной цепочки:
// const phone = userData.phone.number; // Ошибка! Cannot read properties of undefined (reading 'number')

// С опциональной цепочкой:
const phone = userData?.phone?.number; // undefined

if (phone) {
  console.log('Телефон пользователя:', phone);
} else {
  console.log('Телефон пользователя не указан.');
}

// В React компонентах часто используют опциональную цепочку для доступа к данным, полученным через props
// или из Redux store.

// Пример (псевдокод React компонента):
/*
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>Город: {user?.address?.city}</p>
      <p>Телефон: {user?.phone || 'Не указан'}</p>
    </div>
  );
}
*/

В фреймворках, таких как React, Angular или Vue.js, опциональная цепочка широко используется для безопасного доступа к данным, которые могут быть получены асинхронно или могут отсутствовать. Это помогает избежать ошибок и сделать код более надежным.

Ключевые моменты

• Опциональная цепочка (?.) упрощает доступ к свойствам вложенных объектов.
• Если какое-либо звено в цепочке null или undefined, возвращается undefined.
• Помогает избежать ошибок TypeError: Cannot read properties of undefined (reading '...').
• Можно использовать с вызовами функций и доступом к элементам массива.
• Широко применяется в современных JavaScript фреймворках и библиотеках.

Интерактивный пример