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

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

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

В 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 является очень интересной и позволяет создавать более гибкие сценарии.

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

Есть множество различных способов объявить функцию:

Function A() {}; // декларация функции var B = function () {}; // функциональное выражение var C = (function () {}); // функциональное выражение с оператором группировки var D = function foo () {}; // именованное функциональное выражение var E = (function () {})(); // самовызывающееся функциональное выражение var F = new Function(); // конструктор функции var G = new function() {}; // вырожденный случай: конструктор объекта
В таком обилии сложно не запутаться, не так ли? Как правило, в повседневной жизни мы используем не более трех различных типов объявления функций, и это отлично работает. Однако если копнуть поглубже, то может оказаться, что большинство из нас даже не подозревает какой объём таинств и подводных камней хранит в себе операция объявления функции.

Согласно документации ECMA синтаксис определения функции следующий:
ДекларацияФункции: function Идентификатор (Параметры) { ТелоФункции } ФункциональноеВыражение: function Идентификатор (опционально) (Параметры) { ТелоФункции }
Хоть и выглядят эти определения вполне схожими, но между декларацией функции и функциональным выражением есть большая разница. Декларация функции (Function Declaration ) создается до выполнения любого кода, в то время как функциональное выражение (Function Expression ) будет создано только в момент, когда интерпретатор дойдёт до данной строки кода.

Функциональное выражение - это объявление функции в контексте какого-либо выражения.

Рассмотрим несколько примеров функциональных выражений:

Оператор присваивания

var a = function() {};
Это классический пример задания функционального выражения через присваивание. Оператор присваивания ожидает справа выражение, именно поэтому функция становится частью выражения.
Немного пофантазировав, можно придумать следующие примеры:

Var a = function() { return 1; }() + 12; // 13 var b = function() { return 1; } + ""; // function (){return 1} var c = function() { return 1; } + "" - 1; //NaN

Оператор группировки

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

Function foo() { return 1; } // undefined function foo() { return 1; }(); // Uncaught SyntaxError: Expected () to start arrow function, but got "}" instead of "=>" (function foo() { return 1; }()) // 1 (function foo() { return 1; })() // 1
Принципиальной разницы между третьим и четвертым вариантом нет, так как в первом случае мы выполняем выражение, которое определяет и сразу же исполняет функцию, а во втором случае выполняется выражение, определяющее функцию, которая затем будет выполнена.

Оператор запятая

Оператор запятая вычисляет значение каждого своего операнда (слева направо) и возвращает значение последнего операнда.

0, function() { return 1; }(); // 1

Операторы (+, -, !, ~, void)

+function() { return false; }(); // 0 -function() { return false; }(); // -0 !function() { return false; }(); // true ~function() { return false; }(); // -1 void function() { return false; }(); //undefined

Комбинированные операторы:

!-function () { return false; }(); // true var c = 5 * (2 - function () {return 1}()) // 5 var c = 5 * 2 - -~function () {return 1}() // 8

Отличие именованных функциональных выражений от не именованных:

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

Var f = function getFactorial (n) { return n ? n * getFactorial(n - 1) : 1; }; f(5); // 120

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

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure-a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.

A method is a function that is a property of an object. Read more about objects and methods in Working with objects .

Calling functions

Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is called. Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function square , you could call it as follows:

Square(5);

The preceding statement calls the function with an argument of 5. The function executes its statements and returns the value 25.

Functions must be in scope when they are called, but the function declaration can be hoisted (appear below the call in the code), as in this example:

Console.log(square(5)); /* ... */ function square(n) { return n * n; }

The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level.

Note: This works only when defining the function using the above syntax (i.e. function funcName(){}). The code below will not work. That means, function hoisting only works with function declaration and not with function expression.

Console.log(square); // square is hoisted with an initial value undefined. console.log(square(5)); // Uncaught TypeError: square is not a function var square = function(n) { return n * n; }

The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function. The show_props() function (defined in ) is an example of a function that takes an object as an argument.

A function can call itself. For example, here is a function that computes factorials recursively:

Function factorial(n) { if ((n === 0) || (n === 1)) return 1; else return (n * factorial(n - 1)); }

You could then compute the factorials of one through five as follows:

Var a, b, c, d, e; a = factorial(1); // a gets the value 1 b = factorial(2); // b gets the value 2 c = factorial(3); // c gets the value 6 d = factorial(4); // d gets the value 24 e = factorial(5); // e gets the value 120

There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime. It turns out that functions are, themselves, objects, and these objects in turn have methods (see the Function object). One of these, the apply() method, can be used to achieve this goal.

Function scope

Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined. In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function and any other variable to which the parent function has access.

// The following variables are defined in the global scope var num1 = 20, num2 = 3, name = "Chamahk"; // This function is defined in the global scope function multiply() { return num1 * num2; } multiply(); // Returns 60 // A nested function example function getScore() { var num1 = 2, num2 = 3; function add() { return name + " scored " + (num1 + num2); } return add(); } getScore(); // Returns "Chamahk scored 5"

Scope and the function stack

Recursion

A function can refer to and call itself. There are three ways for a function to refer to itself:

1. the function"s name
2. an in-scope variable that refers to the function

For example, consider the following function definition:

Var foo = function bar() { // statements go here };

Within the function body, the following are all equivalent:

1. bar()
2. arguments.callee()
3. foo()

A function that calls itself is called a recursive function . In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). For example, the following loop:

