JavaScript - один из самых динамичных языков. Каждый год добавляется множество функций, чтобы сделать язык более удобным и практичным.
В этой статье мы рассмотрим некоторые недавно добавленные в язык функции и некоторые приемы, которые вы можете использовать в повседневной работе над кодом и которые помогут вам писать код лаконичнее.
Я хочу поделиться некоторыми концепциями, которые я узнала в течение последних лет, сгруппированными в одном месте.
Назначение деструктуризации
Назначение деструктуризации позволяет изменить имя переменной, извлеченной из объекта с помощью деструктуризации.
Присвоение деструктуризации может быть очень удобным, когда вы изменяете имя переменной, чтобы придать больше контекста определенной части кода.
🤖 Однако лучше не использовать присваивание деструктуризации каждый раз, так как желательно, чтобы вы с первого раза назвали переменную соответствующим образом.
Но это поможет, если вы хотите создать дополнительный контекст для определенной части кода.
Опциональная цепочка '?.'
Необязательная цепочка существует и в других языках. Она позволяет получить доступ к свойствам или методам объектов без выброса ошибки, если они по какой-то причине недоступны.
JavaScript не является типизированным языком, поэтому доступ к недоступному свойству является распространенным источником проблем:
Однако использование необязательной цепочки через ключевой символ ?. позволяет нам избежать выброса ошибки:
Условное добавление свойства к объекту
Хотелось ли вам когда-нибудь добавить свойство к объекту, но только если выполняются некоторые требования?
Если бы вы столкнулись с такой ситуацией, то код, который вы могли бы создать, мог бы быть очень многословным, поскольку требуется два оператора if.
Однако существует трюк, который позволяет нам избавиться от дополнительных утверждений, которые мы бы написали.
Тут мы добавляем свойство moreInfos только тогда, когда значение переменной отличается от undefined.
Мы используем спред оператор (...) для развёртки объекта { moreInfos } и используем оператор &&, который позволяет нам возвращать второе значение условия, когда первое оценивается как true.
Например:
🤖 Этот синтаксис следует использовать с осторожностью, поскольку иногда выражение не очень читабельно в зависимости от сложности условия и многословности объекта, который мы хотим заспредить.
Ссылка на непервостепенное значение
Как и любой язык программирования, JavaScript содержит примитивные и непримитивные значения.
Примитивными значениями являются:
- Number
- String
- Boolean
- Undefined
- Symbol
- BigInt
Другие типы данных передаются по ссылке, что означает, что переменная передается, а не просто копируется.
Например:
Поскольку вы передаете не саму переменную, а ее адрес в памяти.
То, где бы у вас ни был адрес этой переменной, вы можете обновить ее, и изменения распространятся в других частях кода, где эта переменная имеет тот же адрес, что и переменная, которую вы только что изменили.
Нужно быть осторожным, когда вы хотите передать непримитивное значение вниз по функции, потому что если вы его мутируете и если вы не знаете о таком поведении, могут произойти неожиданные проблемы и не особо очевидные баги.
Оператор ??
Оператор ?? и || очень удобно использовать с опциональной цепочкой для установки значения по умолчанию.
Таким образом, вы можете использовать приведенный ниже код, чтобы установить по умолчанию номер телефона, который является пустой строкой:
Это оператор, который возвращает свой правый оператор, если левый оператор равен null или undefined.
Этот оператор был создан для решения распространенной проблемы JavaScript, связанной с истинными и ложными значениями.
Так, например, число 0 считается ложным значением во время выполнения JavaScript. Однако иногда значение 0 в логике вашего приложения должно рассматриваться как истинное значение, которое мы будем использовать.
Например:
Ловим брошенные промисы от async/await с помощью catch
Использование async/await невероятно эффективно для написания чистого и читабельного кода, чтобы избежать превращения кода в адский ад обратных вызовов.
Однако то, как мы обрабатываем случай ошибки, действительно отличается от метода then/catch, который превращается в try/catch.
Вот удобный трюк, который я нашла, чтобы помочь обработать состояние ошибочно промиса:
Это помогает оставаться в одном и том же состоянии без ошибок, а не идти в catch от try/catch.
Возможно, вам сейчас не понятно какая разница и зачем это нужно, но в некоторых ситуациях это может существенно помочь, когда вы хотите контролировать определенное состояние ошибки, которое вы потенциально ожидаете.
Weakmap
Ну и последнее, WeakMap - структура данных, менее известная и менее используемая в JavaScript, но я нахожу ее достаточно интересной, чтобы рассказать о ней.
Это классическая структура данных hashmap, которая хранит ключ/значене. Единственным отличием является то, что запись автоматически удаляется из объекта map, когда на нее нет ссылок в памяти.
Кроме того, ключ может быть объектом любого типа, что означает, что вы можете получить значение, связанное с ключом, минуя весь объект. Он ищет адрес в памяти, чтобы извлечь нужное значение. Такая очистка называется механизмом сборщика мусора.
🤖 WeakMap можно использовать в приложениях, испытывающих недостаток памяти, например, во встроенных устройствах, где ресурсы очень ценны.
Спасибо за внимание ♥︎