Розкажіть про стрілкові функції (arrow function). В чому полягають відмінності стрілкових функцій від звичайних?

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

Що це і навіщо Arrow function (стрілкова функція) — коротка форма оголошення функцій у JavaScript/TypeScript, що забезпечує лексичне this і не створює власного контексту виконання. Використовується переважно в колбеках, реактивних підписах та однострочних обчисленнях.

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

• Лексичне this: значення береться з оточуючого блоку.
• Немає власного arguments, super, new.target.
• Підтримує implicit return для однострочних виразів.

Як це працює При створенні arrow function компілятор генерує функцію, яка захоплює this з зовнішнього контексту. Це означає, що внутрішня функція не змінює this, навіть якщо викликається як метод.

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

// Класичний функціональний колбек
setTimeout(function(){ console.log(this); }, 1000);
// Arrow function з лексичним this
setTimeout(()=>{ console.log(this); }, 1000);

У React‑компонентах часто пишуть:

const handleClick = () => setCount(c=>c+1);

Тестування

import { describe, it, expect } from 'vitest';
describe('arrow function', () => {
  it('should preserve this', () => {
    const obj = { val: 42, getVal: () => this.val };
    expect(obj.getVal()).toBe(42);
  });
});

Особливості в контексті JS / TS Core

• Підтримка у всіх сучасних браузерах і Node.js.
• У TypeScript типи визначаються автоматично, але можна явно вказати: (a:number,b:number)=>number.

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

• Не використовуйте arrow function для конструктора, бо new не працює.
• У циклі forEach arrow function зберігає зовнішнє this, що може бути корисним, але іноді треба явно прив’язати контекст.

Диагностика і отладка

• Якщо this не відповідає очікуваному, перевірте чи використовується arrow function.
• Для колбеків у бібліотеках, що очікують this, використовуйте звичайну функцію або .bind(this).

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

1. Використання arrow function як конструктора.
2. Очікування arguments у arrow function.
3. Неправильне розуміння лексичного this у вкладених функціях.
4. Забудова implicit return при використанні блоку {}.
5. Перетворення arrow function у метод класу без bind.
6. Втрата контексту при передачі колбеку в сторонні API, що очікують this.
7. Неправильне використання arrow function у setTimeout з параметром this.
8. Змішування arrow function і new.target у модульних функціях.