Var x = 0; while (x < 10) { // "x < 10" is the loop condition // do stuff x++; }

can be converted into a recursive function and a call to that function:

Function loop(x) { if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") return; // do stuff loop(x + 1); // the recursive call } loop(0);

However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (e.g. the DOM) is more easily done using recursion:

Function walkTree(node) { if (node == null) // return; // do something with node for (var i = 0; i < node.childNodes.length; i++) { walkTree(node.childNodes[i]); } }

Compared to the function loop , each recursive call itself makes many recursive calls here.

It is possible to convert any recursive algorithm to a non-recursive one, but often the logic is much more complex and doing so requires the use of a stack. In fact, recursion itself uses a stack: the function stack.

The stack-like behavior can be seen in the following example:

Function foo(i) { if (i < 0) return; console.log("begin: " + i); foo(i - 1); console.log("end: " + i); } foo(3); // Output: // begin: 3 // begin: 2 // begin: 1 // begin: 0 // end: 0 // end: 1 // end: 2 // end: 3

Nested functions and closures

You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a closure . A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.

• The inner function can be accessed only from statements in the outer function.

• The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.

The following example shows nested functions:

Function addSquares(a, b) { function square(x) { return x * x; } return square(a) + square(b); } a = addSquares(2, 3); // returns 13 b = addSquares(3, 4); // returns 25 c = addSquares(4, 5); // returns 41

Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:

Function outside(x) { function inside(y) { return x + y; } return inside; } fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give // it result = fn_inside(5); // returns 8 result1 = outside(3)(5); // returns 8

Preservation of variables

Notice how x is preserved when inside is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside . The memory can be freed only when the returned inside is no longer accessible.

This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.

Multiply-nested functions

Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called scope chaining . (Why it is called "chaining" will be explained later.)

Consider the following example:

Function A(x) { function B(y) { function C(z) { console.log(x + y + z); } C(3); } B(2); } A(1); // logs 6 (1 + 2 + 3)

In this example, C accesses B "s y and A "s x . This can be done because:

1. B forms a closure including A , i.e. B can access A "s arguments and variables.
2. C forms a closure including B .
3. Because B "s closure includes A , C "s closure includes A , C can access both B and A "s arguments and variables. In other words, C chains the scopes of B and A in that order.

The reverse, however, is not true. A cannot access C , because A cannot access any argument or variable of B , which C is a variable of. Thus, C remains private to only B .

Name conflicts

When two arguments or variables in the scopes of a closure have the same name, there is a name conflict . More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:

Function outside() { var x = 5; function inside(x) { return x * 2; } return inside; } outside()(10); // returns 20 instead of 10

The name conflict happens at the statement return x and is between inside "s parameter x and outside "s variable x . The scope chain here is { inside , outside , global object}. Therefore inside "s x takes precedences over outside "s x , and 20 (inside "s x) is returned instead of 10 (outside "s x).

Closures

Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.

Var pet = function(name) { // The outer function defines a variable called "name" var getName = function() { return name; // The inner function has access to the "name" variable of the outer //function } return getName; // Return the inner function, thereby exposing it to outer scopes } myPet = pet("Vivie"); myPet(); // Returns "Vivie"

It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.

Var createPet = function(name) { var sex; return { setName: function(newName) { name = newName; }, getName: function() { return name; }, getSex: function() { return sex; }, setSex: function(newSex) { if(typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")) { sex = newSex; } } } } var pet = createPet("Vivie"); pet.getName(); // Vivie pet.setName("Oliver"); pet.setSex("male"); pet.getSex(); // male pet.getName(); // Oliver

In the code above, the name variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.

Var getCode = (function() { var apiCode = "0]Eal(eh&2"; // A code we do not want outsiders to be able to modify... return function() { return apiCode; }; })(); getCode(); // Returns the apiCode

There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.

Var createPet = function(name) { // The outer function defines a variable called "name". return { setName: function(name) { // The enclosed function also defines a variable called "name". name = name; // How do we access the "name" defined by the outer function? } } }

Using the arguments object

The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:

Arguments[i]

where i is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be arguments . The total number of arguments is indicated by arguments.length .

Using the arguments object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don"t know in advance how many arguments will be passed to the function. You can use arguments.length to determine the number of arguments actually passed to the function, and then access each argument using the arguments object.

For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:

Function myConcat(separator) { var result = ""; // initialize list var i; // iterate through arguments for (i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; }

You can pass any number of arguments to this function, and it concatenates each argument into a string "list":

// returns "red, orange, blue, " myConcat(", ", "red", "orange", "blue"); // returns "elephant; giraffe; lion; cheetah; " myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // returns "sage. basil. oregano. pepper. parsley. " myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

Note: The arguments variable is "array-like", but not an array. It is array-like in that it has a numbered index and a length property. However, it does not possess all of the array-manipulation methods.

Two factors influenced the introduction of arrow functions: shorter functions and non-binding of this .

Shorter functions

In some functional patterns, shorter functions are welcome. Compare:

Var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; var a2 = a.map(function(s) { return s.length; }); console.log(a2); // logs var a3 = a.map(s => s.length); console.log(a3); // logs

No separate this

Until arrow functions, every new function defined its own value (a new object in the case of a constructor, undefined in function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.

Function Person() { // The Person() constructor defines `this` as itself. this.age = 0; setInterval(function growUp() { // In nonstrict mode, the growUp() function defines `this` // as the global object, which is different from the `this` // defined by the Person() constructor. this.age++; }, 1000); } var p = new Person();

In ECMAScript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over.

Function Person() { var self = this; // Some choose `that` instead of `self`. // Choose one and be consistent. self.age = 0; setInterval(function growUp() { // The callback refers to the `self` variable of which // the value is the expected object. self.age++; }, 1000); }

Всем привет! В этой статье я хочу рассказать про то, что такое 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-мя объявлениями функций.