Первоклассное выражение 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Выражения в JavaScript представляют собой комбинации операндов и операторов .
Операции в выражениях выполняются последовательно в соответствии со значением приоритета (чем больше значение приоритета, тем он выше). Возвращаемый результат не всегда имеет значение того же типа, что и тип обрабатываемых данных. Например, в операциях сравнения участвуют операнды различных типов, но возвращаемый результат всегда будет логического типа.
Рис. 1. Структура выражения в JavaScript
Операнды — это данные, обрабатываемые сценарием JavaScript. В качестве операндов могут быть как простые типы данных, так и сложные, а также другие выражения.
Операторы — это символы языка, выполняющие различные операции с данными. Операторы могут записываться с помощью символов пунктуации или ключевых слов.
В зависимости от количества операндов различают следующие типы операторов:
унарный
— в операции участвует один операнд;
бинарный
— в операции участвуют два операнда;
тернарный
— комбинирует три операнда.
Простейшая форма выражения — литерал — нечто, вычисляемое само в себя, например, число 100 , строка "Hellow world" . Переменная тоже может быть выражением, так как она вычисляется в присвоенное ей значение.
Выражения и операторы в JavaScript
1. Арифметические операторы
Арифметические операторы предназначены для выполнения математических операций, они работают с числовыми операндами (или переменными, хранящими числовые значения), возвращая в качестве результата числовое значение.
Если один из операндов является строкой, интерпретатор JavaScript попытается преобразовать его в числовой тип, а после выполнить соответствующую операцию. Если преобразование типов окажется невозможным, будет получен результат NaN (не число).
| Оператор/Операция | Описание | Приоритет |
|---|---|---|
| + Сложение | Складывает числовые операнды. Если один из операндов — строка, то результатом выражения будет строка. | 12 |
| - Вычитание | Выполняет вычитание второго операнда из первого. | 12 |
| - Унарный минус | Преобразует положительное число в отрицательное, и наоборот. | 14 |
| * Умножение | Умножает два операнда. | 13 |
| / Деление | Делит первый операнд на второй. Результатом деления может являться как целое, так и число с плавающей точкой. | 13 |
| % Деление по модулю (остаток от деления) | Вычисляет остаток, получаемый при целочисленном делении первого операнда на второй. Применяется как к целым числам, так и числам с плавающей точкой. | 13 |
2. Операторы присваивания
Операторы присваивания используются для присваивания значений переменным. Комбинированные операторы позволяют сохранить первоначальное и последующее значение в одной переменной.
var a = 5; // присваиваем переменной a числовое значение 5 var b = "hellow"; // сохраняем в переменной b строку hellow var m = n = z = 10; // присваиваем переменным m, n, z числовое значение 10 x += 10; // равнозначно x = x + 10; x -= 10; // равнозначно x = x - 10; x *= 10; // равнозначно x = x * 10; x /= 10; // равнозначно x = x / 10; x %= 10; // равнозначно x = x % 10;3. Операторы инкремента и декремента
Операции инкремента и декремента являются унарными и производят увеличение и уменьшение значения операнда на единицу. В качестве операнда может быть переменная, элемент массива, свойство объекта. Чаще всего такие операции используются для увеличения счетчика в цикле.
var x = y = m = n = 5, z, s, k, l; z = ++x * 2; /* в результате вычислений вернет значение z = 12, x = 6, т.е. значение x сначала увеличивается на 1, а после выполняется операция умножения */ s = y++ * 2; /* в результате вычислений вернет значение s = 10, y = 6, т.е. сначала выполняется операция умножения, а после в переменной y сохраняется увеличенное на 1 значение */ k = --m * 2; // вернет значение k = 8, m = 4 l = n-- * 2; // вернет значение l = 10, n = 44. Операторы сравнения
Операторы сравнения используются для сопоставления операндов, результатом выражения может быть одно из двух значений — true или false . Операндами могут быть не только числа, но и строки, логические значения и объекты. Однако сравнение может выполняться только для чисел и строк, поэтому операнды, не являющиеся числами или строками, преобразуются.
Если оба операнда не могут быть успешно преобразованы в числа или строки, операторы всегда возвращают false .
Если оба операнда являются строками/числами или могут быть преобразованы в строки/числа, они будут сравниваться как строки/числа.
Если один операнд является строкой/преобразуется в строку, а другой является числом/преобразуется в число, то оператор попытается преобразовать строку в число и выполнить сравнение чисел. Если строка не является числом, она преобразуется в значение NaN и результатом сравнения будет false .
Чаще всего операции сравнения используются при организации ветвлений в программах.
| Оператор/Операция | Описание | Приоритет |
|---|---|---|
| == Равенство | Проверяет две величины на совпадение, допуская преобразование типов. Возвращает true , если операнды совпадают, и false , если они различны. | 9 |
| != Неравенство | Возвращает true , если операнды не равны | 9 |
| === Идентичность | Проверяет два операнда на «идентичность», руководствуясь строгим определением совпадения. Возвращает true , если операнды равны без преобразования типов. | 9 |
| !== Неидентичность | Выполняет проверку идентичности. Возвращает true , если операнды не равны без преобразования типов. | 9 |
| > Больше | Возвращает true , если первый операнд больше второго, в противном случае возвращает false . | 10 |
| >= Больше или равно | Возвращает true , если первый операнд не меньше второго, в противном случае возвращает false . | 10 |
| Возвращает true , если первый операнд меньше второго, в противном случае возвращает false . | 10 | |
| Возвращает true , если первый операнд не больше второго, в противном случае возвращает false . | 10 |
5. Логические операторы
Логические операторы позволяют комбинировать условия, возвращающие логические величины. Чаще всего используются в условном выражении if .
(2 < 3) && (3===3); // вернет true, так как выражения в обеих скобках дают true (x < 10 && x > 0); // вернет true, если значение x принадлежит промежутку от 0 до 10 !false; // вернет true6. Побитовые операторы
Побитовые операторы работают с операндами как с 32-битной последовательностью нулей и единиц и возвращают числовое значение, означающее результат операции, записанное в десятичной системе счисления. В качестве операндов рассматриваются целые числа, дробная часть операнда отбрасывается. Побитовые операции могут использоваться, например, при шифровании данных, для работы с флагами, разграничения прав доступа.
| Оператор/Операция | Описание | Приоритет |
|---|---|---|
| & Побитовый И | Если оба бита равны 1 , то результирующий бит будет равен 1 . В противном случае результат равен 0 . | 8 |
| | Побитовый ИЛИ | Если один из операндов содержит в позиции 1 , результат тоже будет содержать 1 в этой позиции, в противном случае результат в этой позиции будет равен 0 . | 6 |
| ^ Исключающее ИЛИ | Если одно, и только одно значение содержит 1 в какой-либо позиции, то и результат будет содержать 1 в этой позиции, в противном случае результат в этой позиции будет равен 0 . | 7 |
| ~ Отрицание | Выполняется операция побитового отрицания над двоичным представлением значения выражения. Любая позиция, содержащая 1 в исходном выражении, заменяется на 0 . Любая позиция, содержащая 0 в исходном выражении, становится равной 0 . Положительные числа начинаются с 0 , отрицательные - с -1 , поэтому ~ n == -(n+1) . | 14 |
| Оператор сдвигает биты первого операнда влево на число битовых позиций, установленных вторым операндом. Для заполнения позиций справа используются нули. Возвращают результат того же типа, что левый операнд. | 11 | |
| >> Побитовый сдвиг вправо | Оператор сдвигает биты первого операнда вправо на число битовых позиций, установленных вторым операндом. Цифры, сдвинутые за пределы диапазона, удаляются. Самый старший бит (32й) не меняется, чтобы сохранить знак результата. Если первый операнд положителен, старшие биты результата заполняются нулями; если первый операнд отрицателен, старшие биты результата заполняются единицами. Сдвиг значения вправо на одну позицию эквивалентен делению на 2 (с отбрасыванием остатка), а сдвиг вправо на две позиции эквивалентен делению на 4 и т. д. | 11 |
| >>> Побитовый сдвиг вправо без учета знака | Оператор сдвигает биты первого операнда вправо на число битовых позиций, установленных вторым операндом. Слева добавляются нули независимо от знака первого операнда. Цифры, сдвинутые за пределы диапазона, удаляются. | 11 |
7. Строковые операторы
Существует несколько операторов, которые работают со строками особым образом.
"1" + "10"; // вернет "110" "1" + 10; // вернет "110" 2 + 5 + " цветных карандашей"; // вернет "7 цветных карандашей" "Цветных карандашей " + 2 + 5; // вернет "Цветных карандашей 25" "1" > "10"; // вернет false "10" <= 10; // вернет true "СССР" == "ссср"; // вернет false x = "micro"; x+= "soft"; // вернет "microsoft"8. Специальные операторы
| Оператор/Операция | Описание | Приоритет |
|---|---|---|
| . Обращение к свойству | Осуществляет доступ к свойству объекта. | 15 |
| , Множественное вычисление | Вычисляет несколько независимых выражений, записанных в одну строку. | 1 |
| Индексация массива | Осуществляет доступ к элементам массива или свойствам объекта. | 15 |
| () Вызов функции, группировка | Группирует операции или вызывает функцию. | 15 |
| typeof Определение типа данных | Унарный оператор, возвращает тип данных операнда. | 14 |
| instanceof Проверка типа объекта | Оператор проверяет, является ли объект экземпляром определенного класса. Левый операнд должен быть объектом, правый - должен содержать имя класса объектов. Результат будет true , если объект, указанный слева, представляет собой экземпляр класса, указанного справа, в противном случае - false . | 10 |
| in Проверка наличия свойства | В качестве левого операнда должна быть строка, а правым - массив или объект. Если левое значение является свойством объекта, вернется результат true . | 10 |
| new Создание объекта | Оператор создает новый объект с неопределенными свойствами, затем вызывает функцию-конструктор для его инициализации (передачи параметров). Также может применяться для создания массива. | 1 |
| delete Удаление | Оператор позволяет удалять свойство из объекта или элемент из массива. Возвращает true , если удаление прошло успешно, в противном случае false . При удалении элемента массива его длина не меняется. | 14 |
| void Определение выражения без возвращаемого значения | Унарный оператор, отбрасывает значение операнда и возвращает underfined . | 14 |
| ?: Операция условного выражения | Тернарный оператор, позволяет организовать простое ветвление. В выражении участвуют три операнда, первый должен быть логическим значением или преобразовываться в него, а второй и третий - любыми значениями. Если первый операнд равен true , то условное выражение примет значение второго операнда; если false - то третьего. | 3 |
9. Комментарии в 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
Важно:
Помните, вы пишете код для людей, поэтому старайтесь избегать написания кода в стиле ниндзя. Приведённые в статье знания полезны для того, чтобы понимать внутреннее устройство языка и не растеряться в случае, если вам вдруг встретятся такие выражения в одном из проектов или на собеседовании.
Статья, в которой рассмотрим ещё один способ создания функции - посредством выражения определения. Кроме этого разберём отличие этого способа объявления функции от традиционного.
Создание функции посредством выражения определения
В 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 является очень интересной и позволяет создавать более гибкие сценарии.