JavaScript - Опциональнаяцепочка

Здравствуйте, будущие маги JavaScript! ? Сегодня мы отправимся в увлекательное путешествие в мир опциональной цепочки (Optional Chaining). Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным гидом, и мы будем двигаться шаг за шагом. К концу этого урока вы будете.chain как профи! Погружаемся!

Проблема с несуществующими свойствами

Представьте, что вы пытаетесь найти книгу в огромной библиотеке. Вы знаете, что она должна быть в секции "Научная фантастика" на третьем этаже, в заднем углу. Но что, если в библиотеке даже нет третьего этажа? Или что, если нет секции "Научная фантастика"? Это та проблема, с которой мы часто сталкиваемся в JavaScript при работе с вложенными объектами.

Давайте рассмотрим пример:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

Если вы запустите этот код, вы получите ошибку: "Cannot read property 'books' of undefined". Почему? Потому что library.fiction.sciFi не существует! Вот где на помощь приходит опциональная цепочка.

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

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

Давайте перепишем наш предыдущий пример с использованием опциональной цепочки:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

Теперь вместо выброса ошибки это просто вернет undefined. Это как будто вы говорите: "Если существует sciFi, дайте мне его books. Если нет, не волнуйтесь!"

Опциональная цепочка с вызовами функций

Опциональная цепочка не только для свойств объектов. Вы можете использовать ее и с вызовами функций! Давайте представим, что у нас есть библиотечная система, где книги можно брать в прокат:

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`Берём в прокат ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

В этом примере "The Hobbit" будет взят в прокат, но с "Dune" ничего не произойдет, потому что sciFi не существует. Никаких ошибок, просто гладкое плавание!

Опциональная цепочка с выражениями

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

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

Это вернет undefined, потому что нет пользователя с ID '789', но не выбросит ошибку.

Опциональная цепочка с оператором "delete"

Оператор delete также можно использовать с опциональной цепочкой. Это полезно, когда вы хотите удалить свойство, которое может не существовать:

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

Первое delete работать как预期, удаляя innerProp. Второе не сделает ничего, но не выбросит ошибку.

Короткое замыкание с опциональной цепочкой

Опциональная цепочка имеет полезную функцию called короткое замыкание. Если левая часть ?. равна null или undefined, оценка останавливается и возвращает undefined:

const obj = null;
console.log(obj?.prop?.subProp);  // Возвращает undefined

Это super полезно для избежания надоедливых ошибок "Cannot read property of null"!

Оператор nullish coalescing с опциональной цепочкой

Оператор nullish coalescing (??) работает отлично с опциональной цепочкой. Он позволяет вам указать значение по умолчанию, если результат опциональной цепочки равен null или undefined:

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? 'безработный');  // Возвращает 'безработный'
console.log(user.details?.age ?? 'неизвестно');     // Возвращает 30

Это идеально для предоставления значений по умолчанию, когда свойства могут не существовать.

Вот таблица, резюмирующая методы, которые мы рассмотрели:

Метод	Синтаксис	Описание
Доступ к свойствам	obj?.prop	Безопасный доступ к вложенным свойствам объектов
Вызов функции	func?.()	Безопасный вызов функции, которая может не существовать
Выражение	obj?.[expr]	Безопасный доступ к свойствам с динамическими или специальными именами
Оператор delete	delete obj?.prop	Безопасное удаление свойства, которое может не существовать
Короткое замыкание	obj?.prop?.subProp	Остановка оценки, если любая часть равна null или undefined
С опциональной цепочкой и оператором nullish coalescing	obj?.prop ?? defaultValue	Указание значения по умолчанию для null или undefined результатов

И вот оно, folks! Вы только что повысили свои навыки JavaScript с помощью опциональной цепочки. Помните, программирование как конструирование из LEGO - начните с основ, и перед тем как вы это осознаете, вы будете создавать шедевры. Продолжайте практиковаться, stay curious, и счастливого кодирования! ??‍??‍?

Credits: Image by storyset