Event loop overview in Javascript - Deep Dive

Overview - Event loop overview

What is it?

The event loop is a mechanism in JavaScript that helps manage tasks and keeps the program running smoothly. It allows JavaScript to perform non-blocking operations by handling multiple tasks in a sequence without waiting for each to finish before starting the next. This means JavaScript can do things like respond to user clicks or load data from the internet without freezing the page. The event loop constantly checks if there are tasks to do and runs them one by one.

Why it matters

Without the event loop, JavaScript would have to wait for each task to finish before starting the next, making web pages slow and unresponsive. Imagine if a website froze every time it loaded an image or waited for a button click. The event loop solves this by letting JavaScript handle many things at once, making apps feel fast and smooth. This is why almost all modern web apps rely on the event loop to work well.

Where it fits

Before learning the event loop, you should understand basic JavaScript syntax, functions, and how asynchronous code works with callbacks or promises. After mastering the event loop, you can explore advanced topics like async/await, microtasks vs macrotasks, and concurrency models in JavaScript.

Mental Model

Core Idea

The event loop is a continuous cycle that checks for tasks to run and executes them one at a time, allowing JavaScript to handle many operations without stopping.

Think of it like...

Think of the event loop like a chef in a kitchen who keeps checking orders on a list. The chef picks one order, cooks it, then moves to the next. While waiting for something to bake (like a timer or network request), the chef can start other orders, so the kitchen never stops working.

┌───────────────────────────────┐
│          Event Loop            │
├───────────────┬───────────────┤
│ Check Task    │ Execute Task  │
│ Queue         │               │
├───────────────┴───────────────┤
│ Wait for new tasks or events  │
└───────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

JavaScript single-thread basics

Concept: JavaScript runs code one step at a time on a single thread.

JavaScript executes commands in order, one after another. This means it can only do one thing at a time. If a command takes a long time, everything else waits until it finishes.

Result

Code runs sequentially, and long tasks block others.

Understanding that JavaScript is single-threaded explains why blocking tasks freeze the app and why we need a way to handle multiple things smoothly.

2

Foundation

Introduction to asynchronous tasks

Concept: Some operations take time, so JavaScript uses callbacks to handle them without stopping everything.

When JavaScript starts a task like loading data from the internet, it doesn't wait for it to finish. Instead, it sets a callback function to run later when the data is ready, and continues running other code.

Result

JavaScript can start tasks and keep working without waiting.

Knowing asynchronous tasks lets us write programs that stay responsive, even when waiting for slow operations.

3

Intermediate

Task queues and callback execution

🤔Before reading on: do you think callbacks run immediately when their task finishes, or are they queued to run later? Commit to your answer.

Concept: Callbacks are placed in a queue and run only when JavaScript finishes current tasks.

When an asynchronous task completes, its callback is added to a queue called the 'task queue'. The event loop waits until the current code finishes, then takes the next callback from the queue and runs it.

Result

Callbacks never interrupt running code; they wait their turn.

Understanding the queue system explains why callbacks don't run instantly and why JavaScript stays predictable and orderly.

4

Intermediate

The event loop cycle explained

🤔Before reading on: do you think the event loop runs continuously or only when tasks finish? Commit to your answer.

Concept: The event loop constantly checks for new tasks and runs them one by one.

The event loop is a loop that keeps running forever. It looks at the call stack (where current code runs) and the task queue. If the call stack is empty, it takes the first task from the queue and runs it. Then it repeats.

Result

JavaScript can handle many tasks smoothly without blocking.

Knowing the event loop runs continuously helps understand how JavaScript manages multitasking on a single thread.

5

Intermediate

Microtasks vs macrotasks queues

🤔Before reading on: do you think all tasks are treated equally in the event loop? Commit to your answer.

Concept: JavaScript has two types of queues: microtasks (higher priority) and macrotasks (normal priority).

Microtasks include promises and mutation observers, while macrotasks include timers and I/O events. After running a task, the event loop runs all microtasks before moving to the next macrotask. This ordering affects when code runs.

Result

Promises run before timers even if timers finish first.

Understanding these queues explains subtle timing behaviors in JavaScript and helps write predictable async code.

6

Advanced

Event loop in browsers vs Node.js

🤔Before reading on: do you think the event loop works the same in browsers and Node.js? Commit to your answer.

Concept: Browsers and Node.js have similar event loops but differ in task handling and APIs.

Browsers handle UI rendering and user events alongside the event loop. Node.js has additional phases like timers, I/O callbacks, and check phases. These differences affect how asynchronous code behaves in each environment.

Result

Event loop behavior can vary depending on the environment.

Knowing environment differences prevents bugs when moving code between browser and server.

7

Expert

Hidden surprises in event loop timing

🤔Before reading on: do you think setTimeout with zero delay runs immediately after current code? Commit to your answer.

Concept: Even setTimeout with zero delay waits for the event loop to cycle, and microtasks always run first.

setTimeout(fn, 0) schedules fn as a macrotask, so it runs after all microtasks finish. This means promises resolve before zero-delay timers, which can surprise developers expecting immediate execution.

Result

