Различия между 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-мя объявлениями функций. Спасибо за внимание и удачи в кодинге!