Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Browser InternalsIntermediate

Event Loop

The event loop coordinates synchronous code, queued tasks, and microtasks so JavaScript can handle async behavior.

JavaScript runs one call stack at a time, but it can still handle asynchronous work by delegating tasks and later placing callbacks into queues. The event loop decides when queued tasks can run. Microtasks, such as resolved promise callbacks, are processed before the next macrotask like `setTimeout`.

Explanation

JavaScript runs one call stack at a time, but it can still handle asynchronous work by delegating tasks and later placing callbacks into queues. The event loop decides when queued tasks can run. Microtasks, such as resolved promise callbacks, are processed before the next macrotask like `setTimeout`.

Key Points

  • Synchronous code runs first on the call stack.
  • Promise callbacks are microtasks and run before timer callbacks.
  • Understanding task order is essential for debugging async output.

Common Mistakes

  • Expecting `setTimeout(..., 0)` to run immediately.
  • Ignoring the difference between microtasks and macrotasks.
  • Assuming async code always runs in the order it appears.

Practice Workspace

event-loop.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

6 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

event-loop.js
6 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

start
end
promise
timeout

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Hoisting

Hoisting describes how JavaScript processes declarations before executing code line by line.

Promise

Promises represent the eventual result of asynchronous operations and make async flows easier to compose.

Practice Challenges

Predict the event loop output

8 min

Read mixed synchronous, promise, and timer code and determine the true execution order.

Visual Learning

Open the guided event loop visualizer to see the call stack, microtasks, and macrotasks change step by step.

Open Visualizer