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

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

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

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

Контент

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

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

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

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

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

## Коротко

| Тип коду | Що робить |
|---|---|
| **Синхронний (synchronous)** | Виконує операції **строго по порядку**, одна за одною. Наступний рядок не почнеться, поки не завершиться попередній. |
| **Асинхронний (asynchronous)** | Дозволяє **продовжувати виконання** програми, не чекаючи завершення довгих операцій (мережевих запитів, таймерів тощо). |

---

## Приклад синхронного коду

```javascript
console.log('1');
console.log('2');
console.log('3');
```

Вивід:

```javascript
1
2
3
```

Все виконується **порядково**,
наступна команда не почнеться, поки не завершиться попередня.
Це - **синхронне виконання**.

---

## Приклад асинхронного коду

```javascript
console.log('1');

setTimeout(() => {
  console.log('2'); // виконається пізніше
}, 1000);

console.log('3');
```

Вивід:

```javascript
1
3
2
```

Чому?

- `setTimeout` - **асинхронна** операція: вона планується на майбутнє.
- JavaScript не чекає її завершення - він іде далі.
- Коли таймер спрацює, функція потрапить у **чергу подій (event queue)**
і виконається пізніше, коли стек викликів звільниться.

---

## Як це працює під капотом

JS має **один потік (single thread)**,
але завдяки **Event Loop** (циклу подій)
може працювати **асинхронно і неблокуюче**.

### Синхронно:

- Все йде підряд.
- Поки одна операція виконується - інші **чекають**.

### Асинхронно:

- Довгі операції (наприклад, `fetch`, `setTimeout`, `I/O`)
передаються у зовнішні API.
- JS продовжує виконувати решту коду.
- Коли операція завершена - результат повертається в **чергу колбеків**,
і виконується пізніше.

---

## Візуально

### Синхронний:

```javascript
[ Задача 1 ] → [ Задача 2 ] → [ Задача 3 ]
```

### Асинхронний:

```javascript
[ Задача 1 (асинхронна) ] → [ Задача 2 ]
        ↓
   (результат повернеться пізніше)
```

---

## Реальні приклади

| Ситуація | Синхронний код | Асинхронний код |
|---|---|---|
| Читання файлу | JS чекає, поки файл повністю прочитається | JS передає завдання API і продовжує роботу |
| Запит на сервер | Код "заморожується" до відповіді | Код іде далі, відповідь обробляється пізніше |
| Цикл із мільйоном ітерацій | "Підвішує" інтерфейс | Виконується у фоні (через Web Worker або асинхронно) |

---

## Асинхронність у JavaScript реалізується через:

| Механізм | Приклад |
|---|---|
| **Callbacks (колбеки)** | `setTimeout(() => {...}, 1000)` |
| **Promises** | `fetch('/data').then(...)` |
| **async / await** | `const data = await fetch('/data')` |
| **Event listeners** | `button.addEventListener('click', ...)` |

---

## Приклад з fetch (реальна асинхронність)

```javascript
console.log('Початок');

fetch('https://api.example.com/user')
  .then(res => res.json())
  .then(data => console.log('Відповідь отримано:', data));

console.log('Кінець');
```

Вивід:

```javascript
Початок
Кінець
Відповідь отримано: {...}
```

Поки сервер відповідає - JavaScript **не чекає**,
а йде далі і повертається до колбека, коли дані готові.

---

## ПІДСУМОК

| Відмінність | **Синхронний код** | **Асинхронний код** |
|---|---|---|
| Виконання | Послідовно, блокуюче | Паралельно (через події), неблокуюче |
| Затримки | Блокують програму | Не заважають виконанню |
| Використовується для | Простих і коротких операцій | Запитів, таймерів, файлів, API |
| Приклад | `console.log()` | `setTimeout()`, `fetch()` |
| Механізм | Стек викликів | Event Loop і черги завдань |

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

Для рев’юера

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

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