Какие знаешь два вида объявления функции в JS?

Два вида объявления функции в JavaScript

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

1. Function Declaration (Декларация функции)

Function Declaration — это классический способ объявления функции с помощью ключевого слова function, имени функции и тела функции. Такая функция создаётся до выполнения кода благодаря механику hoisting (поднятие).

// Пример Function Declaration
function calculateSum(a, b) {
    return a + b;
}

Ключевые особенности Function Declaration:

• Поднятие (Hoisting): Функция доступна в своей области видимости до того места, где она объявлена. Это значит, что можно вызвать calculateSum() даже выше её объявления в коде.
• Имя функции обязательно: Декларация всегда имеет имя, что полезно для стек-трейсов при отладке ошибок в тестах.
• Создание в глобальной или локальной области видимости: Функция становится частью области видимости (глобальной или функции, где объявлена).
• Типичное использование: Для основных функций логики приложения, утилитарных функций, которые используются многократно.

// Пример hoisting: вызов функции до её объявления допустим
const result = addNumbers(5, 10); // Работает!

function addNumbers(x, y) {
    return x + y;
}

2. Function Expression (Функциональное выражение)

Function Expression — это объявление функции как части выражения (обычно присваивания переменной). Функция может быть named (именованной) или anonymous (анонимной). Она не подвергается hoisting в полном смысле — переменная с ней доступна только после присваивания.

// Пример Function Expression (анонимная)
const multiply = function(a, b) {
    return a * b;
};

// Пример Function Expression (именованная)
const divide = function divideNumbers(x, y) {
    return x / y;
};

Ключевые особенности Function Expression:

• Отсутствие hoisting для переменной: Переменная multiply или divide не доступна до своего объявления (если используется const или let). При использовании var переменная будет hoisted, но её значение (функция) — нет.
• Анонимные и именованные формы: Анонимные функции удобны для кратких callback'ов, но именованные лучше для отладки.
• Гибкость использования: Функциональные выражения часто используются как callback функции, аргументы других функций, или для создания методов объектов.
• Создание в runtime: Функция создаётся в момент выполнения присваивания.

// Пример: Function Expression в callback (анонимная)
[1, 2, 3].map(function(item) {
    return item * 2;
});

// Пример: Function Expression с именованной функцией
const logger = function logMessage(msg) {
    console.log(`LOG: ${msg}`);
};

Практическое значение для QA Automation

При написании автотестов (например, на Selenium WebDriver, Playwright или в Node.js) понимание этих различий помогает:

• Анализировать код приложения: Чтобы правильно мокать или стабировать функции, нужно знать, как они объявлены и когда доступны.
• Избегать ошибок времени выполнения: Если попытаться использовать Function Expression через const до её объявления, тест упадёт с ReferenceError.
• Писать более надежные утилиты для тестов: Использовать Function Declaration для основных функций-хелперов в тестовых фреймворках, чтобы они были доступны в любом месте модуля.

Пример в контексте тестирования:

// Function Declaration для утилиты тестов — доступна везде в файле
function assertPageLoaded(pageTitle) {
    const actualTitle = browser.getTitle();
    if (actualTitle !== pageTitle) {
        throw new Error(`Page title mismatch. Expected: ${pageTitle}, Actual: ${actualTitle}`);
    }
}

// Function Expression для специфичного callback в тесте — создаётся в месте использования
const testCase = {
    run: function() {
        // ... тестовые действия
    }
};

// Использование
assertPageLoaded('Login Page'); // Работает даже если объявление ниже по коду
testCase.run(); // Вызов после объявления

Итог

• Function Declaration: function name() {} — hoisting, имя, доступна до объявления.
• Function Expression: const fn = function() {} — нет hoisting (для значения), гибкость, часто используется как callback или присваивается переменной.

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