Що таке асинхронність у JavaScript?

JavaScriptJunior~2 хв читання

Асинхронність у 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 (цикл подій).

Основний код виконується в стеку викликів (Call Stack).
Асинхронні операції (таймери, fetch, події і т.д.) - передаються у Web API (браузерний або Node.js API).
Коли операція завершена, колбек потрапляє в чергу задач (Callback Queue).
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	Зручний синтаксис для роботи з промісами

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.