Promise callbacks run before zero-delay timers, affecting code order.

Understanding this timing nuance helps avoid bugs and write precise async code.

Under the Hood

The event loop works by continuously checking the call stack and task queues. When the call stack is empty, it pulls the next task from the macrotask queue and runs it. After each macrotask, it runs all microtasks before moving on. This cycle repeats endlessly, allowing JavaScript to handle asynchronous events without blocking. Internally, the environment (browser or Node.js) manages these queues and triggers callbacks when events like timers or network responses complete.

Why designed this way?

JavaScript was designed as a single-threaded language to simplify programming and avoid complex issues like race conditions. The event loop was introduced to allow asynchronous behavior without multiple threads, keeping the language simple yet powerful. Alternatives like multi-threading were avoided to maintain compatibility and ease of use in browsers. This design balances simplicity with responsiveness.

┌───────────────┐       ┌───────────────┐
│ Call Stack   │◄──────│ Event Loop    │
│ (running    │       │ (checks queues)│
│ code)       │       └───────┬───────┘
└─────┬────────┘               │
      │                        │
      │                        ▼
┌─────▼────────┐       ┌───────────────┐
│ Microtask    │──────▶│ Execute       │
│ Queue        │       │ Microtasks    │
└──────────────┘       └───────────────┘
      ▲                        │
      │                        ▼
┌─────┴────────┐       ┌───────────────┐
│ Macrotask    │──────▶│ Execute       │
│ Queue        │       │ Macrotasks    │
└──────────────┘       └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does setTimeout(fn, 0) run the function immediately after current code? Commit yes or no.

Common Belief: setTimeout with zero delay runs the function immediately after the current code finishes.

Reality: setTimeout(fn, 0) schedules the function as a macrotask, which runs only after all current code and microtasks finish.

Why it matters: Assuming immediate execution can cause bugs where code runs in an unexpected order, breaking logic that depends on timing.

Quick: Do promises run in the same queue as setTimeout callbacks? Commit yes or no.

Common Belief: Promises and setTimeout callbacks run in the same task queue and have equal priority.

Reality: Promises run in the microtask queue, which has higher priority and runs before any macrotasks like setTimeout callbacks.

Why it matters: Misunderstanding this leads to confusion about when promise callbacks execute, causing timing bugs.

Quick: Is JavaScript multi-threaded because it handles many tasks? Commit yes or no.

Common Belief: JavaScript is multi-threaded because it can handle many tasks at once.

Reality: JavaScript is single-threaded; it handles tasks one at a time using the event loop to manage asynchronous operations without multiple threads.

Why it matters: Thinking JavaScript is multi-threaded can lead to incorrect assumptions about concurrency and data safety.

Quick: Does the event loop stop when there are no tasks? Commit yes or no.

Common Belief: The event loop stops running when there are no tasks to process.

Reality: The event loop runs continuously, waiting for new tasks or events to process at any time.

Why it matters: Believing the event loop stops can cause misunderstandings about how asynchronous events are handled and why some callbacks still run later.

Expert Zone

1

Microtasks can starve macrotasks if they keep adding more microtasks, causing delays in UI updates or timers.

2

The event loop phases in Node.js include timers, pending callbacks, idle/prepare, poll, check, and close callbacks, each with specific roles.

3

Certain browser APIs like requestAnimationFrame tie into the event loop to sync code execution with screen refresh rates.

When NOT to use

The event loop is not suitable for CPU-intensive tasks that block the single thread; in such cases, use Web Workers or Node.js worker threads to run code in parallel without freezing the main thread.

Production Patterns

In real-world apps, developers use the event loop to manage asynchronous data fetching, UI updates, and timers efficiently. Patterns like debouncing, throttling, and promise chaining rely on understanding the event loop to avoid race conditions and ensure smooth user experiences.

Connections

Operating System Scheduler

Both manage task execution order and timing, but at different levels (OS vs JavaScript runtime).

Understanding the OS scheduler helps grasp how the event loop fits into the bigger picture of multitasking and resource management.

Reactive Programming

Event loops enable reactive programming by handling streams of events asynchronously.

Knowing the event loop clarifies how reactive frameworks process events and update UI efficiently.

Human Attention Span

Event loop design aims to keep apps responsive within the limits of human attention and perception.

Recognizing this connection explains why responsiveness and smoothness are critical goals in event loop behavior.

Common Pitfalls

#1 Blocking the event loop with heavy computation.

Wrong approach:

function heavyTask() {
while(true) {}
}
heavyTask();

Correct approach:

function heavyTask() {
// Break task into smaller chunks or use Web Workers
}
setTimeout(heavyTask, 0);

Root cause:

Misunderstanding that long-running code blocks the single thread, freezing the app.

#2 Assuming setTimeout(fn, 0) runs immediately after current code.

Wrong approach:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

Correct approach:

console.log('Start');
Promise.resolve().then(() => console.log('Promise'));
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

Root cause:

Not knowing microtasks run before macrotasks, causing unexpected order.

#3 Ignoring microtask queue leading to UI update delays.

Wrong approach:

function updateUI() {
while(true) {
Promise.resolve().then(() => {});
}
}
updateUI();

