Function Expression и функция как значение

До сих пор мы объявляли функции отдельно – function greet(name) {...} – а затем вызывали их. Но в JavaScript есть важная идея: сама функция тоже является значением.

В переменной можно хранить число или строку:

plain-values.jsjs

1const count = 42;2const title = 'Курс';

И точно так же – функцию:

expression.jsjs

1const greet = function (name) {2  return `Привет, ${name}!`;3};

Такая запись называется Function Expression, или функциональное выражение:

Запись отличается от привычного объявления тремя деталями. Функция стоит справа от знака = и ведёт себя как обычное значение:

Имя после function можно не писать – такую функцию называют анонимной: чтобы вызвать её, достаточно имени переменной, в которой она лежит. Написать имя никто не запрещает, но в Function Expression оно обычно не нужно:

В конце ставим ;, потому что вся конструкция – это объявление переменной greet, такое же, как объявление count:

Функцию создали как значение и положили в переменную greet. Теперь greet можно вызывать точно так же, как функции из прошлых уроков:

greet-calls.jsjs

1console.log(greet('Ира'));2console.log(greet('Макс'));

Консоль

Привет, Ира!

Привет, Макс!

Запись const greet = function () {...}; можно мысленно читать так: «создай функцию и сохрани её в greet». Это очень похоже на обычное присваивание:

function-as-value.jsjs

1const count = 42;2const title = 'Курс';3const greet = function () { /* ... */ };

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

Значения, которые хранятся в переменной вот так, «по ссылке», называют ссылочными – подробно разберём их, когда познакомимся с объектами:

Убедиться, что в greet лежит именно функция, можно напрямую – напечатать переменную:

print.jsjs

1const greet = function (name) {2  return `Привет, ${name}!`;3};45console.log(greet);

Консоль

ƒ (name) {

return `Привет, ${name}!`;

}

В консоли – сама функция, её исходный код, а не результат вызова.

greet и greet() – не одно и то же

Круглые скобки меняют смысл записи. greet – это сама функция как значение. greet() – вызов этой функции и результат её работы.

Посмотрим на разницу по шагам:

Имя без скобок и со скобками

function double(x) {

Объявлена функция double.

return x * 2;

}

const twice = double;

const result = double(5);

console.log(twice(8));

console.log(result);

Объявлена функция double.

Скобок нет – вызова не было: в twice легла ссылка на ту же функцию.

Со скобками – это вызов: выполнение прыгает в double с x = 5.

5 * 2 → 10, return возвращает результат.

Вызов превратился в своё значение – в result легло число 10.

twice – ссылка на ту же функцию: вызов через неё работает как double(8).

Функция вернула 16 – печатаем.

Печатаем result.

Имя без скобок – сама функция, имя со скобками – вызов и его результат.

Переменные

double = функция

Главное здесь – строка const twice = double;. Скобок после double нет, поэтому функцию мы не вызываем. Мы берём саму функцию и сохраняем её ещё в одной переменной.

Теперь и double, и twice ведут к одной и той же функции. Вызвать её можно через любую из них:

alias.jsjs

1const greet = function () {2  console.log('Привет!');3};45const hello = greet;67greet();8hello();

Консоль

Привет!

Теперь обе переменные указывают на одну и ту же функцию:

И это не просто удобная картинка. greet и hello действительно содержат ссылку на одну и ту же функцию – поэтому при строгом сравнении получим true:

same-function.jsjs

1const greet = function () {2  console.log('Привет!');3};4const hello = greet;56console.log(greet === hello);

Консоль

true

true означает, что в обеих переменных находится одна и та же функция, а не две одинаковые копии.

Function Declaration и Function Expression

Теперь мы знаем два способа определить функцию. Поставим их рядом:

Function Declaration

1function greet(name) {2  return `Привет, ${name}!`;3}

Function Expression

1const greet = function (name) {2  return `Привет, ${name}!`;3};

После создания пользоваться обеими функциями можно одинаково: greet('Ира'). Но есть важное различие – с какого момента ими уже можно пользоваться.

Function Declaration доступна до строки объявления

declaration.jsjs

1sayHi();23function sayHi() {4  console.log('Привет!');5}

Консоль

Привет!

Хотя вызов стоит выше функции, код работает. Перед выполнением программы JavaScript заранее подготавливает объявления функций, поэтому к моменту первой строки sayHi уже доступна.

Посмотрим по шагам:

Объявление подготовлено заранее

sayHi();

function sayHi() {

До выполнения строк: JavaScript подготовил объявление – sayHi уже связана с функцией.

console.log('Привет!');

}

До выполнения строк: JavaScript подготовил объявление – sayHi уже связана с функцией.

