Intermediate level · Module 2: Asynchronous JavaScript · Lesson 1 of 3

The Event Loop

Understand how JavaScript runs asynchronous code on one thread with a call stack, task queue and microtask queue.

In this lesson you will

Explain the call stack, task queue and microtask queue
Predict the output order of synchronous and asynchronous code

Key concepts

single-threadedcall stacktask queue (setTimeout)microtask queue (promises)

The lesson

JavaScript runs one piece of code at a time on a single thread. Long-running work, such as waiting for a server, does not block it: the browser or Node.js does the waiting and queues a callback to run later.

The event loop runs all synchronous code first. Then it runs every waiting microtask — promise callbacks and code after await — before taking the next task, such as a setTimeout callback, from the task queue.

So setTimeout(fn, 0) does not run immediately: it runs after the current script and after all pending promise callbacks. Predicting such orders is the best way to check your understanding.

Step by step

Run a script mixing console.log, setTimeout and a promise.
Predict the output order before running it.
Add an async function with await and predict again.
Explain each line's position using the event loop.

Code example

In which order does this print?

Synchronous code, an async function, a promise and a timer — and the order the event loop runs them in.

JavaScriptevent-loop.js

console.log("1. Start"); setTimeout(() => console.log("6. Timeout callback"), 0); Promise.resolve().then(() => console.log("4. Promise callback")); (async () => {  console.log("2. Inside async function, before await");  await null;  console.log("5. After await");})(); console.log("3. End of script");

Output

1. Start
2. Inside async function, before await
3. End of script
4. Promise callback
5. After await
6. Timeout callback

How it works

All synchronous code runs first: line 1, the start of the async function up to its first await, and line 3. Then the microtask queue is emptied in order: the promise callback, then the rest of the async function after await. Only then does the event loop take the next task, the setTimeout callback — even though its delay is 0. Output produced by running the code with Node.js; browsers give the same order.

Key concepts

call stackmicrotasks (promises, await)tasks (setTimeout)async functions run synchronously until the first await

Practice activity

Predict and then verify the output order of three provided asynchronous scripts, explaining each difference.

Expected result: Correct predictions with explanations referring to the call stack, microtasks and tasks.

Check your understanding

Which runs first: a resolved promise's then callback or a setTimeout(…, 0) callback?

Show answer
The promise callback (microtask) runs first.
Does a long synchronous loop block the page?

Show answer
Yes; nothing else runs until it finishes.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.