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

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

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

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

В качестве примера рассмотрим объект 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);

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

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

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

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

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

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

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

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

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

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