Всем привет! В этом материале я хочу рассказать про то, что такое function declaration и function expression в языке программирования JavaScript .
Всем привет! В этом материале я хочу рассказать про то, что такое 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
Здесь все в точности, да наоборот.
func();
var func = function() {
alert('Сработало!');
};
Про такие функции интепретатор узнает лишь тогда, когда дойдет до нее в коде, поэтому пример выше не сработает. Однако, если написать вызов функции ниже, то все будет работать.
Зачем нужны function expression?
На самом деле они много где применяются, но я приведу здесь банальнейший до безобразия пример.
var age = 17;
if(age >= 18) {
var func = function() {
alert('Добро пожаловать!');
};
} else {
var func = function() {
alert('Вам еще рановато!');
};
}
func();
Теперь, в зависимости от условия, в переменную func будет записан разный исходный код и, следовательно, функции будут вести себя по-разному.
С function declaration такой фокус не пройдет.
var age = 17;
if(age >= 18) {
function func() {
alert('Добро пожаловать!');
}
} else {
function func() {
alert('Вам еще рановато!');
}
}
func();
Вот вам еще одна задачка. Подумайте, что будет делать код выше и какой alert(какая функция) сработает в итоге.
Интерпретатор смотрит код сверху вниз, следовательно, он запишет значение последней функции и ее и будет вызывать.
Итак, надеюсь, вы поняли различия между этими 2-мя объявлениями функций.
Спасибо за внимание и удачи в кодинге!
