Давайте разберём ключевые отличия Function Declaration от Function Expression.
Во-первых, синтаксис: как определить, что есть что в коде.
- Function Declaration: функция объявляется отдельной конструкцией «function…» в основном потоке кода.
// Function Declaration function sum(a, b) { return a + b; } - Function Expression: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае функция создаётся в правой части «выражения присваивания»
=:// Function Expression let sum = function(a, b) { return a + b; };
Более тонкое отличие состоит, в том, когда создаётся функция движком JavaScript.
Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.
После того, как поток выполнения достигнет правой части выражения присваивания let sum = function… – с этого момента, функция считается созданной и может быть использована (присвоена переменной, вызвана и т.д. ).
С Function Declaration всё иначе.
Function Declaration можно использовать во всем скрипте (или блоке кода, если функция объявлена в блоке).
Другими словами, когда движок JavaScript готовится выполнять скрипт или блок кода, прежде всего он ищет в нём Function Declaration и создаёт все такие функции. Можно считать этот процесс «стадией инициализации».
И только после того, как все объявления Function Declaration будут обработаны, продолжится выполнение.
В результате, функции, созданные, как Function Declaration могут быть вызваны раньше своих определений.
Например, так будет работать:
sayHi("Вася"); // Привет, Вася
function sayHi(name) {
alert( `Привет, ${name}` );
}Функция sayHi была создана, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте.
…Если бы это было Function Expression, то такой код вызовет ошибку:
sayHi("Вася"); // ошибка!
let sayHi = function(name) { // (*) магии больше нет
alert( `Привет, ${name}` );
};Функции, объявленные при помощи Function Expression, создаются тогда, когда выполнение доходит до них. Это случится только на строке, помеченной звёздочкой (*). Слишком поздно.
Ещё одна важная особенность Function Declaration заключается в их блочной области видимости.
В строгом режиме, когда Function Declaration находится в блоке {...}, функция доступна везде внутри блока. Но не снаружи него.
Для примера давайте представим, что нам нужно создать функцию welcome() в зависимости от значения переменной age, которое мы получим во время выполнения кода. И затем запланируем использовать её когда-нибудь в будущем.
Такой код, использующий Function Declaration, работать не будет:
let age = prompt("Сколько Вам лет?", 18);
// в зависимости от условия объявляем функцию
if (age < 18) {
function welcome() {
alert("Привет!");
}
} else {
function welcome() {
alert("Здравствуйте!");
}
}
// ...не работает
welcome(); // Error: welcome is not definedЭто произошло, так как объявление Function Declaration видимо только внутри блока кода, в котором располагается.
Вот ещё один пример:
let age = 16; // присвоим для примера 16
if (age < 18) {
welcome(); // \ (выполнится)
// |
function welcome() { // |
alert("Привет!"); // | Function Declaration доступно
} // | во всём блоке кода, в котором объявлено
// |
welcome(); // / (выполнится)
} else {
function welcome() {
alert("Здравствуйте!");
}
}
// здесь фигурная скобка закрывается,
// поэтому Function Declaration, созданные внутри блока кода выше -- недоступны отсюда.
welcome(); // Ошибка: welcome is not definedЧто можно сделать, чтобы welcome была видима снаружи if?
Верным подходом будет воспользоваться функцией, объявленной при помощи Function Expression, и присвоить значение welcome переменной, объявленной снаружи if, что обеспечит нам нужную видимость.
Такой код работает, как ожидалось:
let age = prompt("Сколько Вам лет?", 18);
let welcome;
if (age < 18) {
welcome = function() {
alert("Привет!");
};
} else {
welcome = function() {
alert("Здравствуйте!");
};
}
welcome(); // теперь всё в порядкеМожно упростить этот код ещё сильнее, используя условный оператор ?:
let age = prompt("Сколько Вам лет?", 18);
let welcome = (age < 18) ?
function() { alert("Привет!"); } :
function() { alert("Здравствуйте!"); };
welcome(); // теперь всё в порядкеКогда использовать Function Declaration, а когда Function Expression?
Как правило, если нам понадобилась функция, в первую очередь нужно рассматривать синтаксис Function Declaration, который мы использовали до этого. Он даёт нам больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом, можно вызывать до их объявления.
Также функции вида function f(…) {…} чуть более заметны в коде, чем let f = function(…) {…}. Function Declaration легче «ловятся глазами».
…Но если Function Declaration нам не подходит по какой-то причине (мы рассмотрели это в примере выше), то можно использовать объявление при помощи Function Expression.
Итого
- Функции – это значения. Они могут быть присвоены, скопированы или объявлены в другом месте кода.
- Если функция объявлена как отдельная инструкция в основном потоке кода, то это Function Declaration.
- Если функция была создана как часть выражения, то считается, что эта функция объявлена при помощи Function Expression.
- Function Declaration обрабатываются перед выполнением блока кода. Они видны во всём блоке.
- Функции, объявленные при помощи Function Expression, создаются, только когда поток выполнения достигает их.
В большинстве случаев, когда нам нужно создать функцию, предпочтительно использовать Function Declaration, т.к. функция будет видима до своего объявления в коде. Это позволяет более гибко организовывать код, и улучшает его читаемость.
Таким образом, мы должны прибегать к объявлению функций при помощи Function Expression в случае, когда синтаксис Function Declaration не подходит для нашей задачи.