Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Стрілкові функції проти звичайних». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Синтаксис

### Звичайна функція:

```javascript
function sayHello(name) {
  return `Hello, ${name}!`;
}
```

### Стрілкова функція:

```javascript
const sayHello = (name) => `Hello, ${name}!`;
```

> Короткий синтаксис стрілок робить код коротшим і особливо зручний у колбеках (`map`, `filter`, `reduce` тощо).

---

## 2. Основні відмінності

| Особливість | `function` | `=>` (стрілкова функція) |
|---|---|---|
| `this` | Має свій `this` (залежить від контексту виклику) | **Не має власного** `this` - бере `this` із зовнішнього контексту |
| `arguments` | Є об'єкт `arguments` | Немає `arguments` |
| `new` **/ конструктор** | Можна використовувати з `new` | Не можна використовувати з `new` |
| `prototype` | Має | Не має |
| `return` | Потрібен явно (окрім короткого запису) | Можна писати без `return`, якщо однорядкова |
| **Підтримка** `super` **/** `this` **у класах** | Працює як зазвичай | Захоплює `this` батька (зручно для обробників) |

---

## Приклад 1. Різниця в `this`

### Звичайна функція

```javascript
const user = {
  name: 'Tim',
  sayHi: function() {
    console.log(this.name);
  }
};

user.sayHi(); // 'Tim'
```

> `this` всередині звичайної функції посилається на об'єкт, з якого вона викликана.

---

### Стрілкова функція

```javascript
const user = {
  name: 'Tim',
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi(); // undefined
```

> `this` у стрілкової функції не свій - вона бере `this` із **зовнішнього лексичного оточення**,
> а в цьому випадку це **глобальний контекст**, де `this.name` не визначено.

---

## Приклад 2. Використання `this` всередині методу з `setTimeout`

```javascript
const user = {
  name: 'Tim',
  sayHi: function() {
    setTimeout(function() {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHi(); // undefined (this вказує на window)
```

Виправлено за допомогою стрілкової функції:

```javascript
const user = {
  name: 'Tim',
  sayHi: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHi(); // 'Tim'
```

> Тут стрілкова функція **не створює власний** `this`,
> тому бере його з `sayHi()` - і це потрібний нам об'єкт `user`.

---

## Приклад 3. Не можна використовувати `new` зі стрілкою

```javascript
function User(name) {
  this.name = name;
}
const u1 = new User('Tim'); // працює

const ArrowUser = (name) => {
  this.name = name;
};
const u2 = new ArrowUser('Tim'); // TypeError: ArrowUser is not a constructor
```

> Стрілкові функції **не мають прототипу** і **не можуть бути конструкторами**.

---

## Приклад 4. Немає `arguments`

```javascript
function showArgs() {
  console.log(arguments);
}
showArgs(1, 2, 3); // [1, 2, 3]
```

```javascript
const showArgsArrow = () => {
  console.log(arguments);
};
showArgsArrow(1, 2, 3); // ReferenceError: arguments is not defined
```

Використовуй **rest-параметри** замість `arguments`:

```javascript
const showArgsArrow = (...args) => console.log(args);
showArgsArrow(1, 2, 3); // [1, 2, 3]
```

---

## Приклад 5. Короткий запис без `return` і `{}`

```javascript
const double = x => x * 2;
console.log(double(4)); // 8
```

> Якщо функція **однорядкова**, можна не писати `return` і фігурні дужки.

---

## Коли використовувати

| Сценарій | Що обрати |
|---|---|
| Методи об'єкта / класів (потрібен `this`) | `function` |
| Колбеки (`map`, `filter`, `reduce`, `forEach`) | `=>` |
| Обробники подій у класах React (щоб не втратити `this`) | `=>` |
| Конструктори, прототипи | `function` |
| Короткі утилітарні функції | `=>` |

---

## Коротко:

> `function` - універсальний інструмент із власним контекстом, може бути конструктором.
> `=>` - компактна форма, **без** `this`**,** `arguments` **і** `prototype`, ідеальна для вкладених функцій і колбеків.

---

## Швидкий підсумок у таблиці:

| Відмінність | `function` | `=>` (стрілкова) |
|---|---|---|
| Має свій `this` | Так | Ні |
| Можна викликати з `new` | Так | Ні |
| Має `arguments` | Так | Ні |
| Має `prototype` | Так | Ні |
| Можна використати як метод | Так | Лише без `this` |
| Зручна в колбеках | Середньо | Дуже |
| Короткий синтаксис | Ні | Так |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати636 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.