Listen to this Post
JavaScript’s event loop is fundamental to handling asynchronous operations efficiently. Here’s a breakdown of how it works, along with practical examples.
Single-Threaded Execution
JavaScript runs on a single thread, meaning it processes one task at a time. The call stack tracks function execution:
function greet() {
console.log("Hello");
}
greet(); // Added to call stack, executed, then removed
Web APIs & Asynchronous Operations
Browser-provided Web APIs handle async tasks (setTimeout, fetch, etc.):
setTimeout(() => console.log("Timeout"), 1000); // Pushed to Web API, then Callback Queue
Callback Queue vs. Microtasks Queue
- Callback Queue: Holds async callbacks (e.g.,
setTimeout). - Microtasks Queue: Higher priority, handles Promises and
MutationObserver.Promise.resolve().then(() => console.log("Microtask")); // Executed before Callback Queue
Event Loop Workflow
1. Check Call Stack: If empty, proceed.
2. Process Microtasks: Execute all microtasks first.
3. Render UI: Browser may update the DOM.
4. Process Callback Queue: Execute oldest task.
You Should Know: Practical Examples
1. Event Loop in Action
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");
// Output: Start → End → Promise → Timeout
2. Blocking the Event Loop
Avoid CPU-heavy tasks:
// BAD: Blocks the thread for (let i = 0; i < 1e9; i++);
3. Using `process.nextTick` (Node.js)
Higher priority than Promises:
process.nextTick(() => console.log("Next Tick"));
4. `setImmediate` vs `setTimeout`
setImmediate(() => console.log("Immediate")); // Check phase in Node.js
setTimeout(() => console.log("Timeout"), 0);
5. Async/Await and Microtasks
async function fetchData() {
const res = await fetch("https://api.example.com");
console.log(await res.json());
}
fetchData(); // Microtask queue handles `await`
What Undercode Say
The JavaScript Event Loop ensures non-blocking execution by offloading async operations. Prioritize microtasks for critical code, and avoid blocking the main thread. Mastering this model is key for performance optimization.
Prediction
As JavaScript evolves, we may see:
- More granular control over task scheduling (e.g., prioritization APIs).
- WebAssembly integration reducing the need for workarounds.
Expected Output
Start End Promise Timeout
For further reading:
IT/Security Reporter URL:
Reported By: Rajatgajbhiye Interviewer – Hackers Feeds
Extra Hub: Undercode MoN
Basic Verification: Pass ✅
