Webstacker

Онлайн-журнал с мира Web и Front End: Новости, статьи, хитрости и гайды на русском. Полезные и уникальные материалы для программистов и дизайнеров

Главная Фронтенд Javascript Опциональные операторы

Опциональные операторы

  • Вещает:
  • Опубликовано:
  • Изменено:
Опциональный оператор в Javascript

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

Реализация

Мы имеем объект, который приходит нам со стороны сервера с информацией о пользователе. Например, этот:

var object = {
  username: 'nickdeny',
  address: {
    zip: '00000',
  }
}

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

if (object && object.address && object.address.zip) {
 console.log(object.address.zip);
}

Теперь же это все можно сделать с помощью одной строки: var zip = object?.address?.zip;

К тому же, опциональные операторы можно использовать для массивов и функций:

// Массив
var ids = [0, 1, 2, 3, 4, 5];
console.log(ids?.[6]);

// Функция
var response = API?.getData?.();

Пример использования

В примере ниже можно увидеть то, что мы получили значение zip, а вместо ссылки на аватарку получили undefined, хотя без опционального оператора мы получили бы ошибку, которая бы остановила выполнение функции.

Поддержка

По данным Can I Use, на момент написания статьи поддержка равна почти 79%. Это значит то, что в недалеком будущем мы сможем полноценно использовать эту фичу нативно, на уровне браузера.
Но никто не мешает использовать её прямо сейчас, конвертируя код ES2020 с помощью компиляторов.

Заключение

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

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

Наш Telegram-канал