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

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

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

Синтаксис Function Declaration

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Hello, Alice!

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

1. Hoisting (подъём в памяти)

Одна из главных особенностей Function Declaration — это hoisting. Функция может быть вызвана до её объявления в коде:

// Это работает!
console.log(add(5, 3)); // 8

function add(a, b) {
  return a + b;
}

Это происходит потому, что JavaScript движок поднимает объявления функций на верх области видимости перед выполнением кода.

2. Четкое разделение ответственности

Function Declaration делает код более читаемым, когда нужна отдельная, полноценная функция:

function calculateDiscount(price, discountPercent) {
  const discount = (price * discountPercent) / 100;
  return price - discount;
}

function applyTax(price, taxPercent) {
  return price + (price * taxPercent) / 100;
}

const finalPrice = applyTax(calculateDiscount(100, 10), 20);

3. Лучше для больших и сложных функций

Когда функция занимает много строк кода, Function Declaration более понятна, чем arrow function или function expression:

function processUserData(userData) {
  // Валидация
  if (!userData || !userData.email) {
    throw new Error("Invalid user data");
  }
  
  // Трансформация
  const processed = {
    id: userData.id,
    email: userData.email.toLowerCase(),
    name: userData.name.trim(),
    createdAt: new Date(userData.created_at)
  };
  
  // Логирование
  console.log("Processed user:", processed);
  
  return processed;
}

Сравнение с другими способами создания функций

Function Declaration vs Function Expression

// Function Declaration — hoisting работает
console.log(declaredFunc()); // OK
function declaredFunc() {
  return "I am declared function";
}

// Function Expression — hoisting НЕ работает для самой функции
console.log(expressedFunc()); // ERROR: expressedFunc is not a function
const expressedFunc = function() {
  return "I am function expression";
};

Function Declaration vs Arrow Function

// Function Declaration
function multiply(a, b) {
  return a * b;
}

// Arrow Function
const multiplyArrow = (a, b) => a * b;

// Различия:
// 1. this — в Declaration используется обычный this, в Arrow — лексический this
// 2. arguments — в Declaration есть объект arguments, в Arrow — нет
// 3. Как конструктор — Declaration может быть конструктором, Arrow — нет

function Person(name) {
  this.name = name;
}
const person = new Person("John"); // Работает

const PersonArrow = (name) => {
  this.name = name; // this будет из outer scope
};
const personArrow = new PersonArrow("John"); // ERROR!

Когда использовать Function Declaration

1. Методы объектов — для логических операций

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

1. Обработчики событий с контекстом — когда нужен собственный this

const button = document.querySelector("button");
function handleClick() {
  console.log(this); // HTMLButtonElement
}
button.addEventListener("click", handleClick);

1. Рекурсивные функции — Function Declaration более явна

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

1. Функции, которые вызываются до объявления — используй hoisting

// Инициализация данных
init();

function init() {
  loadData();
}

function loadData() {
  console.log("Data loaded");
}

Лучшие практики

• Используй Function Declaration для основных функций, которые используются как отдельные единицы логики
• Используй Arrow Functions для коротких коллбэков и когда нужен лексический this
• Используй Function Expression в редких случаях, когда функция зависит от переменных, определённых позже

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