Что означает знак вопроса в строке comment?.author

Для чего ставится знак вопроса перед точкой при обращении к свойству объекта?

Ответы
Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
13 июля 2022

Этот оператор называется "оператор опциональной последовательности". Он позволяет обращаться в нутренним свойствам объекта, без риска что родительское свойство отсутствует в объекте. Чтобы лучше это понять, разберем пример.

Предположим у нас есть сущности пользователей с их адресами в виде объектов по типу:

const user = {
  name: 'Ivan',
  age: 29,
  address: {
    country: 'Russia',
    city: 'Perm',
    street: 'Leonova',
  },
};

Предположим мы хотим сформировать строку содержащую страну и город пользователя Russia, Perm. Для этого мы просто обращаемся к внутренним ключам объекта в ключе address:

const result = `${user.address.country}, ${user.address.city}`;
console.log(result); // => Russia, Perm

Но что если у нас будет пользователь с отсутствующим адресом? Такой код выдаст ошибку, потому что мы попытались обратиться к свойствам country и city у значения undefined:

const homelessUser = {
  name: 'Ivan',
  age: 29,
};
const result = `${homelessUser.address.country}, ${homelessUser.address.city}`; // TypeError: Cannot read properties of undefined (reading 'country')
console.log(result);

У объекта user нет свойства address, поэтому мы не можем к обратиться к нему. Чтобы избежать такой ошибки, используется оператор опциональной последовательности: добавляется знак вопроса после свойства, которого может не быть в объекте. Такой код уже не выдаст ошибку:

const homelessUser = {
  name: 'Ivan',
  age: 29,
};
const result = `${homelessUser.address?.country}, ${homelessUser.address?.city}`;
console.log(result); // => undefined, undefined

Не смотря на то, что это удобный инструмент, бездумно его использовать не стоит. Обычно его использование говорит о том, что в приложении есть проблемы. Например, в примере выше, должна стоять проверка на существование адреса пользователя. Если адреса нет, то нет смысла составлять строку. Если добавить такую проверку, то необходимость в использовании этого оператора отпадает.

0 0
Добавьте ваш ответ

Рекомендуемые курсы

middlewares
redux-forms
actions
reselect
5 часов
Посмотреть
полифиллы
AJAX
события
селекторы
20 часов
Посмотреть
шаблонизация
REST
мидлвары
тестирование
11 часов
Посмотреть