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

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

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

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

Контент

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

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

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

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

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

## Що таке стрілкова функція

Стрілкова функція - це **скорочений синтаксис** для оголошення функцій у JavaScript.
Вона записується через стрілку `=>`.

### Приклад:

```javascript
// Звичайна функція
function add(a, b) {
  return a + b;
}

// Стрілкова функція
const add = (a, b) => a + b;
```

Робить те саме, але коротше і читається як:

> "прийми `a` і `b`, поверни їхню суму".

## Основні особливості

| Особливість | Опис |
| --- | --- |
| **Короткий синтаксис** | Не потрібні ключові слова `function`, `return` (якщо 1 вираз) і фігурні дужки. |
| **Не має власного** `this` | Успадковує `this` із зовнішньої області (лексично). |
| **Не має** `arguments` | Якщо потрібні аргументи - використовуй rest-параметри (`...args`). |
| **Не може бути конструктором** | Не можна викликати через `new`. |
| **Не має** `prototype` | Не підходить для створення класів або методів з прототипом. |

## 1. Синтаксис стрілкових функцій

### Класична коротка форма:

```javascript
const double = x => x * 2;
```

### Кілька параметрів:

```javascript
const add = (a, b) => a + b;
```

### Без параметрів:

```javascript
const sayHi = () => console.log("Hello!");
```

### Тіло з кількома рядками (потрібен `return`):

```javascript
const sum = (a, b) => {
  const result = a + b;
  return result;
};
```

### Повернення об'єкта:

Потрібно **обгорнути об'єкт у дужки**, інакше `{}` сприйметься як тіло функції.

```javascript
const createUser = (name, age) => ({ name, age });
```

## 2. Головна відмінність - поведінка `this`

Стрілкова функція **не має свого** `this`.
Вона **успадковує** `this` **із зовнішнього контексту**, в якому була створена.

### Приклад зі звичайною функцією:

```javascript
function Timer() {
  this.seconds = 0;
  setInterval(function () {
    this.seconds++; // 'this' вказує на window / undefined
  }, 1000);
}
```

### Приклад зі стрілковою:

```javascript
function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 'this' вказує на сам об'єкт Timer
  }, 1000);
}
```

Стрілка **"захоплює" контекст** зовнішньої функції, тому `this` працює очікувано.

## 3. Де стрілкові функції не підходять

1. У методах об'єктів:

```javascript
const user = {
  name: 'Alex',
  sayHi: () => console.log(`Hi, I'm ${this.name}`) // 'this' не вкаже на user!
};
user.sayHi(); // Hi, I'm undefined
```

2. У конструкторах:

```javascript
const User = (name) => { this.name = name; }; // Помилка
const u = new User('Tim'); // TypeError
```

3. Якщо потрібен `arguments`:

```javascript
const log = () => console.log(arguments); // ReferenceError
```

Використовуй rest:

```javascript
const log = (...args) => console.log(args);
```

## 4. Коли стрілкові функції ідеальні

- Колбеки (наприклад, у `map`, `filter`, `forEach`):

```javascript
  const doubled = [1, 2, 3].map(n => n * 2);
  ```
- Асинхронні ланцюжки (`then`, `catch`, `finally`):

```javascript
  fetch('/api')
    .then(res => res.json())
    .then(data => console.log(data));
  ```
- Вкладені функції, де потрібно зберегти `this`:

```javascript
  class User {
    constructor(name) {
      this.name = name;
    }
    greetLater() {
      setTimeout(() => console.log(`Hi, ${this.name}`), 1000);
    }
  }
  ```

## Коротке порівняння

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

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

Для рев’юера

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

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