Синхронность vs асинхронность и Event Loop

JavaScript однопоточный — он делает одно дело за раз. Тогда как он умудряется не зависать, пока грузится картинка или запрос идёт на сервер? Сегодня разберём магию Event Loop — один из самых важных концептов в JS.

🚶 Что такое синхронный код

Весь код, который вы писали раньше в этом курсе, был синхронным. Это значит: строки выполняются одна за другой, строго по порядку. Текущая строка должна полностью завершиться, прежде чем начнётся следующая.

console.log("Шаг 1");
console.log("Шаг 2");
console.log("Шаг 3");
// Вывод всегда: Шаг 1, Шаг 2, Шаг 3 — строго по порядку

Это предсказуемо и понятно. Но вот проблема — что если какая-то операция занимает долгое время? Например, вы хотите прочитать большой файл с диска, или отправить запрос на сервер и подождать ответ. В синхронном мире всё остальное заблокируется и будет ждать.

Псевдокод синхронного блокирующего кода выглядел бы так:

// Если бы fetch был синхронным (так НЕ работает в реальности!)
const data = fetchDataFromServer(); // ← всё висит здесь 3 секунды...
console.log("Страница снова работает"); // ← только потом

🍽️ Аналогия: официант в ресторане

Лучшая аналогия для понимания синхронного и асинхронного — работа официанта.

JavaScript работает как хороший официант. Когда он встречает долгую операцию (запрос к серверу, таймер, чтение файла), он не стоит и не ждёт — он говорит «хорошо, когда будет готово — скажи мне» и идёт дальше выполнять другой код. А когда операция завершается — JavaScript возвращается и обрабатывает результат.

🧵 JavaScript однопоточный — это важно

Многие языки решают проблему долгих операций с помощью многопоточности — они буквально запускают несколько потоков выполнения параллельно. Один поток грузит файл, другой поток рисует интерфейс, третий обрабатывает клики.

JavaScript так не работает. У него один поток выполнения. В каждый момент времени он делает ровно одно дело. Это было сознательное решение создателей языка — браузерный JS не должен был сталкиваться со сложными проблемами параллельности (race conditions, deadlocks и т.д.).

Это ключевое понимание! Когда вы делаете fetch(), браузер берёт эту задачу к себе (в свои Web APIs) и выполняет сетевой запрос самостоятельно. JavaScript при этом свободен и продолжает выполнять другой код. Когда браузер получил ответ — он уведомляет JavaScript через механизм Event Loop.

🔄 Event Loop: сердце асинхронности

Event Loop — это механизм, который координирует всё это волшебство. Чтобы понять его, нужно разобраться с несколькими компонентами.

🔍 Разбор на примере: setTimeout

Давайте по шагам разберём, что происходит с этим кодом:

console.log("1: начало");

setTimeout(function() {
  console.log("2: внутри таймера");
}, 0);

console.log("3: конец");

// Что выведет? Угадайте перед тем как читать дальше...

Результат:

1: начало
3: конец
2: внутри таймера

Удивительно? Таймер стоит 0 миллисекунд, но его колбэк выполнился последним! Вот что происходит по шагам:

🛠️ Зачем это знать на практике

Понимание Event Loop помогает избежать очень распространённых ошибок. Вот классический пример:

// Частая ошибка новичков
let result;

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => {
    result = data; // записываем результат
  });

console.log(result); // undefined! Почему?

Потому что fetch асинхронный. Пока идёт запрос, JavaScript дошёл до console.log(result) и выполнил его — а результат ещё не пришёл! Переменная result всё ещё undefined.

Правильный способ — работать с результатом внутри колбэка или использовать async/await (об этом в уроке 10.4):

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => {
    console.log(data); // ✅ здесь данные точно есть
    // вся работа с результатом — внутри .then()
  });

Также важно понимать: никогда не блокируйте Event Loop тяжёлыми синхронными операциями. Например, такой цикл заморозит страницу:

// Плохо! Замораживает браузер
for (let i = 0; i < 1000000000; i++) {
  // что-то тяжёлое
}
// За всё это время ни один клик, ни один таймер не обработается

🔬 Бонус: Microtask Queue (для любопытных)

На самом деле очередей две. Есть Callback Queue (или Macrotask Queue) — туда попадают setTimeout, setInterval, события DOM. И есть Microtask Queue — туда попадают промисы (.then()) и queueMicrotask().

Event Loop обрабатывает все микрозадачи перед тем, как взять следующую макрозадачу. Поэтому промисы выполняются быстрее таймеров:

console.log("1");

setTimeout(() => console.log("2: setTimeout"), 0);

Promise.resolve().then(() => console.log("3: Promise"));

console.log("4");

// Вывод:
// 1
// 4
// 3: Promise   ← микрозадача — раньше таймера!
// 2: setTimeout ← макрозадача — позже

✅ Итоги урока

• Синхронный код выполняется строка за строкой и блокирует всё остальное
• Асинхронный код позволяет запустить долгую операцию и не ждать — продолжать работу
• JavaScript однопоточный, но долгие операции выполняются браузером (Web APIs) отдельно
• Event Loop — цикл, который перекладывает завершённые колбэки из очереди в стек вызовов
• Порядок: Call Stack → Web APIs → Callback Queue → Event Loop → Call Stack
• setTimeout(fn, 0) НЕ значит «прямо сейчас» — колбэк выполнится только когда стек пустой
• Никогда не блокируйте Event Loop тяжёлыми синхронными вычислениями