Suggest an edit

Improve this article

Refine the answer for “What is the event loop?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The **event loop** is a **mechanism inside the JavaScript engine**
that manages code execution,
handles **asynchronous operations**,
and coordinates the interaction between the **Call Stack**
and the **task queues**.

It is the **event loop** that makes JavaScript **asynchronous and non-blocking**,
even though the language itself is **single-threaded**.

## In short

> The **event loop** is an "organizer" that decides
> **which task runs now** and **which one waits**,
> so the main thread does not get blocked.

## The main participants

To understand the event loop, you need to know three structures:

1. **Call Stack** - the call stack
(where the current code executes, e.g. functions and expressions).
2. **Task Queue / Callback Queue** - the queue of **macrotasks**
(timers, events, `setTimeout`, `setInterval`, `I/O`).
3. **Microtask Queue** - the queue of **microtasks**
(`Promise.then()`, `queueMicrotask()`, `process.nextTick()` in Node.js).
4. **Event Loop** - the "loop" that watches:
  - if the stack is empty → takes a task from the microtask queue;
  - if that is empty → takes a task from the macrotask queue.

## How the event loop works (step by step)

1. JS executes **synchronous code** (everything, top to bottom).
2. When an **asynchronous operation** is encountered,
it is sent off to the **external Web APIs** (e.g. a timer, fetch).
3. When the operation finishes, its callback goes into the **task queue**.
4. When the **Call Stack is empty**, the event loop takes a task from the queue
and puts it on the stack for execution.
5. After all **microtasks** are executed,
the event loop moves on to the next **macrotask**.

This happens **continuously**, in an "infinite loop".

## Visually

```javascript
┌────────────────────┐
│  Call Stack        │ ← runs the current code
└─────────▲──────────┘
          │
          │ (empty?)
          ▼
┌────────────────────┐
│ Microtask Queue    │ ← Promise, queueMicrotask
└─────────▲──────────┘
          │
          │ (empty?)
          ▼
┌────────────────────┐
│ Task Queue         │ ← setTimeout, setInterval, I/O
└─────────▲──────────┘
          │
          │
          ▼
The event loop checks the queues and moves tasks onto the stack
```

## Example with setTimeout and Promise

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

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

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

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

Output:

```javascript
1
4
3
2
```

Why?

1. Synchronous code runs first (`1`, `4`);
2. The promise (`.then`) goes into the **microtasks**;
3. `setTimeout` goes into the **macrotasks**;
4. The event loop runs **all the microtasks first (3)**,
then takes the **next macrotask (2)**.

## An example of the event loop "hanging"

```javascript
setTimeout(() => console.log('2'), 0);

while (true) {} // infinite loop
```

The event loop will never reach `setTimeout`,
because the stack **never frees up**.
Asynchronous tasks run **only when the stack is empty**.

## The difference between macrotasks and microtasks

| Task type | Examples | When it runs |
|---|---|---|
| **Microtasks** | `Promise.then`, `queueMicrotask` | Right after the current code and before the next macrotask |
| **Macrotasks** | `setTimeout`, `setInterval`, `fetch`, `I/O`, `DOM events` | After all microtasks |

In other words, microtasks have **higher priority**.

## In the browser vs in Node.js

| Environment | Event loop specifics |
|---|---|
| **Browser** | Web APIs provide timers, fetch, DOM events |
| **Node.js** | Has its own queues (phases): timers, I/O, check, close, nextTick, and so on |

But in both cases the idea is the same: **one thread, asynchrony through the event loop**.

## SUMMARY

| Component | Purpose |
|---|---|
| **Call Stack** | Runs the current code |
| **Web APIs** | Handle asynchronous operations |
| **Task Queue** | Holds macrotask callbacks |
| **Microtask Queue** | Holds promises and the microqueue |
| **Event Loop** | Moves ready tasks from the queues onto the stack |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts601 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.