JavaScript Event Loop

Key Components

1. Call Stack

• Tracks function calls
• LIFO (Last In, First Out) structure
• Single-threaded execution

2. Web APIs

• Browser-provided APIs (setTimeout, DOM events, HTTP requests)
• Not part of JavaScript engine
• Handle asynchronous operations

3. Callback Queue (Task Queue)

• Holds completed async operation callbacks
• FIFO (First In, First Out) structure

4. Event Loop

• Continuously checks if call stack is empty
• Moves callbacks from queue to call stack

How It Works

console.log('1');

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

console.log('3');

// Output: 1, 3, 2

Microtasks vs Macrotasks

Microtasks (Higher Priority)

• Promises (.then(), .catch(), .finally())
• queueMicrotask()
• MutationObserver

Macrotasks (Lower Priority)

• setTimeout(), setInterval()
• I/O operations
• UI rendering

Best Practices

• Avoid blocking operations in main thread
• Use Web Workers for CPU-intensive tasks
• Understand Promise chains and async/await