LearnJS

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

Опциональная цепочка ?. позволяет безопасно обратиться к свойству, методу или элементу массива, даже если часть данных отсутствует.

let user = null;

console.log(user?.name);

Результат:

undefined

Если бы мы написали user.name, JavaScript выдал бы ошибку. Но с ?. выполнение не ломается: если слева null или undefined, результатом становится undefined.

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

Обычная точка . обращается к свойству объекта. Опциональная цепочка ?. делает почти то же самое, но сначала проверяет, есть ли объект.

let user = {
  name: 'Анна'
};

console.log(user?.name);

Результат:

Анна

Если объект есть, ?. работает как обычная точка.

Проблема без опциональной цепочки

Представим, что у пользователя может быть адрес, а может и не быть.

let user = {
  name: 'Анна'
};

console.log(user.address.city);

Такой код приведет к ошибке, потому что свойства address нет. JavaScript не может прочитать city у undefined.

Раньше такую проверку часто писали через &&:

let city = user && user.address && user.address.city;

С опциональной цепочкой запись получается короче:

let city = user?.address?.city;

console.log(city);

Результат:

undefined

Доступ к свойствам

Опциональная цепочка особенно полезна при работе с вложенными объектами.

let user = {
  name: 'Анна',
  address: {
    city: 'Москва'
  }
};

console.log(user?.address?.city);

Результат:

Москва

Если убрать address, код не упадет:

let user = {
  name: 'Анна'
};

console.log(user?.address?.city);

Результат:

undefined

Вызов методов

Опциональную цепочку можно использовать перед вызовом метода.

let user = {
  name: 'Анна',
  sayHi() {
    return 'Привет';
  }
};

console.log(user.sayHi?.());

Результат:

Привет

Если метода нет, ошибки не будет:

let user = {
  name: 'Анна'
};

console.log(user.sayHi?.());

Результат:

undefined

Такая запись полезна, когда метод может быть передан, а может отсутствовать.

Элементы массива

Опциональная цепочка работает и с массивами.

let users = [
  { name: 'Анна' },
  { name: 'Иван' }
];

console.log(users?.[0]?.name);

Результат:

Анна

Если массива нет, результатом будет undefined:

let users = null;

console.log(users?.[0]?.name);

Результат:

undefined

Опциональная цепочка вместе с ??

Часто ?. используют вместе с оператором ??, чтобы задать значение по умолчанию.

let user = {
  name: 'Анна'
};

let city = user?.address?.city ?? 'Город не указан';

console.log(city);

Результат:

Город не указан

Сначала JavaScript пытается получить user.address.city. Так как адреса нет, получается undefined. После этого ?? подставляет строку ‘Город не указан’.

Что важно помнить

Опциональная цепочка проверяет только то, что стоит слева от ?..

let user = null;

console.log(user?.address.city);

В этом примере ошибки не будет, потому что user равен null, и цепочка сразу остановится.

Но если объект есть, а вложенное свойство может отсутствовать, лучше ставить ?. на каждом опасном участке:

let user = {
  name: 'Анна'
};

console.log(user?.address?.city);

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

Итого

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