Возьмите этот (намеренно) глубоко вложенный объект. Чтение age млекопитающего приведет нас к очень длинному и повторяющемуся коду.

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

Деструктуризация объекта

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

Если мы объявим его константой и попытаемся изменить позже, мы получим ошибку. В этом суть константы - она ​​неизменна.

Чтобы обойти это (преднамеренное) ограничение, мы можем вместо этого использовать ключевое слово let (изменяемый).

Отлично, работает. Давайте попробуем выполнить деконструкцию, используя ключевые слова let и const. Дайте имя медведю и оленю. Обычно имя человека не меняется слишком часто, если вообще когда-либо, поэтому мы можем рассматривать его как неизменное.

Мы также можем применить деконструкцию к массивам, например:

Деконструкция массива

Круто, но это еще не все!

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

Стрелочные функции

Стрелочные функции - отличный способ сократить ваш код. Это не совсем то же самое, что традиционные функции. Стрелочные функции имеют лексическую область видимости. Мы поговорим об этом чуть позже.

Возьмите наш предыдущий набор животных. Как бы вы перебрали каждое животное и console.log каждое животное?

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

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

Вот более сложный пример:

Этот паттерн называется каррированием. Мы возвращаем функцию внутри функции. Наиболее ярким примером использования каррирования является функция connect()() из Redux.

Обратите внимание, что ** - это оператор возведения в степень, и он эквивалентен Math.pow.

Объяснение функции multiplyAndAdd:

  • multiplyAndAdd принимает число и возвращает base в exponent степени (умножение).
  • Добавляет число к экспоненте.

multiplyAndAdd(2)(4) совпадает с 2x2 + 4.

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

Конечно, менее многословно, но мы можем сделать даже больше.

Отлично, мы сократились с шести строк до одной строки кода!

Предупреждение №1

Обратите внимание на отсутствие операторов возврата. Обычно операторы return требуются для возврата значений из функций. Стрелочные функции вызывают return неявно, если нет фигурных скобок. Если мы используем стрелочные функции с фигурными скобками, мы должны явно вызывать return.

Если это для вас в новинку, прочтите эту статью о правилах возврата.

Предупреждение №2

Ключевое слово this по-другому работает со стрелочными функциями.

Возьмем этот пример:

У нас есть person объект. Внутри объекта у нас есть два свойства; name человека и функция, которая возвращает имя person.

Если мы вызываем метод sayName, первый this указывает на объект человека, а второй this - undefined.

Обратите внимание, что второй this фактически указывает на объект окна, но, поскольку мы используем Quokka, объекта окна нет.

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

Вот обычный способ решения этой проблемы с обычными функциями.

Функции стрелок имеют лексическую область видимости, а ее значение в функции стрелки определяется окружающей областью видимости, поэтому в этом обходном пути они не нуждаются.

Если вы хотите вывести свой JavaScript на новый уровень, я предлагаю прочитать книгу Красноречивый JavaScript.

Спасибо за чтение, оставайтесь классными! ❤