для чего используется опциональная цепочка в javascript
Опциональная цепочка, объединение с null, и как они меняют наш подход к написанию кода
Доброго времени суток, друзья!
Если Вы следите за релизами TypeScript, то знаете, что опциональная цепочка (Optional Chaining) и объединение с null (Null Coalescing) были представлены в TypeScript 3.7. Также эти фичи по умолчанию включены в Babel 7.8.0. Это одни из главных претендентов на роль особенностей JavaScript. В настоящее время они находятся на 4 и 3 стадиях рассмотрения, соответственно (23 января был принят стандарт ECMAScript 2020, где есть и опциональная цепочка, и объединение с null, и еще парочка занимательных вещей; я в курсе, что недавно на Хабре вышла статья-перевод про особенности, которые привнес в JS ES2020, однако, полагаю, парочка лишних примеров не повредит — прим. пер.).
Опциональная цепочка (Optional Chaining)
Довольно часто нам приходится обращаться к глубоко вложенному свойству объекта. Если Вы написали 100 строк не очень качественного кода, это может стать причиной Uncaught TypeError.
Для дальнейших примеров мы будем использовать этот псевдокод (ложный ответ сервера):
Пытаясь избежать Uncaught TypeError, и получить значение id нам приходится «устраивать пляски» (do some dance). Подход, который мы использовали раньше, заключался в проверке истинности объекта на каждом уровне вложенности. Данный шаблон больше похож на условный оператор, возвращающий логическое значение, чем на способ обращения к свойству, но это самый чистый и безопасный путь, которым мы располагали до настоящего времени:
Либо, если Вы предпочитаете деструктуризацию:
Более эргономичный способ заключается в использовании Lodash или Ember:
Как нам сделать тоже самое с помощью опциональной цепочки?
Объединение с null (Null Coalescing)
Когда значением свойства объекта, к которому мы обращаемся, является null или undefined, мы используем значение по умолчанию. Раньше для этого использовался оператор || (логическое или).
Если мы хотим по умолчанию записывать sedighian в значение свойства login, мы делаем следующее:
Второй и третий пример похожи. В чем преимущество объединения с null? Объединение с null оценивает значение справа только в случае, если левая часть равна undefined или null. Это дает нам некоторую защиту от случайных результатов, когда мы работаем с действительными (валидными), но ложными значениями.
Предположим, мы хотим вернуть » (пустую строку), false или 0. С оператором || этого сделать не получится, поскольку он вернет правую часть. В этом случае нам пригодится объединение с null:
В качестве альтернативы можно использовать сторонние библиотеки, а в случае с Ember — встроенную утилиту:
Не забывайте, что объединение с null — это больше, чем значение переменной по умолчанию. Это альтернативный способ выполнения блока кода при отсутствии соответствующих значений:
О чем следует помнить?
Помните о порядке следования символов в опциональной цепочке (сначала вопросительный знак, затем точка):
Опциональная цепочка не защищает от вызова несуществующей функции:
Опциональная цепочка ‘?.’
Проблема «несуществующего свойства»
Если вы только начали читать учебник и изучать JavaScript, то, возможно, эта проблема вам пока незнакома, но она достаточно распространена.
В этом случае при попытке получить свойство user.address.street будет ошибка:
Это нормальный результат, так работает JavaScript, но во многих реальных ситуациях удобнее было бы получать не ошибку, а просто undefined («нет улицы»).
Или ещё пример. В веб-разработке нам бывает нужно получить данные об HTML-элементе, который иногда может отсутствовать на странице:
Использование логического И со всей цепочкой свойств гарантирует, что все они существуют (а если нет – вычисление прекращается), но это довольно длинная и громоздкая конструкция.
Опциональная цепочка
Вот безопасный способ обратиться к свойству user.address.street :
Чтение адреса с помощью конструкции user?.address выполняется без ошибок, даже если объекта user не существует:
Тогда если переменная user по ошибке окажется пустой, мы увидим программную ошибку и исправим это.
Если переменной user вообще не существует, то выражение user?.anything выдаст ошибку:
Объявление переменной (например let/const/var user ) обязательно должно быть. Опциональная цепочка работает только с существующими переменными.
Сокращённое вычисление
Таким образом, последующие вызовы функций или операции не будут выполнены.
В следующем примере не у всех пользователей есть метод admin :
Она недостаточно «умна» для этого.
Итого
Самая крутая новая функция в Javascript: Опциональное объединение в цепочку
Дата публикации: 2019-10-15
От автора: опциональное объединение в цепочку меняет правила игры для всех, кто работает с Javascript. Это так же важно, как стрелочные функции или «let» и «const». Давайте рассмотрим, какие проблемы оно решает, как оно работает и как он облегчит вашу жизнь.
Проблема
Представьте себе следующее: вы работаете над тем фрагментом кода, который загружает данные из API. Возвращаемый объект глубоко вложен, что означает, что вам нужно пройти длинный путь свойств объекта.
Не было бы плохой практикой оставлять такой код как есть? Лучшее решение может выглядеть так:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Как видите, даже что-то простое, например, получение firstName человека, может быть затруднительно. Вот почему у нас были фреймворки типа lodash, для обработки подобных вещей.
«loadash» делает код более читабельным, но теперь вы ввели большую зависимость в вашу кодовую базу. Вам необходимо обновить его, и если вы работаете в команде, вы должны передавать информацию. Так что это тоже не идеальное решение.
Решение
Опциональное объединение в цепочку имеет решение для всего этого (кроме проблемы информирования команды).
Как это работает
Опциональная цепочка представляет новый синтаксис, который на первый взгляд будет выглядеть странно, но через несколько минут вы привыкнете к нему.
Значения по умолчанию
Нам также нужно узнать о Nullish coalescing operator. Хорошо, это звучит трудно. Но на самом деле это не так. Давайте рассмотрим следующий пример:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Для чего используется опциональная цепочка в javascript
Опциональная цепочка ‘?.’
Проблема «несуществующего свойства»
Если вы только начали читать учебник и изучать JavaScript, то, возможно, эта проблема вам пока незнакома, но она достаточно распространена.
В этом случае при попытке получить свойство user.address.street будет ошибка:
Это нормальный результат, так работает JavaScript, но во многих реальных ситуациях удобнее было бы получать не ошибку, а просто undefined («нет улицы»).
Или ещё пример. В веб-разработке нам бывает нужно получить данные об HTML-элементе, который иногда может отсутствовать на странице:
Использование логического И со всей цепочкой свойств гарантирует, что все они существуют (а если нет – вычисление прекращается), но это довольно длинная и громоздкая конструкция.
Опциональная цепочка
Вот безопасный способ обратиться к свойству user.address.street :
Чтение адреса с помощью конструкции user?.address выполняется без ошибок, даже если объекта user не существует:
Тогда если переменная user по ошибке окажется пустой, мы увидим программную ошибку и исправим это.
Если переменной user вообще не существует, то выражение user?.anything выдаст ошибку:
Объявление переменной (например let/const/var user ) обязательно должно быть. Опциональная цепочка работает только с существующими переменными.
Сокращённое вычисление
Таким образом, последующие вызовы функций или операции не будут выполнены.
В следующем примере не у всех пользователей есть метод admin :
Введение в optional chaining operator
Вышесказанное также можно выразить с помощью тернарного оператора, который не совсем помогает читабельности:
Представляем опциональный оператор цепочки
Используя новый необязательный оператор связывания, мы можем переписать приведенный выше пример следующим образом:
Дополнительные синтаксические формы: вызовы и динамические свойства
Также есть версия оператора для вызова дополнительных методов:
Эта последняя форма также доступна для необязательного индексирования массивов, например:
Свойства необязательного оператора цепочки
Опциональный оператор связывания обладает несколькими интересными свойствами: короткое замыкание, стекирование и необязательное удаление. Давайте пройдемся по каждому из них на примере.
Короткое замыкание означает не оценку остальной части выражения, если дополнительный оператор цепочки возвращается рано:
Стекирование означает, что к последовательности обращений к свойствам можно применить несколько необязательных операторов сцепления:
Необязательное удаление означает, что оператор delete может быть объединен с необязательной цепочкой:
5 полезных функций JavaScript, которые знакомы не всем
JavaScript — чрезвычайно эффективный язык программирования, особенно в веб-проектах. Он предоставляет много возможностей, а также библиотек и фреймворков, которые разработчик может использовать для создания эффективных и полезных элементов.
JavaScript был значительно усовершенствован в последней версии ECMAScript (ES6+). Каждый год появляются новые полезные функции, которые значительно упрощают труд программистов. Поэтому следует использовать эти функциональные возможности.
Далее представлен ряд недостаточно популярных, но вместе с тем полезных возможностей JavaScript, о которых следует знать. Итак, ближе к теме.
1. Журнал стилизации консоли
Теперь вы сможете по своему усмотрению стилизовать журналы консоли.
2. Функция-генератор
Функция-генератор в JavaScript очень похожа на обычные функции. Единственное отличие состоит в том, что ее выполнение может быть приостановлено на определенной строке кода и продолжено впоследствии по необходимости.
Для лучшего восприятия рассмотрим пример функции-генератора:
Вызовем метод next еще несколько раз:
3. Опциональная цепочка
Опциональная цепочка пригодится в большом объекте, содержащем другие вложенные объекты, когда нужно проверить доступность некоторых его свойств, не получая при этом сообщения об ошибке.
Как видите, опциональная цепочка позволяет избежать ошибок.
4. Ключевое слово in
Ключевое слово in позволяет определить доступность свойств внутри объекта.
После использования этого ключевого слова получаем true или false в зависимости от наличия или отсутствия свойства.
Вот простой пример:
Как видите, ключевое слово in возвращает логическое значение. Таким образом можно легко проверить, определены ли свойства внутри объектов.
5. Сокращение объекта
Сокращение объектов (Object shorthand) — еще одна из полезных функциональностей ES6, о которой знают далеко не все. Object shorthand позволяет более упорядоченно описывать объекты.
Рассмотрим простой объект:
Используя Object shorthand, этот код можно несколько сократить. В итоге на выходе имеем:
Очевидно, что сокращение объекта работает при одинаковом имени ключа и значения. Это отличная возможность для упорядочивания объектов.
Заключение
Как видите, все это очень полезные возможности в JavaScript. Однако не все разработчики ими пользуются, а некоторые и не знают о них совсем.
5 полезных функций JavaScript, которые знакомы не всем
JavaScript — чрезвычайно эффективный язык программирования, особенно в веб-проектах. Он предоставляет много возможностей, а также библиотек и фреймворков, которые разработчик может использовать для создания эффективных и полезных элементов.
JavaScript был значительно усовершенствован в последней версии ECMAScript (ES6+). Каждый год появляются новые полезные функции, которые значительно упрощают труд программистов. Поэтому следует использовать эти функциональные возможности.
Далее представлен ряд недостаточно популярных, но вместе с тем полезных возможностей JavaScript, о которых следует знать. Итак, ближе к теме.
1. Журнал стилизации консоли
Теперь вы сможете по своему усмотрению стилизовать журналы консоли.
2. Функция-генератор
Функция-генератор в JavaScript очень похожа на обычные функции. Единственное отличие состоит в том, что ее выполнение может быть приостановлено на определенной строке кода и продолжено впоследствии по необходимости.
Для лучшего восприятия рассмотрим пример функции-генератора:
Вызовем метод next еще несколько раз:
3. Опциональная цепочка
Опциональная цепочка пригодится в большом объекте, содержащем другие вложенные объекты, когда нужно проверить доступность некоторых его свойств, не получая при этом сообщения об ошибке.
Как видите, опциональная цепочка позволяет избежать ошибок.
4. Ключевое слово in
Ключевое слово in позволяет определить доступность свойств внутри объекта.
После использования этого ключевого слова получаем true или false в зависимости от наличия или отсутствия свойства.
Вот простой пример:
Как видите, ключевое слово in возвращает логическое значение. Таким образом можно легко проверить, определены ли свойства внутри объектов.
5. Сокращение объекта
Сокращение объектов (Object shorthand) — еще одна из полезных функциональностей ES6, о которой знают далеко не все. Object shorthand позволяет более упорядоченно описывать объекты.
Рассмотрим простой объект:
Используя Object shorthand, этот код можно несколько сократить. В итоге на выходе имеем:
Очевидно, что сокращение объекта работает при одинаковом имени ключа и значения. Это отличная возможность для упорядочивания объектов.
Заключение
Как видите, все это очень полезные возможности в JavaScript. Однако не все разработчики ими пользуются, а некоторые и не знают о них совсем.