3 совета, как стать мастером Йода по JavaScript

Увидев в проекте на Angular или React устаревший код JavaScript, код-ревьюер сразу определит, что разработчик  —  новичок. Но если вы воспользуетесь 3 советами из статьи, вас будут считать профессионалом по современному JavaScript. Итак, начнем наше путешествие!

Как использовать spread

Оператор spread …  —  мой любимый в JavaScript. В основном я использую его в трех случаях:

• создание копии массива

• расширение массива

• расширение объекта

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

Как проверить значения null

Помните ли вы свою первую проверку значений null? Я до сих пор не могу забыть свой старый код в проекте на JEE, когда JavaScript еще не был настолько развит:

А теперь меня спасает простое if:

Условие if будет истинным, если foo не: пустые строки, 0, null, undefined, NaN, или false.

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

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

На следующем примере показано, как узнать, имеет ли почтовый индекс адреса клиента значение null:

Нулевое слияние ??  —  не совсем новая функция, но синтаксис упрощает. Он возвращает первый аргумент, если он не null / undefined, иначе  —  второй.

В приведенном ниже коде будет показано сообщение, если оно не null / undefined, иначе  —  фраза «добро пожаловать».

Особенно хорошо использовать ?? в последовательности:

В этом примере будет отображаться firstName, если оно не null / undefined, в противном случае будет показано lastName, если оно не null / undefined. А если два первых значения равны null / undefined, то появится‘anonymous’.

Как использовать .map(), .reduce(), и .filter()

Да, речь идёт о мощных техниках функционального и реактивного программирования! Когда несколько лет назад я впервые использовала такой подход, мне открылись новые горизонты. Каждый раз, когда я смотрю на эти простые инструкции, то до сих пор поражаюсь их красоте.

Одна из основ функционального программирования  —  списки и операции. Я приведу пример рефакторинга с тремя наиболее известными операциями: map, reduce и filter.

Допустим, до появления Covid-19 семья из Японии приехала на отдых в Париж. Они купили в магазине продукты и предметы первой необходимости. Но цены на все товары в евро. А они хотели узнать цену каждого товара, а также общую стоимость продуктов в японских йенах.

Мы знаем, что 1 евро равен 126 йенам. Используя традиционный подход, мы вычислим это с помощью классического цикла:

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

map преобразует всю стоимость из евро в йену, filter удалит непродовольственные товары, а reduce добавит цену каждого продукта к общей сумме.

Дополнение: несколько активных читателей заметили, что при преобразовании йены использование map, filter и reduce будет повторять массив 3 раза. Но поскольку временная сложность алгоритма остается O(N), это не повлияет на производительность обычного приложения. Я сделала такой рефакторинг для приложения со значительным объемом данных, и проблем с производительностью не возникло. Однако я полностью согласна с тем, что мы должны быть предельно осторожны с очень большими данными.