Function Expression в JavaScript

Function Expression или функциональное выражение в JavaScript - это один из способов записи функции. В этом случае ключевое слово function используется для определения функции внутри выражения.

Синтаксис

    
    let varName = function(param1, param2, param3) {
        alert('Быть JavaScript разработчиком это интересно!');
    };             
    

let varName - для начала мы объявляем переменную куда будет записана функция.

function - ключевое слово, обозначающее функцию.

param1 - параметры функции (не более 255).

{ } - в фигурных скобках - тело функции.

Более популярным синтаксисом при написании функции является Function Declaration или объявление функции - в этом случае программа будет выглядеть так.

    
    function fancName(param1, param2, param3) {
        alert('Быть JavaScript разработчиком это интересно!');
    }          
    

Как в первом, так и во втором случае происходит одно и то же - мы говорим интерпретатору объявить переменную, далее создать функцию и сохранить ее в varName и funcName соответственно. Для большей наглядности можно вывести весь код функции в console или через alert().

    
    let showFuncCode = function() {
        return 'Автором языка программирования JavaScript является Брендан Эйх';
    };
        
    alert (showFuncCode);  // showFuncCode прописываем без вызова (круглых скобок)
        
    let newShowFuncCode = showFuncCode;
    console.log (newShowFuncCode());
    

Другими словами функции в JavaScript это значения с дополнительным функционалом (вызовом) и мы можем, как объявлять их, так и копировать в другие переменные и уже их вызывать. Если добавить к showFuncCode круглые скобки (), тогда в переменную newShowFuncCode будет записан результат, а в console выведется ошибка, так как мы попытаемся вызвать не функцию, а значение. В свою очередь в нашем коде отработает все без ошибок.

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

1. Функциональное выражение доступно для вызова (функция создается) только после того, как интерпретатор дойдет до него. В свою очередь Function Declaration доступно во всем блоке кода, где функция была объявлена, так как обрабатывается интерпретатором до того, как тот приступит к выполнению кода.

    
    alert (showYearCreationJS());

    let showYearCreationJS = function() {
        return 'JavaScript был разработан в 1995 году';
    };        
    

В console можно увидеть ошибку - мы обращаемся к функции showYearCreationJS, до того, как она была создана. В свою очередь следующий код, отработает корректно.

    
    alert (showWhoOwnsJS());

    function showWhoOwnsJS() {
        return 'JavaScript не является собственностью какой-либо компании или организации';
    }        
    

2. Функциональное выражение в отличие от Function Declaration позволяет обойти предел видимости и обратиться к функции за её пределами.

    
    let a = 9;
    let showYearCreationJS; // определяем переменную
        
    if (a == 9) {
        showYearCreationJS = function() {   // записываем функцию в переменную  
            return 'JavaScript был разработан в 1995 году';
        };                                 
        } else {
        function showWhoOwnsJS() {
            return 'JavaScript не является собственностью какой-либо компании или организации';
        }
        }
        
        alert (showYearCreationJS()); // вызов пройдет успешно
        alert (showWhoOwnsJS());      // ошибка - область видимости showWhoOwnsJS ограничивается else
    

3. Фигурные скобки в функциональном выражении заканчиваются точкой с запятой, так как в JavaScript любое выражение заканчивается именно так. Если все-таки не поставите ; код скорее всего отработает корректно, но для того, чтобы избежать возможных ошибок рекомендуется разделать инструкции именно так.

4. Различный синтаксис - функциональное выражение создается внутри другого выражения.

    
    let showPopularFrameworkJS = function() {
        return 'Популярные JavaScript фреймворки: React, Next.js, Angular, Vue';
    };          
    

Function Declaration записывается отдельной конструкцией function.

    
    function showPopularLibrariesJS() {
        return 'Популярные JavaScript библиотеки: JQuery, Backbone.js, Lodash';
    }          
    

Итого

Функция это основной строительный блок в JavaScript, а функциональное выражение это один из синтаксисов с помощью, которого можно записать функцию. Всего можно назвать четыре вида записи функции: Function Declaration, Function Expression, анонимные функции и стрелочные функции.

Несмотря на некоторые положительные моменты в функциональных выражениях более предпочтительно и распространено Function Declaration из-за его доступности во всем блоке кода.