щзешщтфд

Оператор опциональной последовательности

Наши соц. сети: instagram, fb, tg

Проблема

Предположим, вы работаете над фрагментом кода, который загружает данные из API. Возвращаемый объект глубоко вложен, а это значит, что вам нужно пройти длинный путь свойств объекта.


const person = {
    details: {
        name: {
            firstName: "Michael",
            lastName: "Lampe",
        }
    },
    jobs: [
        "Senior Full Stack Web Developer",
        "Freelancer"
    ]
}

const personFirstName = person.details.name.firstName;

Каждый раз, когда мы обращаемся к определенному свойству, нам нужно проверять существует ли весь путь к этому свойству. Решение могло бы выглядеть так:


// проверка на существование всех свойств
if( person &&
    person.details &&
    person.details.name ) {
        const personFirstName = person.details.name.firstName || 'stranger';
}

Как вы видите в примере, даже такую простую вещь, как получение имени человека, может быть сложно сделать правильно. Вот почему появились такие фреймворки, как loadash - для решения подобных задач.


_.get(person, 'details.name.firstName', 'stranger');


loadash делает код более читабельным, но теперь вы ввели большую зависимость в свою кодовую базу. Вам нужно обновить его, и если вы работаете в команде, вы должны распространять знания и использовать их в команде. Так что это тоже не идеальное решение.

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

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


const personFirstName = person?.details?.name?.firstName;


Как это работает? Сначала мы проверяем объект person, не равно ли оно null или undefined. Если свойство равно undefined или null, мы возвращаем undefined, а дальнейшие вычисления прекращаем. Если свойство существует, то мы идем дальше и проверяем, есть ли свойство details у этого объекта. Если свойство существует, то мы идем дальше проворачиваем все тоже самое с name. Если же хоть где-то нам попадается null или undefined, то останавливаем вычисления.

Возможности опционального оператора

значения по умолчанию

Оператор опциональной последовательности довольно удобно использовать в связке с оператором нулевого слияния ??оператором нулевого слияния. Давайте посмотрим на следующий пример:

const personFirstName = person?.details?.name?.firstName ?? 'stranger';

Если левая сторона не определена, то personFirstName получит значение правой стороны от ??. Это довольно просто.

динамические свойства

Иногда вам нужно получить доступ к динамическому значению. Это может быть значение массива или просто динамическое свойство объекта:


const jobNumber = 1;

const secondJob = person?.jobs?.[jobNumber] ?? 'none';


Здесь важно понимать, что jobs?.[JobNumber] то же самое, что jobs[jobNumber], но не вызывает ошибки. Вместо этого он вернет none.


вызов функции или метода

Иногда вы будете работать с объектами, не зная, есть ли у них метод или нет. Здесь мы можем использовать синтаксис ?.() (или с аргументами ?.({Some: 'args'})). Если метода не существует для этого объекта, то вернется undefined.


const currentJob = person?.jobs.getCurrentJob?.() ?? 'none';


Пока большинство браузеров не поддерживает это из коробки - но в этом вам поможет Babel.

Приятного кодинга!