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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *