Тест-драйв профессии Frontend-разработчик

Что означает знак вопроса в строке 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

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

2 0
Аватар пользователя Aleksey
Aleksey
05 апреля 2023

Подробнее о том, когда лучше отказаться от использования ?. оператора:

  1. Когда необходимо явно обработать отсутствие значения. Например, если мы ожидаем, что свойство объекта будет иметь определенное значение, и если его нет, то нужно выполнить какие-то дополнительные действия.

  2. Когда нужно обеспечить совместимость с более старыми версиями JavaScript. Оператор опциональной последовательности был добавлен в ECMAScript 2020, поэтому его использование может привести к проблемам совместимости с более старыми браузерами или средами выполнения JavaScript.

  3. Когда нужно улучшить читаемость кода. Иногда использование оператора опциональной последовательности может усложнить чтение кода, особенно если он содержит множество вложенных свойств и методов.

0 0

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки

Бесплатные курсы

Бесплатные курсы по тестированию, дата-аналитике, верстке, программированию на Python, Java, PHP и JavaScript.