Зачем нужна Function Expression?

Зачем нужна Function Expression?

Function Expression (функциональное выражение) — это один из способов объявления функций в JavaScript. Это не просто альтернатива Function Declaration, а инструмент с особыми свойствами и преимуществами.

Function Declaration vs Function Expression

Function Declaration (объявление функции):

function greet(name) {
  return `Привет, ${name}!`;
}

// Можно вызвать ДО объявления (hoisting)
console.log(greet("John")); // Привет, John!

function greet(name) {
  return `Привет, ${name}!`;
}

Function Expression (функциональное выражение):

// Присваиваем функцию переменной
const greet = function(name) {
  return `Привет, ${name}!`;
};

// Вызвать нельзя ДО присваивания (ReferenceError)
// console.log(greet("John")); // Ошибка!

console.log(greet("John")); // Привет, John!

Основные преимущества Function Expression

1. Присваивание и передача как значение

// Function Expression можно присваивать переменным
const add = function(a, b) {
  return a + b;
};

const subtract = function(a, b) {
  return a - b;
};

// Передавать как аргумент (callback)
function calculate(a, b, operation) {
  return operation(a, b);
}

console.log(calculate(5, 3, add));      // 8
console.log(calculate(5, 3, subtract)); // 2

2. Возвращение функции из функции (Higher-Order Function)

function createMultiplier(multiplier) {
  return function(x) {
    return x * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

3. Локализация области видимости (замыкание)

// Function Expression создаёт свою область видимости
const counter = (function() {
  let count = 0; // Приватная переменная
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.count);       // undefined (приватна)

4. Условное объявление функции

// Function Expression позволяет объявлять функцию условно
const env = "production";

const log = env === "development" 
  ? function(msg) { console.log("[DEV]", msg); }
  : function(msg) { /* в продакшене логирование отключено */ };

log("Debug message"); // [DEV] Debug message (если development)

5. Именованные Function Expression (Named Function Expression)

// Функция может иметь имя, доступное только внутри себя
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // Рекурсия через имя fact
};

console.log(factorial(5)); // 120
// console.log(fact(5)); // ReferenceError — fact недоступна снаружи

Стрелочные функции (Arrow Functions) — современная Function Expression

// Стрелочная функция — это тоже Function Expression
const add = (a, b) => a + b;
const greet = (name) => `Привет, ${name}!`;

// С блоком кода
const calculate = (a, b) => {
  const sum = a + b;
  return sum * 2;
};

// Основное отличие от Function Declaration — нет своего this
const user = {
  name: "John",
  greet: function() {
    // Function Expression (обычная) — имеет свой this
    return this.name;
  },
  greetArrow: () => {
    // Стрелочная — не имеет своего this, наследует от родителя
    return this.name; // undefined
  }
};

Практические примеры

1. Фабрика функций (Factory Pattern)

function createHandler(eventType) {
  return function(event) {
    console.log(`Обработан ${eventType}:`, event.target);
  };
}

const clickHandler = createHandler("click");
const hoverHandler = createHandler("hover");

document.addEventListener("click", clickHandler);

2. Декоратор (добавление функциональности)

function logExecution(fn) {
  return function(...args) {
    console.log(`Вызов функции с аргументами:`, args);
    const result = fn(...args);
    console.log(`Результат:`, result);
    return result;
  };
}

const add = (a, b) => a + b;
const addWithLog = logExecution(add);

addWithLog(5, 3);
// Вызов функции с аргументами: [5, 3]
// Результат: 8

3. Обработчики событий в React

const MyComponent = () => {
  const handleClick = function() {
    console.log("Клик!");
  };
  
  return (
    <button onClick={handleClick}>
      Нажми меня
    </button>
  );
};

4. Полнозаполняемая функция (Currying)

function curryAdd(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

const add5 = curryAdd(5);
const add5And3 = add5(3);
const result = add5And3(2);

console.log(result); // 10

Сравнение в таблице

Ключевые моменты

• Function Expression — это присваивание функции переменной
• Можно передавать как аргумент и возвращать из функций
• Нет hoisting — вызывать можно только после присваивания
• Позволяет создавать замыкания и приватные переменные
• Стрелочные функции — современная форма Function Expression
• Higher-Order Functions и декораторы строятся на Function Expression