Подробно о функциях JavaScript

Функции JavaScript определяются при помощи ключевого слова function.

Вы можете использовать либо декларацию функции, либо функцию-выражение.

Декларация функции

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

Декларированные функции выполняются не сразу. Они имеют статус "отложенного использования" и выполняются только тогда, когда к ним обратятся (вызовут).

function myFunction(a, b) {
     return a * b;
}

Внимание! Точка с запятой используется для разделения выполняемых выражений JavaScript. Так как декларация функции не является выполняемым выражением, в конце нее обычно не ставят точку с запятой.

Функции-выражения

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

Функции-выражения могут храниться в переменных:

var x = function (a, b) { return a * b };

После того как функция-выражение сохранена в переменной, эта переменная может использоваться как функция:

var x = function (a, b) { return a * b };
var z = x(4, 3);

На самом деле функция в предыдущем примере является анонимной (функция без имени).

Функциям, сохраненным в переменных, не нужны имена. Они вызываются при помощи имени переменной.

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

Конструктор Function()

Как вы видели в предыдущих примерах, функции JavaScript определяются при помощи ключевого слова function.

Однако, кроме этого функции также могут определяться при помощи встроенной функции конструктора Function().

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3); 

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

Предыдущий пример аналогичен следующему коду:

var myFunction = function (a, b) { return a * b };

var x = myFunction(4, 3); 

В большинстве случаев в JavaScript можно избежать использование ключевого слова new.

Поднятие функций

Ранее в этом учебнике вы уже познакомились с таким понятием, как "поднятие" переменных. (Глава Поднятие переменных в Javascript)

"Поднятие" — это такое поведение JavaScript, при котором декларации перемещаются (поднимаются) в начало текущей области видимости.

Поднятие применяется к декларациям переменных и функций.

Благодаря этому функции JavaScript можно вызывать до того, как они будут декларированы:

myFunction(5);

function myFunction(y) {
     return y * y;
} 

Внимание! Функции, декларированные как выражения, не поднимаются.

Самовызываемые функции

Функции-выражения могут быть "самовызываемыми".

Самовызываемые выражения вызываются (начинают работать) автоматически без специального вызова.

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

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

(function () {
    var x = "Hello!!";      // Я вызову сама себя
})(); 

Функция в предыдущем примере это анонимная самовызываемая функция.

Функции могут использоваться как значения

Функции JavaScript могут использоваться как значения:

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3); 

Функции JavaScript могут использоваться в выражениях:

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2; 

Функции — это объекты

Оператор typeof в JavaScript возвращает для функций тип "function". Однако лучше всего функции JavaScript можно описать как объекты.

У функций JavaScript есть свойства и методы.

Свойство arguments.length возвращает количество параметров, полученных при вызове функции:

function myFunction(a, b) {
    return arguments.length;
} 

Метод toString() возвращает функцию как строку:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString(); 

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

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

"Стрелочные" функции

"Стрелочные" функции предоставляют короткую запись для выражений-функций.

При этом в выражении-функции не нужно использовать ключевые слова function, return и фигурные скобки:

// ES5
var x = function(x, y) {
      return x * y;
}

// ES6
const x = (x, y) => x * y;

У стрелочных функций нет своего значения this. И они не подходят для определения методов объектов.

Стрелочные функции не поднимаются. Они должны определяться до их использования.

Для декларации стрелочных функций использовать ключевое слова const безопаснее ключевого слова var, потому что по своей сути функция — это константное значение.

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

Хорошей привычкой будет писать их всегда:

const x = (x, y) => { return x * y };

Стрелочные функции не поддерживаются в IE11 и более ранних версиях IE.