Синхронний VS асинхронний код

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

Коротко

Тип коду	Що робить
Синхронний (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 і черги завдань

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

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

Premium

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