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

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

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

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

Контент

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

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

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

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

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

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

Простіше кажучи:

> "Я передаю тобі функцію - виклич її, коли будеш готовий."

---

## Найпростіший приклад

```javascript
function sayHello(name) {
  console.log(`Привіт, ${name}!`);
}

function greet(callback) {
  console.log('Готуюся привітатися...');
  callback('Тім');
}

greet(sayHello);
```

**Що відбувається:**

1. `sayHello` - це **callback**, переданий у `greet`;
2. `greet` викликає його всередині себе;
3. У консоль виводиться:

```javascript
  Готуюся привітатися...
  Привіт, Тім!
  ```

---

## Callback в анонімній формі

Не обов'язково передавати іменовану функцію - можна передати анонімну:

```javascript
setTimeout(() => {
  console.log('Минуло 2 секунди');
}, 2000);
```

Тут:

- `() => console.log(...)` - **callback-функція**,
- Вона буде викликана **через 2 секунди** - не одразу.

---

## Як це працює

- JavaScript приймає callback як **значення** (адже функції - "об'єкти першого класу");
- Він **не викликає її одразу**, а **зберігає для подальшого виклику**;
- Коли настає потрібний момент (таймер спрацював, запит завершився, подія сталася) - рушій **викликає цю функцію**.

---

## Приклади в реальних ситуаціях

### 1. Колбек в обробнику подій

```javascript
button.addEventListener('click', () => {
  console.log('Кнопку натиснуто!');
});
```

Тут callback викликається браузером при кліку.

---

### 2. Колбек при завантаженні даних

```javascript
fetch('/user')
  .then(response => response.json())
  .then(data => console.log(data));
```

Колбеки `.then()` викликаються **після** завершення асинхронного запиту.

---

### 3. Колбек як крок в алгоритмі

```javascript
function calculate(a, b, callback) {
  const result = a + b;
  callback(result);
}

calculate(2, 3, (sum) => {
  console.log('Результат:', sum);
});
```

---

## Проблема: "Callback Hell"

Якщо колбеків забагато, код стає **вкладеним і нечитабельним**:

```javascript
getUser(id, user => {
  getPosts(user, posts => {
    getComments(posts, comments => {
      console.log('Готово!');
    });
  });
});
```

Це називають **callback hell** - "пекло з колбеків".

---

## Рішення проблеми

Щоб уникнути "пекельних вкладень", з'явилися:

- **Проміси (Promise)**:

```javascript
  getUser(id)
    .then(getPosts)
    .then(getComments)
    .then(console.log);
  ```
- `async/await`:

```javascript
  const user = await getUser(id);
  const posts = await getPosts(user);
  const comments = await getComments(posts);
  console.log('Готово!');
  ```

---

## Проста аналогія

> Уяви, ти замовляєш піцу.
> Ти кажеш: "Коли приготуєте - зателефонуйте мені."
>
> Цей "дзвінок" - і є **callback**.

---

## ПІДСУМОК

| Термін | Опис |
|---|---|
| **Callback-функція** | Функція, передана в іншу функцію для виконання пізніше |
| **Коли викликається** | Після події, завершення операції або за умовою |
| **Приклади використання** | `setTimeout`, `addEventListener`, `fetch().then()` |
| **Проблема** | Глибока вкладеність ("callback hell") |
| **Сучасні альтернативи** | `Promise`, `async/await` |

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

Для рев’юера

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

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