Первоклассное выражение javascript. Различия между function declaration и function expression в javascript. Условное объявление функции

The function keyword can be used to define a function inside an expression.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

var myFunction = function [name ]([param1 [, param2[ , ..., paramN ]]]) { statements };

Parameters

name The function name. Can be omitted, in which case the function is anonymous . The name is only local to the function body. paramN The name of an argument to be passed to the function. statements The statements which comprise the body of the function.

Description

A function expression is very similar to and has almost the same syntax as a function statement (see function statement for details). The main difference between a function expression and a function statement is the function name, which can be omitted in function expressions to create anonymous functions. A function expression can be used as a IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined. See also the chapter about functions for more information.

Function expression hoisting

Function expressions in JavaScript are not hoisted, unlike function declarations . You can"t use function expressions before you define them:

Console.log(notHoisted) // undefined //even though the variable name is hoisted, the definition isn"t. so it"s undefined. notHoisted(); // TypeError: notHoisted is not a function var notHoisted = function() { console.log("bar"); };

Named function expression

If you want to refer to the current function inside the function body, you need to create a named function expression. This name is then local only to the function body (scope) . This also avoids using the non-standard arguments.callee property.

Var math = { "factit": function factorial(n) { console.log(n) if (n <= 1) { return 1; } return n * factorial(n - 1); } }; math.factit(3) //3;2;1;

