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

В этой статье мы рассмотрим так называемый оператор опциональной последовательности в JavaScript — ? Он также известен как оператор цепочки. Речь пойдёт не о самом операторе в целом. Этот пост посвящён возможности его использования в нативном JavaScript. Он позволяет предотвратить возникновение ошибок при доступе к вложенным свойствам объекта.

Стоит отметить, что он способен помочь избежать ошибок при работе с объектами и полезен при обращении к несуществующим свойствам вложенных или многомерных объектов. Вместо этого он приводит к получению undefined.

Какие проблемы может решить оператор опциональной последовательности

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

Например, рассмотрим объект robot, включающий несколько свойств. Он включает определённые свойства и команды.

let robot = {
    name: 'Robot',
    actions: {
        fire: {
            ammunition: ['laser'],
            command: 'Fire laser!'
        },
        move: {
            chassis: ['track'],
            command: 'Track move!'
        }
    }
};

Чтобы воспользоваться командой (command) для выстрела необходимо запустить её.

let robotFire_1 = robot.actions.fire.command;

// Получим в консоль Fire laser!
console.log(robotFire_1);

Если попытаться активировать несуществующую команду для запуска того или иного действия (например, actions), то браузер выдаст ошибку.

let robotFire_2 = robot.actions.fly.command;

// Получаем ошибку Uncaught TypeError: Cannot read property 'command' of undefined
console.log(robotFire_2);

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

Читайте также:  Intersection Observer API: основные параметры и настройки.

Необязательный оператор цепочки в JavaScript

Во-первых, что оператор цепочки — это встроенный в браузер способ. Он позволяет связать методы или свойства объекта и условно продолжить выполнения цепочки действий. Однако имейте в виду, что он работает только при значении свойства не равном null или undefined.

В том случае, если добавить ? перед точкой в цепочке действий вместо ошибки в консоль будет выведено undefined.

let robotFire_3 = robot?.actions?.fly?.command;

// Получим в консоль undefined, но избегаем ошибки
console.log(robotFire_3);

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

Кроме того, при применении callback-функций или методов выборки из объекта с использованием деструкции могут попадаться несуществующие значения. Для проверки их существования и последующего вызова в качестве функций можно прибегнуть к оператору цепочки. Это позволяет избежать написания дополнительного теста.

Кроссбраузерность

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