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

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

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

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

Контент

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

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

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

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

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

Стрілкові функції (`=>`) - зручний синтаксис, але **вони не завжди підходять**. Є ситуації, де **потрібно використовувати звичайні** `function`, інакше код буде працювати неправильно або неочевидно.

---

## 1. Коли потрібен власний `this`

Стрілкові функції **не мають власного** `this` - вони **успадковують його із зовнішнього контексту**.
Тому **в методах об'єктів** вони часто поводяться несподівано.

### Погано:

```javascript
const user = {
  name: 'Тим',
  sayHi: () => {
    console.log(`Привіт, ${this.name}`); // this = undefined
  }
};

user.sayHi(); // "Привіт, undefined"
```

### Добре:

```javascript
const user = {
  name: 'Тим',
  sayHi() {
    console.log(`Привіт, ${this.name}`);
  }
};

user.sayHi(); // "Привіт, Тим"
```

---

## 2. Коли функція має бути **конструктором**

Стрілкові функції не можна викликати через `new` - у них **немає внутрішнього** `[[Construct]]`.

### Помилка:

```javascript
const Person = (name) => {
  this.name = name;
};
const p = new Person('Тим'); // TypeError: Person is not a constructor
```

### Правильно:

```javascript
function Person(name) {
  this.name = name;
}
const p = new Person('Тим');
```

---

## 3. Коли потрібен об'єкт `arguments`

Стрілкові функції не мають власного `arguments`.

### Помилка:

```javascript
const sum = () => {
  console.log(arguments); // ReferenceError
};
sum(1, 2, 3);
```

### Правильно:

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

(Або використовувати rest-параметри: `(...args) => {}`)

---

## 4. Коли функція використовується як **обробник події** (`addEventListener`)

Іноді потрібно, щоб `this` посилався на сам елемент, який викликав подію.

### Не спрацює:

```javascript
button.addEventListener('click', () => {
  this.classList.add('active'); // this = window або undefined
});
```

### Правильно:

```javascript
button.addEventListener('click', function() {
  this.classList.add('active'); // this = сам button
});
```

---

## 5. Коли потрібна **динамічна прив'язка** `this` (`call`, `apply`, `bind`)

Стрілкові функції ігнорують методи на кшталт `.call()` і `.bind()`.

### Не спрацює:

```javascript
const greet = () => console.log(this.name);
greet.call({ name: 'Тим' }); // undefined
```

### Робочий варіант:

```javascript
function greet() {
  console.log(this.name);
}
greet.call({ name: 'Тим' }); // Тим
```

---

## 6. Коли читабельність важливіша за стислість

Якщо функція складна, довга або містить багато логіки - стрілкова може погіршити читабельність.
Краще використовувати звичайну `function` із зрозумілим тілом і іменем.

---

## Підсумок - **не використовувати стрілкові функції, якщо:**

| Ситуація | Чому |
|---|---|
| Потрібен свій `this` | У стрілкових його немає |
| Потрібен `arguments` | У стрілкових його немає |
| Функція має бути конструктором (`new`) | У стрілкових немає `[[Construct]]` |
| Використовується як обробник DOM-події | Втратиться `this` |
| Потрібна динамічна прив'язка (`call`, `apply`, `bind`) | Ігнорується |
| Функція велика і складна | Втрачається читабельність |

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

Для рев’юера

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

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