Correct approach:

function updateUI() {
// Avoid infinite microtasks to let UI update
}
updateUI();

Root cause:

Not realizing microtasks can starve macrotasks and block rendering.

Key Takeaways

The event loop lets JavaScript handle many tasks smoothly on a single thread by running tasks one at a time from queues.

Asynchronous callbacks are queued and run only when the current code finishes, preventing blocking and freezing.

Microtasks have higher priority than macrotasks, affecting the order in which asynchronous code runs.

Browsers and Node.js implement the event loop differently, so understanding these differences is key for cross-environment coding.

Misunderstanding the event loop's timing can cause subtle bugs, so mastering it is essential for writing reliable JavaScript.

Practice

1. What is the main role of the JavaScript event loop?

easy

A. To manage execution of multiple tasks without stopping the program

B. To compile JavaScript code into machine code

C. To store variables and functions in memory

D. To style HTML elements dynamically

Solution

1. Step 1: Understand event loop purpose

   The event loop allows JavaScript to handle many tasks smoothly by managing task execution order.

2. Step 2: Compare options with event loop role

   Only To manage execution of multiple tasks without stopping the program describes managing multiple tasks without stopping, which matches the event loop's job.

3. Final Answer:

   To manage execution of multiple tasks without stopping the program -> Option A

4. Quick Check:

   Event loop = manages tasks smoothly [OK]

Hint: Event loop runs tasks one by one without freezing [OK]

Common Mistakes:

• Confusing event loop with code compilation
• Thinking event loop handles styling
• Believing event loop stores variables

2. Which of the following is the correct syntax to schedule a function to run after the current code using the event loop?

easy

A. setTimeout(myFunction, 0);

B. runLater(myFunction);

C. delay(myFunction, 0);

D. executeAfter(myFunction);

Solution

1. Step 1: Identify standard JavaScript function for scheduling

   setTimeout is the built-in function to schedule code after current execution.

2. Step 2: Check options for correct syntax

   Only setTimeout(myFunction, 0) is valid JavaScript syntax to schedule a function immediately after current code.

3. Final Answer:

   setTimeout(myFunction, 0); -> Option A

4. Quick Check:

   Use setTimeout(fn, 0) to schedule tasks [OK]

Hint: Remember setTimeout(fn, 0) delays after current code [OK]

Common Mistakes:

• Using non-existent functions like runLater or delay
• Omitting the delay argument in setTimeout
• Confusing setTimeout with synchronous calls

3. What will be the output of the following code?

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

medium

A. StartTimeoutEnd

B. StartEndTimeout

C. TimeoutStartEnd

D. EndStartTimeout

Solution

1. Step 1: Understand synchronous and asynchronous order

   console.log('Start') runs first, then setTimeout schedules 'Timeout' to run later, then console.log('End') runs immediately.

2. Step 2: Determine output order

   'Start' prints, then 'End' prints, then after current code finishes, 'Timeout' prints from the event loop.

3. Final Answer:

   Start
   End
   Timeout -> Option B

4. Quick Check:

   Sync logs first, then setTimeout logs [OK]

Hint: setTimeout runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Mixing order of synchronous logs
• Ignoring event loop delay

4. Identify the error in this code snippet related to the event loop:

setTimeout(() => {
  console.log('Hello');
}, '1000');

medium

A. setTimeout requires three arguments

B. Arrow functions cannot be used with setTimeout

C. Missing parentheses after console.log

D. The delay should be a number, not a string

Solution

1. Step 1: Check setTimeout delay argument type

   The delay argument must be a number, but here it is a string '1000'.

2. Step 2: Understand effect of wrong type

   Passing a string may cause unexpected behavior or be coerced, but best practice is to use a number.

3. Final Answer:

   The delay should be a number, not a string -> Option D

4. Quick Check:

   Delay must be number in setTimeout [OK]

Hint: Use number for delay in setTimeout, not string [OK]

Common Mistakes:

• Using string instead of number for delay
• Thinking arrow functions are invalid here
• Assuming setTimeout needs 3 arguments

5. You want to run two functions, first() and second(), so that second() runs only after first() finishes, but first() contains asynchronous code using setTimeout. How can you ensure second() runs after first() completes all its tasks?

hard

A. Use two separate setTimeout calls with the same delay

B. Call second() immediately after calling first()

C. Call second() inside the callback of setTimeout in first()

D. Use a loop to wait until first() finishes

Solution

1. Step 1: Understand asynchronous behavior of setTimeout

   setTimeout runs code later, so code after first() runs immediately without waiting.

2. Step 2: Ensure second() runs after first()'s async code

   To guarantee order, call second() inside the setTimeout callback in first(), so it runs after the async task.

3. Final Answer:

   Call second() inside the callback of setTimeout in first() -> Option C

4. Quick Check:

   Chain async calls inside callbacks to keep order [OK]

Hint: Put second() inside first()'s async callback [OK]

Common Mistakes:

• Calling second() immediately after first() ignoring async
• Using multiple setTimeouts with same delay expecting order
• Trying to block with loops instead of callbacks