У чому різниця між function і arrow function?

Повне пояснення

Що це і навіщо

• function – традиційний спосіб оголошення функції, підтримує hoisting і власне this.
• Arrow function – компактний синтаксис, захоплює зовнішнє this, не створює власного контексту, підходить для колбеків і лямбда-операцій.

Ключові принципи/терміни

• this binding: у функції – динамічний, у arrow – лексичний.
• Hoisting: function hoisted; arrow не hoisted, треба оголосити перед використанням.
• Параметри: arrow може опускати круглі дужки при одному параметрі.

Як це працює

• При виклику function створюється новий контекст виконання, що включає власне this.
• Arrow function просто копіює значення this з оточуючого блоку, тому не створює новий контекст.

Практика і реалізація

• У React‑компонентах класові методи часто переписують на arrow, щоб уникнути bind(this).
• У Redux‑middleware або async/await колбеках arrow забезпечує чистий синтаксис.

Тестування

• При Jest можна перевірити поведінку this:

test('function this', () => {
  function f(){ return this.x; }
  const obj = {x:1, f};
  expect(obj.f()).toBe(1);
});

test('arrow this', () => {
  const f = () => this.x;
  const obj = {x:1, f};
  expect(obj.f()).toBeUndefined(); // arrow не береться
});

Оптимізація, типові помилки та edge cases

• Не використовувати arrow для конструктора (new), бо this не буде прив’язаний.
• У випадку колбеків, що потребують this, залишайте звичайну функцію.
• Перевіряйте hoisting: оголошення arrow після виклику призведе до ReferenceError.

Часті помилки

1. Виклик arrow як конструктора → TypeError.
2. Очікування hoisting для arrow → ReferenceError.
3. Неправильне використання this у колбеку → undefined.
4. Забудьте про круглі дужки при одному параметрі, що може спричинити синтаксичну помилку.

Cheatsheet

• function foo(){} – hoisted, own this.
• const foo = () => {} – не hoisted, лексичний this.
• const foo = (a,b)=>a+b – короткий синтаксис.

Follow‑up питання

• Як arrow function працює з arguments?
• Чому arrow не можна використовувати як метод у класі, якщо потрібен this?