Использование 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.