Love Frontend
Сообщество
фронтенд разработчиков
EN

Функционал оператора "?." Optional Chaining на примере объектов [en]

Автор: qubal
Дата публикации: 22.04.2020

Единственная хорошая новость за 2020 год - это новые фичи ES20, одна из которых - Optional Chaining.

Babel уже обладает полифилами для транспиляции EcmaScript20 в EcmaScript6. Рассмотрим функционал оператора "?." на примере объектов, так как чаще всего приходится работать с ними.

 const fetchedData = {
countries: {
Angola: {
value: 1032,
},
Russia: {
value: 23041,
},
Germany: {
value: 12313,
},
},
};

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

const fetchedData = {
countries: {
Angola: {
value: 1032,
},
Russia: {},
},
};

Еесли попытаться получить доступ к полю "value" объекта "Russia", нам выкинет ошибку Uncaught TypeError: Cannot read property 'value' of undefined Для того, чтобы этого избежать, приходилось прописывать

const russianValue = fetchedData &&
fetchedData.countries &&
fetchedData.countries.Russia &&
fetchedData.countries.Russia.value;
console.log(russianValue); //russianValue

Я ненавижу такие конструкции, они громоздские. Именно в таких ситуациях в игру врываются опциональные цепочки, делая код *КРУЧЕ*. Повторюсь, на момент написания статьи optional chaining поддерживается только движком V8.

const russianValue = fetchedData?.countries?.Russia?.value;
console.log(rusiianValue); //undefined

Аккуратность кода, точнее его краткость часто влияет на скорость его парсинга. Optional Chaining является исключением. Исходя из тестов, проведенных Эриком Napierała (простите за столь вычурное написание, я не знаю как правильно перевести его фамилию.) Транспилированный код, написанный с использованием опциональных цепочек, парсится на одну миллисекунду дольше чем код, написаныный на нативном JavaScript. Критично ли это? Только если в вашем коде двести тысяч миллиардов опциональных цепочек (хотя хватит и десяти тысяч). Иначе, беспокоиться об этом нет смысла

Производительность опциональных цепочек не может не радовать. При использовании массивов строк OptionalChaining дает прирост в 600%, при использовании сторонних библиотек - в 3000%, так как подходы, не использующеие геттеры и сеттеры, гораздо эффективнее.

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

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.