Async foundations: event loop, call stack and queues

Understand why asynchronous code runs in a specific order so you can avoid timing bugs in UI, promises and timers.

📘 Theory

A minimal mental model

The stack executes, queues wait and the loop coordinates.

The call stack contains the functions executing right now.
The task queue holds callbacks from timers, events and similar sources.
The microtask queue holds promise reactions and `queueMicrotask()` callbacks.
The event loop decides when queued work can move back onto the stack.

Common mistakes caused by the wrong mental model

The classic bug is expecting synchronous order where none exists.

`setTimeout(..., 0)` does not mean immediate execution. It only means the callback becomes eligible for the task queue after the current synchronous work ends.

Resolved promises go to the microtask queue, which is processed before the next regular task from timers.

A practical pattern for async flows

Separate start, asynchronous work and closure clearly.

In real code, asynchronous readability improves when you make the phases visible: start state, async operation, success or error, final cleanup.

That structure becomes even more important in forms, fetch requests and interface loading states.

1 A minimal mental model 2 Common mistakes caused by the wrong mental model 3 A practical pattern for async flows

🧭 Key visuals

Async flow and the event loop

It clarifies why synchronous code, promises and timers appear in the order they do.

Diagram of the call stack, task queue and microtask queue coordinated by the event loop

🧪 Learn by doing

Example Guided example: predict the order Identify what executes first among synchronous code, a promise and a timer.

⌄

🏁 Challenges

Challenge Challenge: add an explicit microtask Use `queueMicrotask()` to reinforce the difference between microtasks and regular tasks.

⌄

🧰 Resources

Useful links

MDN: Event loop javascript.info: Event loop

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 33

Detect the user's language and redirect to the right version

Lesson 35

Promises in JavaScript: clean chaining and error handling

›