Function Declaration и Function Expression

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

Объявление Function Declaration

Объявление функции, о котором мы говорили все время до этого, называется в спецификации языкаFunction Declaration.

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

Позвольте еще раз выделить основной смысл объявления Function Declaration:

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

В примере выше переменная f в первой строке получает значение — функцию, а во второй — число 5. В итоге мы получим переменную со значением f=5.

Время создания Function Declaration

Функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода.

Перед тем, как выполнять первую строку, интерпретатор сканирует код, ищет в немFunction Declaration и обрабатывает их.

Поэтому их можно вызвать до объявления, например:

Этот код будет работать, т.к. объявление function sayHi обрабатывается и функция создается до выполнения первой строчки кода.

Объявление Function Expression

Существует альтернативный синтаксис для создания функций, который решает проблемы с «условным» объявлением.

Функцию можно создать и присвоить переменной как самое обычное значение.

Такое объявление называется Function Expression и выглядит так:

Например:

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

Например, вполне допустимо такое объявление массива:

В отличие от объявлений Function Declaration, которые создаются заранее, до выполнения кода, объявления Function Expression создают функцию, когда до них доходит выполнение.

Поэтому и пользоваться ими можно только после объявления.

… А вот так — будет:

Благодаря этому свойству Function Expression можно (и даже нужно) использовать для условного объявления функции:

Функция с вызовом «на месте»

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

Наш скрипт настолько замечательный, что мы хотим дать его другим людям.

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

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

Для этого используют функции с вызовом «на месте». Такая функция объявляется — и тут же вызывается, вот так:

Теперь внутренние переменные скрипта стали локальными. Даже если в другом месте страницы объявлена своя переменная a — проблем не будет. Наш скрипт теперь имеет свою, изолированную область видимости.

Эта практика широко используется в библиотеках JavaScript, чтобы временные переменные и функции, которые используются при инициализации, не конфликтовали с внешним кодом.

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

Зачем скобки вокруг функции?

В примерах выше вокруг function() {...} находятся скобки. Если записать без них — такой код вызовет ошибку:

Эта ошибка произойдет потому, что браузер, видя ключевое слово function в основном потоке кода, попытается прочитать Function Declaration, а здесь даже имени нет.

Впрочем, даже если имя поставить, то работать тоже не будет:

Дело в том, что «на месте» разрешено вызывать только Function Expression.

Общее правило таково:

• Если браузер видит function в основном потоке кода - он считает, что этоFunction Declaration.
• Если же function идет в составе более сложного выражения, то он считает, что этоFunction Expression.

Для этого и нужны скобки - показать, что у нас Function Expression, который по правилам JavaScript можно вызвать «на месте».

Можно показать это другим способом, например поставив перед функцией оператор:

Главное, чтобы интерпретатор понял, что это Function Expression, тогда он позволит вызвать функцию «на месте».

Скобки не нужны, если это и так Function Expression, например в таком вызове:

Функция здесь создается как часть выражения присваивания, поэтому является Function Expressionи может быть вызвана «на месте». При этом, так как сама функция нигде не сохраняется, то она исчезнет, выполнившись, останется только ее результат.

Итого

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

• Если функция объявлена в основном потоке кода, то это Function Declaration.
• Если функция создана как часть выражения, то это Function Expression.

Между этими двумя основными способами создания функций есть следующие различия:

Как общий совет — предпочитайте Function Declaration.

Сравните по читаемости:

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

Используйте Function Expression только там, где это действительно нужно. Например, для объявления функции в зависимости от условий.