Первая инструкция – вызов: функция готова, хотя её строка ниже.

Тело выполняется и печатает.

Function Declaration доступна с самого начала выполнения файла.

Переменные

sayHi = функция

Вот что JavaScript подготовил к моменту вызова:

Function Expression доступна только после присваивания

expression-early.jsjs

1sayHi();23const sayHi = function () {4  console.log('Привет!');5};

Консоль

ReferenceError: Cannot access 'sayHi' before initialization

С const sayHi = ... ситуация другая. JavaScript заранее знает, что переменная sayHi существует, но её значение станет доступно только тогда, когда выполнение дойдёт до строки присваивания. Поэтому вызов раньше этой строки заканчивается ReferenceError:

Зачем тогда нужен Function Expression?

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

Особенность Function Expression в другом: функцию можно создать прямо там, где программе нужно значение. Например, сохранить её в переменную или сразу передать другой функции.

Последний вариант в JavaScript встречается постоянно:

anonymous.jsjs

1runTwice(function () {2  console.log('Привет!');3});

Здесь функция создана прямо внутри вызова runTwice(...) – отдельное имя ей даже не понадобилось.

Что значит «передать функцию» и зачем это вообще нужно – разберём в следующем уроке.

// теперь вы знаете

Function Expression позволяет создать функцию и сохранить её как обычное значение в переменной
Функцию можно хранить в переменной и сохранить под другим именем: обе переменные будут указывать на одну функцию
greet – сама функция, greet() – её вызов и результат этого вызова
Function Declaration можно вызвать раньше строки объявления; Function Expression становится доступна через переменную только после выполнения присваивания

Проверьте себя

Что лежит в переменной greet после этой строки?

const greet = function () {
  console.log('Привет!');
};

ссылка на саму функцию

результат её вызова

строка с текстом функции

undefined – функцию ещё не вызвали

Что окажется в переменных twice и result?

function double(x) {
  return x * 2;
}
const twice = double;
const result = double(5);

в twice – ссылка на функцию, в result – число 10

в twice – 10, в result – 10

в twice – undefined, в result – 10

в обеих – ссылка на функцию

Что напечатает программа?

const greet = function () {
  console.log('Привет!');
};
const hello = greet;
hello();
console.log(greet === hello);

Привет!, затем true

Привет!, затем false

ошибка – hello не функция

true, затем Привет!

Что произойдёт здесь?

sayHi();
function sayHi() {
  console.log('Привет!');
}

напечатает Привет!

ReferenceError

напечатает undefined

SyntaxError

Что произойдёт?

say();
const say = function () {
  console.log('привет');
};

напечатает «привет»

ReferenceError

напечатает undefined

вечный цикл

Какие вызовы сработают?

hello();
function hello() {
  console.log('hello');
}
bye();
const bye = function () {
  console.log('bye');
};

Выбери все верные варианты

hello()

bye()

Функция в переменной

Создайте функцию double(x), возвращающую удвоенное число, через Function Expression – сохраните её в переменную double. Вызовы внизу готовы – не меняйте их.

// const double = function ... - функция-выражение в переменной


console.log(double(4));
console.log(double(10));

1const double = function (x) {2  return x * 2;3};45console.log(double(4));6console.log(double(10));7

Функция создана как значение и сохранена в переменной – вызовы работают точно так же, как с обычным объявлением. Точка с запятой в конце – потому что это присваивание.

Второе имя

Функция shout уже написана. Сохраните её в переменную yell – без вызова, чтобы обе переменные указывали на одну функцию. Вызов и сравнение внизу готовы – не меняйте их.

const shout = function (text) {
  console.log(text + '!');
};

// сохраните shout в переменную yell


yell('Ура');
console.log(shout === yell);

1const shout = function (text) {2  console.log(text + '!');3};45const yell = shout;678yell('Ура');9console.log(shout === yell);10

Запись без скобок сохранила ссылку на ту же функцию: yell('Ура') вызывает её, а shout === yell даёт true – функция одна, переменных две.

Вызов раньше строки

Этот код падает с ReferenceError: функция-выражение вызвана раньше строки, где sayHi получает значение. Исправьте программу, чтобы в консоли появилось «Привет!».

sayHi();

const sayHi = function () {
  console.log('Привет!');
};

1const sayHi = function () {2  console.log('Привет!');3};45sayHi();6

Function Expression появляется в переменной только при выполнении строки присваивания – вызов перенесён ниже. Обычное объявление function sayHi() {...} сработало бы и с вызовом сверху.

Предыдущий урокreturn: результат функции Следующий урок Передача функций и колбэки

← → переключают уроки · не работают при фокусе в полях ввода