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

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

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

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

Контент

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

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

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

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

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

**Асинхронність у JavaScript** - це механізм, який дозволяє **виконувати задачі без блокування основного потоку (main thread)**.
Простіше кажучи, JavaScript може **не чекати завершення довгих операцій** (наприклад, запитів до сервера, читання файлів або таймерів),
а **продовжувати виконувати решту коду**, і обробити результат **пізніше**, коли він буде готовий.

---

## Коротко

JavaScript - **однопотокова** мова (виконує код послідовно, по одній задачі за раз).
Асинхронність потрібна, щоб не "заморожувати" сторінку під час довгих операцій.

---

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

```javascript
console.log('1');
alert('Очікуємо...'); // Блокує виконання
console.log('2');
```

Тут, поки користувач не закриє `alert`, програма **зупинена** - це **синхронний код**.

---

## Приклад з асинхронністю

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

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

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

Вивід:

```javascript
1
3
2
```

Тому що `setTimeout` - асинхронна операція:
вона "ставиться в чергу" і виконується **після** основного коду, через 1 секунду.

---

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

Асинхронність у JS реалізована через **Event Loop (цикл подій)**.

1. Основний код виконується **в стеку викликів (Call Stack)**.
2. Асинхронні операції (таймери, fetch, події і т.д.) - передаються у **Web API** (браузерний або Node.js API).
3. Коли операція завершена, колбек потрапляє в **чергу задач (Callback Queue)**.
4. Event Loop перевіряє, чи вільний стек, і якщо так - бере задачу з черги і виконує.

Таким чином, асинхронність - це не "паралельність",
а механізм планування задач.

---

## Основні способи роботи з асинхронністю

| Підхід | Приклад | Особливості |
|---|---|---|
| **Callbacks (колбеки)** | `setTimeout(() => {...}, 1000)` | Старий, незручний (callback hell) |
| **Promises (проміси)** | `fetch(...).then(...)` | Сучасніше, зрозуміліше |
| **async / await** | `const data = await fetch(...)` | Найзручніший синтаксис |

---

## Приклад з Promise

```javascript
fetch('https://api.example.com/user')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
```

`fetch` повертає **Promise** - обіцянку,
що результат буде отримано **в майбутньому**,
і його можна обробити за допомогою `.then()`.

---

## Приклад з async / await

```javascript
async function loadUser() {
  try {
    const res = await fetch('https://api.example.com/user');
    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

loadUser();
```

`await` "зупиняє" виконання всередині функції,
поки проміс не виконається - але **не блокує потік**.
Асинхронність зберігається.

---

## Типові асинхронні операції в JS

- `setTimeout`, `setInterval`
- `fetch()` (мережеві запити)
- Робота з файлами в Node.js (`fs.promises`)
- Події (`addEventListener`)
- WebSocket, IndexedDB, Web Workers і т.д.

---

## ПІДСУМОК

| Термін | Що означає |
|---|---|
| **Асинхронність** | Виконання задач "у фоні" без блокування основного потоку |
| **Event Loop** | Механізм, що керує чергою задач |
| **Callback Queue** | Черга готових до виконання задач |
| **Promise** | Об'єкт, що представляє результат асинхронної операції |
| **async / await** | Зручний синтаксис для роботи з промісами |

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

Для рев’юера

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

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