Различия между Arrow Function, Function Declaration и Function Expression

[evo]

1. Function Declaration (Объявление функции)

Синтаксис:

function имяФункции(параметры) {
  // тело функции
}

Пример:

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

console.log(sayHello("Анна")); // Привет, Анна!

Особенности:

• Объявляется с помощью ключевого слова function.
• Поднимается (hoisted) — можно вызывать до её объявления в коде.
• Имеет своё имя (может быть использовано для рекурсии).
• Создаётся в глобальной области видимости или в области видимости функции, где объявлена.

Пример hoisting:

console.log(greet("Мария")); // Работает! Вывод: Здравствуй, Мария!

function greet(name) {
  return `Здравствуй, ${name}!`;
}

---

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

Синтаксис:

const имяПеременной = function(параметры) {
  // тело функции
};

Пример:

const sayGoodbye = function(name) {
  return `Пока, ${name}!`;
};

console.log(sayGoodbye("Иван")); // Пока, Иван!

Особенности:

• Функция присваивается переменной.
• Не поднимается полностью — переменная поднимается, но не значение (функция).
• Можно быть анонимной или именованной.
• Часто используется как callback или для передачи функций как аргументов.

Пример с именованной функцией (редко, но возможно):

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Важно:

console.log(add(2, 3)); // Ошибка! Cannot access 'add' before initialization

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

️ const и let не поднимаются (или поднимаются, но в "temporal dead zone"), поэтому вызов до объявления — ошибка.

---

3. Arrow Function (Стрелочная функция)

Синтаксис:

const имя = (параметры) => {
  // тело функции
};

Примеры:

// Однострочная (неявный return)
const multiply = (a, b) => a * b;

// Многострочная (явный return нужен)
const divide = (a, b) => {
  if (b === 0) return "Ошибка: деление на ноль";
  return a / b;
};

// Без параметров
const greet = () => "Привет, мир!";

// Один параметр — скобки можно опустить
const square = x => x * x;

Особенности:

• Нет собственного this, arguments, super, new.target.
• Не поднимается (как и function expression).
• Не имеет имени (анонимная), но может быть присвоена переменной.
• Лексическое this — берёт this из внешнего контекста.
• Не может использоваться как конструктор (new вызовет ошибку).
• Не имеет arguments — используйте ...args.

---

Различия: Сравнение

Характеристика	Function Declaration	Function Expression	Arrow Function
Синтаксис	function name() {}	const f = function() {}	const f = () => {}
Hoisting	Да (вся функция)	Нет (только переменная)	Нет
this	Собственное (зависит от вызова)	Собственное	Лексическое (взято извне)
arguments	Есть	Есть	Нет (используйте ...args)
Можно использовать new	Да	Да	Нет (ошибка)
Имя функции	Да	Может быть (но редко)	Нет (анонимная)
Подходит для методов объекта	Да	Да	Осторожно (из-за this)

---

Пример с this — ключевое отличие

const user = {
  name: "Алексей",
  regularFunction: function() {
    console.log("Привет, я " + this.name);
  },
  arrowFunction: () => {
    console.log("Привет, я " + this.name); // this — не user!
  }
};

user.regularFunction(); // Привет, я Алексей
user.arrowFunction();   // Привет, я undefined (в браузере может быть window.name)

Почему? У стрелочной функции this берётся из внешнего контекста, а не из объекта user.

---

Когда что использовать?

Тип функции	Когда использовать
Function Declaration	Когда нужна hoisting, простая именованная функция
Function Expression	Когда функция — значение (callback, замыкание)
Arrow Function	Для коротких функций, в map/filter, когда нужен лексический this

---

Примеры в реальных сценариях

1. Arrow Function в map

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

2. Function Expression как callback

button.addEventListener('click', function() {
  console.log('Кнопка нажата');
});

3. Function Declaration — удобно для чтения

function validateEmail(email) {
  return email.includes("@");
}

---

Вывод

• Function Declaration — классика, поднимается, удобна для простых функций.
• Function Expression — гибкая, не поднимается, хороша для динамических функций.
• Arrow Function — короткая, лексическое this, идеальна для колбэков и однострочных операций.

Выбирайте в зависимости от контекста: нужно ли this, нужна ли hoisting, где используется функция.