На работе я наблюдал разные способы создания функций в кодовой базе - и это привело меня к поиску ответов о том, когда какие именно использовать (объявление или выражение). В этой статье рассказывается, почему использование функциональных выражений обычно предпочтительнее, чем использование их объявлений.
В 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 для перемещения вещей, код более читабелен сверху вниз, и любая используемая функция уже будет определена до того, как на нее будет ссылаться.
Подъем может показаться удобным, но общее мнение заключается в том, что он поощряет написание кода, который труднее понять другим разработчикам, особенно в файле, содержащем много кода.
По этой причине выражения функций широко считаются лучшей практикой при создании функций.
Заключение
Как мы видели, функциональные выражения не предлагают многого, чего нельзя было бы достичь с помощью объявлений функций, но их использование часто может привести к более чистому и читаемому коду.