Использование Optional Chaining с массивами и функциями в JS

Быстрый ответ

Для обеспечения безопасного доступа к элементам массива или при вызове функций используйте ?..

Обращение к элементам массива:

const element = arr?.[index]; // Если индекс выходит за границы массива, ошибка не возникнет, результатом будет undefined.

Вызов функции:

const result = obj.method?.(...args); // Функция вернёт undefined, если указанный метод не найден.

Оператор условного цепочного обращения (?.) обеспечивает безопасное обращение к свойствам и методам объектов, исключая получение undefined или null в середине цепи вызовов.

Основные сценарии использования

Безопасное обращение к свойствам объекта

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

let name = user?.profile?.name; // Если 'profile' не существует, переменной 'name' будет присвоено значение undefined.

Подробнее об этом расскажет наш спикер на видео

Безопасный вызов функций

Для вызова методов объектов, существование которых неподтверждённо, используйте условное цепочное обращение, чтобы предотвратить возникновение ошибок выполнения:

obj.questionableMethod?.(); // Если метод отсутствует, ошибки не возникнет.

Извлечение элементов из массива

Безопасно извлекайте элементы из массивов, особенно после применения таких методов как filter, которые всегда возвращают массив:

const awaitedMatch = myArray?.filter(x => x === soughtValue)?.[0]; // Безопасно возвращает undefined, если совпадений не найдено.

Работа с компонентами и хуками в React

Проверку состояния хуков React и обработку неустойчивых пропсов теперь можно проводить с большей надёжностью:

const isOnline = useStatusHook?.('userID_123')?.isOnline; // Защищает от отсутствия хука и ошибок выполнения.
const displayName = props?.user?.name; // Безопасно, если пользователь не определён.

Рекомендации по использованию

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

• Не следует злоупотреблять его использованием: это может снизить читаемость кода и скрыть структурные проблемы.
• Исключения, связанные с выходом за границы массива: JavaScript не предупредит о таких ошибках. Они могут быть обнаружены лишь при дальнейшем использовании полученного объекта.
• Будьте предельно внимательны при вызове функций с побочными эффектами через ?..
• Всегда проверяйте совместимость: убедитесь, что ваша целевая среда исполнения поддерживает условное цепочное обращение.

Визуализация

Если проводить аналогию, то условное цепочное обращение можно представить как сетку безопасности для акробатов:

const circusPerformers = [
  { performer: { name: 'Жонглёр', act: () => '🤹‍♂️ Жонглирование' } },
  { performer: { name: 'Акробат', act: () => '🤸‍♀️ Акробатика' } },
  // Третий артист ещё осваивает учебник...
];

Номер без сетки безопасности:

const firstAct = circusPerformers[0].performer.act(); // 🤹‍♂️ Жонглирование
const thirdAct = circusPerformers[2].performer.act(); // 💥 Ошибка: Третий артист ещё готовится!

Установка сетки безопасности (или применение оператора ?.):

const safeFirstAct = circusPerformers[0]?.performer?.act?.(); // 🤹‍♂️ Жонглирование
const safeThirdAct = circusPerformers[2]?.performer?.act?.(); // 🎪 Без акции – словно новогодние обещания...

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

Закрепите свои навыки применения условного цепочного обращения

Для более сложных сценариев использования рассмотрим несколько примеров:

Комбинация с оператором объединения с null

Условное цепочное обращение в сочетании с оператором объединения с null (??) позволяет присваивать значения по умолчанию:

let name = user?.name ?? 'Аноним'; // 'Аноним', если 'name' не определён или равен null.

Проверяем наличие метода перед его вызовом

С помощью оператора ?. вы можете упростить проверку существования метода перед его вызовом:

if (typeof obj.method === 'function') {
  obj.method(args);
}

// Теперь всё значительно проще:
obj.method?.(args);

Работа с многомерными массивами

Уклонитесь от ошибок при обращении к несуществующим элементам многомерных массивов:

const nestedValue = matrix?.[x]?.[y]; // Не вызовет ошибку, даже если 'matrix[x]' не существует или не имеет ключа 'y'.

Динамический доступ к свойствам объектов

Оператор ?. также поддерживает динамический доступ к свойствам объектов:

const property = 'name';
const value = obj?.[property]; // Вернёт undefined, если свойства 'name' нет в объекте.

Полезные материалы

1. Optional chaining (?.) – JavaScript | MDN — подробное руководство по использованию оператора условного цепочного обращения в JavaScript.
2. Optional chaining · V8 — детали реализации оператора в движке JavaScript V8.
3. ES2020: optional chaining — анализ возможностей оператора в стандарте ES2020.
4. JavaScript operator: Optional chaining operator (?.) | Can I use... Support tables for HTML5, CSS3, etc — проверка поддержки оператора ?. в различных браузерах, как специализированный инструмент.
5. Optional chaining '?.'" — полезный учебник с практическими примерами использования оператора.
6. – YouTube — обучающее видео по использованию условного цепочного обращения и оператора объединения с null в JavaScript.
7. Вопросы с тегом 'optional-chaining' — вопросы и ответы по теме условного цепочного обращения на платформе Stack Overflow.