Продвинутые концепции JavaScript, которые помогли мне стать лучше в программировании

JavaScript — один из самых динамичных языков. Каждый год добавляется множество функций, чтобы сделать язык более управляемым и практичным.

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

Написание этого сообщения в блоге позволяет мне поделиться некоторыми концепциями, которые я изучил за последние годы, собранными в одном месте.

Назначение деструктурирования

Присвоение деструктуризации позволяет изменить имя переменной, извлеченной из объекта посредством деструктуризации.

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

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

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

Необязательная цепочка

Необязательная цепочка существует и в других языках, таких как Swift. Он разрешает доступ к свойствам или методам объектов без исключения, если они по какой-то причине недоступны. JavaScript не является типизированным языком, поэтому доступ к недоступному свойству является распространенным источником проблем с традиционным:

Однако использование необязательной цепочки через ключевое слово ? позволяет нам избежать бросков.

Затем, получив undefined в качестве значения по умолчанию, мы имеем полную свободу выбора чего-то другого, что поддерживает работоспособность приложения.

Оператор объединения

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

Оператор объединения — это оператор, который возвращает свой правый оператор, когда левый оператор равен либо null, либо undefined. Оператор объединения был создан для решения распространенной в JavaScript проблемы, связанной с истинными и ложными значениями.

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

Например:

Условное добавление свойства к объекту

Вы когда-нибудь хотели добавить свойство к объекту JavaScript, но только при соблюдении некоторых требований?

Если вы столкнулись с такой ситуацией, код, который вы, возможно, создали, может быть очень подробным, поскольку требуются два оператора if. Однако существует трюк с JavaScript, который позволяет исключить дополнительные операторы, которые мы бы написали.

Вот! Мы добавляем свойство moreInfos только тогда, когда значение переменной отличается от undefined.

Мы используем синтаксис распространения (…) для распространения объекта { moreInfos } и используем оператор AND, который позволяет нам возвращать второе значение условия, когда первое оценивается как true.

Например:

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

Ссылка на непримитивное значение

Как и любой язык программирования, он содержит примитивные и не примитивные значения. В JavaScript примитивными значениями являются Number, String, Boolean, Undefined, Symbol и BigInt. Другие типы данных передаются по ссылке, что означает, что переменная передается, а не просто копируется.

Например:

Поскольку вы передаете саму переменную, передается адрес в памяти. Затем, где бы у вас ни был адрес этой переменной, вы можете обновить ее, и изменения будут распространяться на другие части кода, где эта переменная имеет тот же адрес, что и переменная, которую вы только что изменили.

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

Проверка возвращаемого значения методов

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

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

Вы можете применить эту рекомендацию ко всем языкам программирования в мире.

Перехват выдачи асинхронного/ожидающего обещания с помощью хелпера catch

Использование async/await невероятно эффективно для написания чистого и читаемого кода, чтобы избежать превращения кода в стиль ада обратных вызовов. Однако то, как мы обрабатываем случай ошибки, действительно отличается от метода then/catch, который превращается в try/catch.

Вот удобный трюк, который я нахожу, чтобы помочь справиться с состоянием броска промиса:

Это помогает оставаться в том же состоянии без ошибок, а не переходить в catch из try/catch.

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

Слабая карта

Наконец, структура данных WeakMap менее известна и реже используется в JavaScript, но я нахожу ее достаточно интересной, чтобы рассказать о ней. Это классическая структура данных hashmap с хранилищем ключей/значений. Тем не менее, единственное отличие состоит в том, что запись автоматически удаляется из объекта карты, когда в памяти нет ссылки на нее. Но также ключ может быть любым типом объекта, что означает, что вы можете получить значение, связанное с ключом, минуя весь объект. Он ищет нужный адрес в памяти. Очистка называется механизмом сборщика мусора.

WeakMap можно использовать в приложениях, которым не хватает памяти, например, во встроенных устройствах, где ресурсы драгоценны.

Это немного сложно визуализировать правильно. Однако вы можете попробовать воспользоваться консолью Chrome.
В этом нам поможет небольшой пример, который я создал:

Заключение

Я надеюсь, что вы нашли эту статью полезной, не стесняйтесь оставлять отзывы для меня, чтобы улучшить документ.

Спасибо за внимание.

Больше историй можно найти в моем личном блоге: https://me.paulrossethings.com/

Бит: почувствуйте мощь компонентно-ориентированной разработки

Скажи привет Bit. Это инструмент №1 для разработки приложений на основе компонентов.

С помощью Bit вы можете создать любую часть своего приложения в виде «компонента», который можно компоновать и использовать повторно. Вы и ваша команда можете совместно использовать набор компонентов для более быстрой и последовательной совместной разработки большего количества приложений.

Создавайте и компонуйте «строительные блоки приложения»: элементы пользовательского интерфейса, полные функции, страницы, приложения, бессерверные или микросервисы. С любым стеком JS.
С легкостью делитесь и повторно используйте компоненты в команде.
Быстро обновляйте компоненты в разных проектах.
Делайте сложные вещи простыми: Монорепо, дизайн-системы и микрофронтенды.

Попробуйте Bit бесплатно и с открытым исходным кодом→