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

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

Declaration
function functionDeclaration() {
  return 'I am a function declaration';
}
const functionExpression = function() {
  return 'I am a function expression';
}
________________
Expression
ES5 form:
const functionExpression = function() {
  return 'I am a function expression';
}
ES6 form (with fat arrows):
const functionDeclaration = () => {
  return 'I am a function declaration';
}

Выражение функции начинается с такого ключевого слова, как var, let или const для создания именованной переменной.

Затем функция принимает объем в зависимости от используемого ключевого слова. Область действия - хороший способ защитить глобальную область действия от загрязнения. Используете ли вы var, let или const, зависит от того, как вы хотите применять область действия и хотите ли вы, чтобы переменные были защищены или нет.

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

Основное отличие: подъемник

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

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

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

Запускаем это в хромированной консоли:

functionDeclaration();
function functionDeclaration() {
  return 'I am a function declaration';
}

… Не вернет никаких ошибок:

Но запустив это:

functionExpression();
const functionExpression = () => {
  return 'I am a function expression';
}

… Возвращает ошибку:

… Поскольку функция НЕ поднимается и еще не инициализирована перед использованием.

Вместо этого мы должны сделать это:

const functionExpression = () => {
  return 'I am a function expression';
}
functionExpression();

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

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

По этой причине выражения функций широко считаются лучшей практикой при создании функций.

Заключение

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