От автора: опциональное объединение в цепочку меняет правила игры для всех, кто работает с Javascript. Это так же важно, как стрелочные функции или «let» и «const». Давайте рассмотрим, какие проблемы оно решает, как оно работает и как он облегчит вашу жизнь.
Проблема
Представьте себе следующее: вы работаете над тем фрагментом кода, который загружает данные из API. Возвращаемый объект глубоко вложен, что означает, что вам нужно пройти длинный путь свойств объекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// API response object const person = { details: { name: { firstName: "Michael", lastName: "Lampe", } }, jobs: [ "Senior Full Stack Web Developer", "Freelancer" ] } // Getting the firstName const personFirstName = person.details.name.firstName; |
Не было бы плохой практикой оставлять такой код как есть? Лучшее решение может выглядеть так:
1 2 3 4 5 6 |
// Checking if firstName exists if( person && person.details && person.details.name ) { const personFirstName = person.details.name.firstName || 'stranger'; } |
Как видите, даже что-то простое, например, получение firstName человека, может быть затруднительно. Вот почему у нас были фреймворки типа lodash, для обработки подобных вещей.
1 |
_.get(person, 'details.name.firstName', 'stranger'); |
«loadash» делает код более читабельным, но теперь вы ввели большую зависимость в вашу кодовую базу. Вам необходимо обновить его, и если вы работаете в команде, вы должны передавать информацию. Так что это тоже не идеальное решение.
Решение
Опциональное объединение в цепочку имеет решение для всего этого (кроме проблемы информирования команды).
Как это работает
Опциональная цепочка представляет новый синтаксис, который на первый взгляд будет выглядеть странно, но через несколько минут вы привыкнете к нему.
1 |
const personFirstName = person?.details?.name?.firstName; |
Итак, у вас, вероятно, теперь есть много вопросов. Так что новая вещь здесь — это ?. Вот как вы должны думать об этом. Если в начале объекта есть знак?., то это то, как вы спрашиваете, существует ли человек? Или, в более явном виде, имеет ли person значение null или undefined? Если да, то я возвращаю не ошибку, а просто undefined. Таким образом, personFirstName будет иметь значение undefined. Этот вопрос будет повторяться для details? и name?. Если какое-либо из этих значений равно ‘null’ или undefined, то personFirstName также будет undefined. Это называется Short-circuiting. Как только javascript найдет null или undefined он замкнется и перестанет идти глубже.
Значения по умолчанию
Нам также нужно узнать о Nullish coalescing operator. Хорошо, это звучит трудно. Но на самом деле это не так. Давайте рассмотрим следующий пример:
1 |
const personFirstName = person?.details?.name?.firstName ?? 'stranger'; |
Nullish coalescing operator представляется как ??. Это также довольно просто читать. Если левая сторона undefined, тогда personFirstName получит значение с правой стороны от ??. Это довольно просто.
Динамические свойства
Иногда вам нужно получить доступ к динамическому значению. Это может быть значение массива или просто динамическое свойство объекта.
1 2 |
const jobNumber = 1; const secondJob = person?.jobs?.[jobNumber] ?? 'none'; |
Здесь важно понять, что jobs?.[jobNumber] — это то же самое, что jobs[jobNumber], но это не приведет к ошибке; вместо этого оно вернет ‘none’.
Вызов функции или метода
Иногда вы будете работать с объектами, когда вы не знаете, есть ли у них метод или нет. Здесь мы можем использовать синтаксис?.() или с аргументами ?.({ some: ‘args’}). Это работает так, как вы ожидаете. Если этот метод не существует для этого объекта, он вернется undefined.
1 |
const currentJob = person?.jobs.getCurrentJob?.() ?? 'none'; |
Если функции getCurrentJob нет, тогда currentJob будет none.
Начните использовать это сегодня
Прямо сейчас ни один браузер не поддерживает это из коробки — Babel в помощь. Уже есть плагин babel.js, который довольно легко интегрировать, если у вас уже есть настройка Babel.
babel-plugin-proposal-optional-chaining
Заключение
Я думаю, что это сделает большую часть кода Javascript более легкой для чтения, а также менее подверженной ошибкам. Я надеюсь, что этот пост сделал вас немного умнее, и теперь вы захотите интегрировать Опциональное добавление цепочек в свой рабочий процесс!
Автор: lampewebdev
Источник: //dev.to
Редакция: Команда webformyself.