Разница между arrow function и function declaration

Question

Стрелочные функции (() => {}) и обычные функции (function() {}) ведут себя по-разному:Контекст (this) – В стрелочных функциях this берется из внешней области, а в обычных – зависит от вызова.Синтаксис – Стрелочные функции короче, но не имеют arguments и не могут быть конструкторами (new).Hoisting – Обычные функции можно вызвать до объявления, а стрелочные – нет.

YeaHub · Accepted Answer

1. Контекст (this)Обычные функции имеют свой this, который зависит от того, как их вызывают:const obj = {
  name: "Alex",
  greet: function() {
    console.log(this.name); // "Alex" (this = obj)
  }
};
obj.greet();Если вызвать функцию отдельно, this может потеряться (например, в колбэках).Стрелочные функции не имеют своего this и берут его из внешней области:const obj = {
  name: "Alex",
  greet: () => {
    console.log(this.name); // undefined (this = window/global)
  }
};
obj.greet();Они удобны, когда нужно сохранить контекст (например, в setTimeout).2. Синтаксис и возможностиОбычные функции можно использовать как конструкторы (new), у них есть arguments:function sum() {
  console.log(arguments); // [1, 2, 3]
}
sum(1, 2, 3);Стрелочные функции не поддерживают new и arguments, но могут быть лаконичными:const add = (a, b) => a + b;3. Hoisting (поднятие)Обычные функции поднимаются вверх области видимости:sayHi(); // "Hello" (работает)
function sayHi() {
  console.log("Hello");
}Стрелочные функции нельзя вызвать до объявления:sayHi(); // Ошибка!
const sayHi = () => console.log("Hi");Когда что использовать?Стрелочные – для коротких колбэков, методов без своего this.Обычные – когда нужен this, конструкторы или arguments.Пример с setTimeout:// Обычная функция (this теряется)
button.addEventListener('click', function() {
  setTimeout(function() {
    console.log(this); // window (не button!)
  }, 1000);
});

// Стрелочная функция (сохраняет this)
button.addEventListener('click', function() {
  setTimeout(() => {
    console.log(this); // button (как у родителя)
  }, 1000);
});Итог: Выбор зависит от контекста, синтаксиса и требований к коду.