JavaScript: Функции

Объявление и вызов функции
Функция обратного вызова

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

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

Объявление и вызов функции

Существует три способа объявления функции: Function Declaration, Function Expression и Named Function Expression.

Function Declaration (сокращённо FD) – это "классическое" объявление функции. В JavaScript функции объявляются с помощью литерала функции. Синтаксис объявления FD:

function идентификатор (параметры) { инструкции }

Литерал функции состоит из следующих четырёх частей:

Ключевое слово function.
Обязательный идентификатор, определяющий имя функции. В качестве имени функции обычно выбирают глагол, т. к. функция выполняет действие.
Пара круглых скобок вокруг списка из нуля или более идентификаторов, разделяемых запятыми. Данные идентификаторы называются параметрами функции.
Тело функции, состоящее из пары фигурных скобок, внутри которых располагаются инструкции. Тело функции может быть пустым, но фигурные скобки должны быть указаны всегда.

Простой пример:

function sayHi() {
  alert("Hello");
}

Встречая ключевое слово function интерпретатор создаёт функцию и затем присваивает ссылку на неё переменной с именем sayHi (переменная с данным именем создаётся интерпретатором автоматически).

Обратившись к переменной sayHi можно увидеть, что в качестве значения там находится функция (на самом деле ссылка на неё):

alert(sayHi);   // function sayHi() { alert("Hello"); }

Function Expression (сокращённо FE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления FE:

function (параметры) { инструкции }

Простой пример:

var sayHi = function () {
  alert("Hello");
};

Функцию FE иначе ещё называют "анонимной функцией".

Named Function Expression (сокращённо NFE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления NFE:

function идентификатор (параметры) { инструкции }

Простой пример:

var sayHi = function foo() {
  alert("Hello");
};

Объявления FE и NFE обрабатываются интерпретатором точно так же, как и объявление FD: интерпретатор создаёт функцию и сохраняет ссылку на неё в переменной sayHi.

Программный код, расположенный в теле функции, выполняется не в момент объявления функции, а в момент её вызова. Для вызова функции используется оператор () (вызов функции):

function sayHi() {
  alert("Hello");
}

var sayHi2 = function () {
  alert("Hello2");
};

var sayHi3 = function foo() {
  alert("Hello3");
};
sayHi();    // "Hello"
sayHi2();   // "Hello2"
sayHi3();   // "Hello3"

Разница между представленными тремя объявлениями заключается в том, что функции, объявленные как FD, создаются интерпретатором до начала выполнения кода (на этапе анализа), поэтому их можно вызывать (в той области видимости где они объявлены) до объявления:

// Вызов функции до её объявления в коде верхнего уровня
foo();

function foo() {
  alert("Вызов функции foo() в глобальной области видимости.");

  // Вызов функции до её объявления в области видимости функции
  bar();
  function bar() {
    alert("Вызов функции bar() в области видимости функции.");
  }
}

Функции, объявленные как FE или NFE, создаются в процессе выполнения кода, поэтому их можно вызывать только после того как они объявлены:

// sayHi();  // Ошибка. Функция sayHi ещё не существует

var sayHi = function () {
  alert("Hello!");
};

sayHi();

Функции, объявленные внутри блока, находятся в блочной области видимости:

// foo();   // Ошибка. Функция не объявлена.
{
  foo();   // 1
  function foo() {
    console.log(1);
  }
}

foo();    // Ошибка. Функция не объявлена.

В отличие от FE, функция, объявленная как NFE, имеет возможность обращаться к себе по имени при рекурсивном вызове. Имя функции доступно только внутри самой функции:

(function sayHi(str) {
  if (str) { return; }
  sayHi("hi");   // Имя доступно внутри функции
})();

sayHi();         // Ошибка. Функция не объявлена

Функция обратного вызова

Функция обратного вызова – это функция, которая передаётся в качестве аргумента другой функции для последующего её вызова.

Функции обратного вызова часто используются, в качестве обработчиков событий.

Ниже приведён пример функции, принимающей в качестве своего аргумента ссылку на другую функцию для её последующего вызова:

function foo(callback) { return callback(); }

foo (function() { alert("Hello!"); });

Этот пример наглядно демонстрирует принцип действия обратного вызова.

С этой темой смотрят: