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

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);
});

Итог: Выбор зависит от контекста, синтаксиса и требований к коду.