Хотя необязательная цепочка уже давно существует во многих языках программирования, она совсем недавно стала доступна в Javascript с выпуском ES2020. Веб-документы MDN описывают необязательную цепочку как «способ упростить доступ к значениям через связанные объекты, когда возможно, что ссылка или функция могут быть неопределенными или нулевыми». Необязательная цепочка — очень ценный инструмент, который позволяет вам получить доступ к глубоко вложенным свойствам объекта, не выдавая ошибку, если свойство не существует. Либо свойство существует и к нему можно получить доступ, либо оно не существует, и вместо него будет возвращено значение undefined. До того, как в Javascript появилась необязательная цепочка, оператор && должен был проверять, является ли объект неопределенным или нулевым, прежде чем обращаться к его свойствам.
const street = restaurant && restaurant.address && restaurant.address.street
Мы здесь говорим: «У нас есть ресторан? Если да, то у нас есть адрес этого ресторана? Если да, то какая улица по этому адресу?» Если бы для ресторана не было улицы, это было бы возвращено как неопределенное. До необязательных цепочек это был самый эффективный способ проверить, является ли объект неопределенным или нулевым, прежде чем обращаться к его свойствам.
const street = restaurant?.address?.street
Эта строка кода с использованием необязательного оператора цепочки (?.) эквивалентна приведенной выше строке кода с использованием оператора &&. Если ресторан или адрес окажется неопределенным или нулевым, наш код просто будет возвращен как неопределенный, в отличие от ошибки, которую мы получили бы, если бы он был написан таким образом.
const street = restaurant.address.street
Uncaught TypeError: Cannot read property 'street' of undefined
Необязательная цепочка — отличный инструмент для простоты и удобочитаемости. Он имеет множество применений и может даже работать с вызовами функций. Как и прежде, эти следующие две строки кода работают с объектом, который может быть определен или не определен, и по существу эквивалентны.
const tableCount = restaurant.getTableCount && restaurant.getTableCount() const tableCount = restaurant.getTableCount?.()
Обе эти строки кода проверяют, что переменная ресторана имеет свойство getTableCount, прежде чемпопытаться вызвать эту функцию. Если функция существует, она будет вызвана, однако, если она не существует, она просто вернет значение undefined. Помимо необязательного объединения функций, есть еще одно полезное использование, необязательное объединение в цепочку с массивами.
const firstRestaurant = array && array[0] const firstRestaurant = array?.[0]
Еще раз, первая строка кода может быть упрощена во вторую строку кода с помощью необязательного объединения. Здесь мы хотим получить доступ к элементу в массиве, используя индекс, однако сначала мы хотим убедиться, что массив определен. Если массив не определен, будет возвращено значение undefined вместо того, чтобы Javascript пытался получить доступ к индексу массива.
Необязательная цепочка — это чистый, динамичный и удобочитаемый способ предотвращения ошибок и доступа к свойствам, когда мы не уверены, определен ли объект.
Источники:
