Функциональные выражения

До сих пор мы писали функции так: ключевое слово function, имя, скобки, тело. Это Function Declaration — объявление функции. Но есть и второй способ: написать функцию справа от знака = и положить её в переменную. Это Function Expression — функциональное выражение.

function sum(a, b) {          // Function Declaration
  return a + b;
}
const mul = function (a, b) { // Function Expression
  return a * b;
};
console.log(sum(2, 3), mul(2, 3));

Обе функции ведут себя одинаково: вызываются круглыми скобками, принимают аргументы, возвращают результат. Разница не в том, что они умеют, а в том, чем является строка кода. Объявление — самостоятельная конструкция языка. Выражение — часть инструкции присваивания, поэтому в конце стоит точка с запятой: она закрывает не функцию, а const mul = ....

Функция в JavaScript — обычное значение, такое же как число 5 или строка. Её можно положить в переменную, передать в другую функцию, вернуть из функции, сложить в массив. Отличие от числа ровно одно: значение-функцию можно вызвать, добавив скобки.

function greet(name) {
  return "Привет, " + name + "!";
}
const hello = greet;         // копируем значение, а не вызываем
console.log(typeof greet);
console.log(hello("Рико"));

Скобки — это вызов. greet — сама функция, greet() — её результат. Перепутать легко: const hello = greet(); положит в переменную не функцию, а то, что она вернула.

Поэтому строка const hello = greet; и работает: справа стоит готовое значение, оно копируется в новую переменную. Теперь на одну и ту же функцию смотрят два имени — как две этикетки на одной коробке.

Прежде чем выполнять код, движок просматривает его целиком и заранее создаёт все функции, объявленные через Function Declaration. Их словно поднимают в начало области видимости — это называют всплытием (hoisting). Поэтому объявленную функцию можно вызвать выше, чем она написана.

console.log(square(4));

function square(n) {
  return n * n;
}

С функциональным выражением так не выйдет. Пока выполнение не дошло до строки с присваиванием, переменная объявлена, но значения в ней нет — обращение к ней даёт ReferenceError. Функция появляется ровно в тот момент, когда движок доходит до =. Подробный разбор обоих механизмов — в статье «Всплытие и временная мёртвая зона»; здесь достаточно правила: объявление вызвать выше можно, выражение — нет.

try {
  console.log(cube(3));
} catch (err) {
  console.log(err.name);
}
const cube = function (n) { return n * n * n; };

console.log(typeof cube);
var cube = function (n) {
  return n * n * n;
};
console.log(typeof cube);

В примере const mul = function (a, b) {...} между function и скобками нет имени. Такая функция называется анонимной. Имя ей и не требуется: обращаться к ней мы будем через переменную mul.

Чаще всего анонимные функции пишут прямо в месте использования — когда функцию нужно один раз передать другой функции. Такой аргумент-функцию называют колбэком. Придумывать ему имя было бы лишней работой: он живёт ровно одну строку. Приёму целиком посвящена статья «Колбэки: функция как аргумент».

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(function (n) {
  return n % 2 === 0;
});
console.log(even);

const f = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};
console.log(f(4));
console.log(typeof fact);

Практическое правило простое. Если функция — самостоятельный кусок логики, объявляйте её через function имя() {}: имя видно сразу, а порядок функций в файле можно выбирать по смыслу, а не по зависимостям. Функциональное выражение берите тогда, когда функция должна быть значением: колбэк, обработчик, элемент массива, функция, которую выбирают условием.

Ни один из способов не «правильнее» другого. Это два инструмента: первый даёт имя и свободу порядка, второй — гибкость значения, которое можно передать куда угодно.