The variable the function expression is assigned to will have a name property. The name doesn"t change if it"s assigned to a different variable. If function name is omitted, it will be the variable name (implicit name). If function name is present, it will be the function name (explicit name). This also applies to arrow functions (arrows don"t have a name so you can only give the variable an implicit name).

Var foo = function() {} foo.name // "foo" var foo2 = foo foo2.name // "foo" var bar = function baz() {} bar.name // "baz" console.log(foo === foo2); // true console.log(typeof baz); // undefined console.log(bar === baz); // false (errors because baz == undefined)

Examples

The following example defines an unnamed function and assigns it to x . The function returns the square of its argument:

Var x = function(y) { return y * y; }; button.addEventListener("click", function(event) { console.log("button is clicked!") })

Specifications

Specification	Status	Comment
ECMAScript Latest Draft (ECMA-262)	Draft
ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Function definitions" in that specification.	Standard
ECMAScript 5.1 (ECMA-262)	Standard
ECMAScript 3rd Edition (ECMA-262) The definition of "Function definition" in that specification.	Standard	Initial definition. Implemented in JavaScript 1.5.

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile						Server
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
function	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes	nodejs Full support Yes
Trailing comma in parameters	Chrome Full support 58	Edge No support No	Firefox Full support 52	IE No support No	Opera Full support 45	Safari No support No	WebView Android Full support 58	Chrome Android Full support 58	Firefox Android Full support 52	Opera Android Full support 43	Safari iOS No support No	Samsung Internet Android Full support 7.0	nodejs Full support 8.0.0

Legend

Full support Full support No support No support

Всем привет! В этой статье я хочу рассказать про то, что такое function declaration и function expression в языке программирования JavaScript .

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

В той статье рассказывалось про function declaration .

Если вы хотите задать function expression , то вам нужно написать так:

Var func = function(a, b) { return a + b; };

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

Теперь поговорим об различиях этих двух объявлений функции.

Function Declaration

sum();

Function sum() {
alert("Сработало!");
}

Итак, если вы подумали, то вот правильный ответ: ДА , сработает.

Как же такое возможно?

Ответ очень прост. Дело в том, что прежде, чем выполнять код, интерпретатор проходится по нему и собирает в специальное место все объявления переменных и функций. Получается, что он, интепретатор, уже знает весь исходный код функции и может ее вызвать, даже если она написана ниже по коду.

Function Expression

Здесь все в точности, да наоборот.

Var func = function() {
alert("Сработало!");
};

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

Зачем нужны function expression?

На самом деле они много где применяются, но я приведу здесь банальнейший до безобразия пример.

If(age >= 18) {
var func = function() {
alert("Добро пожаловать!");
};
} else {
var func = function() {
alert("Вам еще рановато!");
};
}

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

С function declaration такой фокус не пройдет.

If(age >= 18) {
function func() {
alert("Добро пожаловать!");
}
} else {
function func() {
alert("Вам еще рановато!");
}
}

Вот вам еще одна задачка. Подумайте, что будет делать код выше и какой alert (какая функция) сработает в итоге.

Интерпретатор смотрит код сверху вниз, следовательно, он запишет значение последней функции и ее и будет вызывать.

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

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

Создание функции посредством выражения определения

В JavaScript создать функцию можно не только с помощью традиционного способа (объявления - Traditional Declarations), но и посредством выражения определения (Definition Expressions). Этот способ определения функции в некоторых источниках носит названия функционального литерала.

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

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

Var sum = function(num1,num2) { return console.log(num1+num2); };

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

//например, вызовем функцию, которая содержится в переменной sum и передадим ей 2 аргумента. sum(7,4);

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

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

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

Var factorial = function fact(num) { if (num

Этот код определяет функцию и сохраняет ссылку на неё в переменную factorial . Для вызова функции внутри этой функции используем имя fact . Обратите внимание, что обратиться к функции вне её тела по имени fact нельзя, для этого необходимо использовать переменную factorial .

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

Var factorial = function(num) { if (num

JavaScript - Самовызывающаяся функция

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

Например, вызовем функцию sum немедленно со значениями параметров 7 и 4.

Var sum = function(num1,num2) { return console.log(num1+num2); }(7,4);

Процесс немедленного вызова функции иногда называют инициализацией или инстанциацией функции.

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

(function(num1,num2) { return console.log(num1+num2); }(7,4));

Отличия Function Declaration и Function Expression

Основные различия между функциями Function Declaration и Function Expression представим в следующей таблице:

Function Declaration	Function Expression
Браузер (интерпретатор JavaScript) считает функцию - Function Declaration, если она расположена в основном потоке кода (не является частью какого-либо выражения).	Браузер находит функцию как Function Expression, если она размещена в составе некоторого выражения.
При объявлении функции этим способом, переменная, по которой происходит обращение к ней, создаётся автоматически. function square(a) { return a*a; } // обращение к функции console.log(square(5));	Для обращения к функции необходимо создать переменную и сохранить в неё ссылку на эту функцию. var square = function(a) { return a*a; } // обращение к функции console.log(square(5));
Инициализируется до выполнения кода (в соотвествующей области видимости). Данное действие ещё называют поднятием или hoisting (хойстингом). Такие функции можно вызывать до объявления. // вызываем функцию до её объявления console.log(square(7)); function square(a) { return a*a; }	Функции Function Expression нельзя использовать до объявления. Поднимается только сама переменная. // ошибка при вызове функции console.log(square(7)); var square = function(a) { return a*a; } В этом случае происходит следующее: Var square; console.log(square(7)); // но на этом этапе переменная square имеет значение undefined square = function(a) { return a*a; }
При использовании use strict функция, объявленная как Function Declaration, будет видна только внутри блока, в котором она объявлена. "use strict"; if (true) { function sum(a,b,c) { return a+b+c; } console.log(sum(10,20,10)); } // ошибка доступа к функции sum console.log(sum(4,5,4));	В отличие от Function Declaration, доступ к функции можно получить вне блока, в котором она создана: "use strict"; if (true) { var sum = function (a,b,c) { return a+b+c; } console.log(sum(10,20,10)); } // имеем доступ к функции sum console.log(sum(4,5,4));
Функцию, объявленную как Function Declaration вызвать немедленно нельзя. Для того чтобы это осуществить необходимо функцию сделать частью выражения, например, обернуть её в круглые скобки. После этого функция будет считаться частью выражения (Function Expression) и её можно вызвать немедленно. Например: var sum = (function sum(a,b,c) { return a+b+c; })(5,6,7); console.log(typeof sum); // number console.log(sum); // number	Функцию, объявленную как Function Expression можно вызвать немедленно. var sum = function (a,b,c) { return a+b+c; }(5,6,7); console.log(typeof sum); // number console.log(sum); // number При этом переменная sum (в данном случае) содержит уже не ссылку на функцию, а её результат (в этом примере число).

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