Event Loops in Javascript

Learn about eventloop in javascript with practical examples and code snippets.

Basic Execution Order

Promise (microtask - higher priority) 4.

setTimeout (macrotask).

Code

console.log("1. Start");
setTimeout(() => {
  console.log("4. setTimeout");
}, 0);
Promise.resolve().then(() => {
  console.log("3. Promise");
});
console.log("2. End");

Microtasks vs Macrotasks

Output: Promise 1 Promise 2 Microtask setTimeout 1 setTimeout 2.

Code

console.log("Start");
setTimeout(() => console.log("setTimeout 1"), 0);
setTimeout(() => console.log("setTimeout 2"), 0);
Promise.resolve().then(() => console.log("Promise 1"));
Promise.resolve().then(() => console.log("Promise 2"));
queueMicrotask(() => console.log("Microtask"));
console.log("End");

Nested Promises

Output: Promise 1 Promise 2.

Code

Promise.resolve().then(() => {
  console.log("Promise 1");
  Promise.resolve().then(() => {
    console.log("Promise 2");
  });
});
console.log("Sync");

setTimeout(0) vs queueMicrotask

Code

console.log("1");
setTimeout(() => console.log("2"), 0);
queueMicrotask(() => console.log("3"));
Promise.resolve().then(() => console.log("4"));
console.log("5");

Blocking the Event Loop

Blocking operation Block for 2 seconds Output: (2 second delay) setTimeout setTimeout waits because call stack is blocked.

Code

console.log("Start");
setTimeout(() => {
  console.log("setTimeout");
}, 0);
let start = Date.now();
while (Date.now() - start < 2000) {
}
console.log("End");

Async/Await and Event Loop

Output: script start async1 start async2 Promise 1 script end async1 end Promise 2 setTimeout.

Code

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(() => {
  console.log("setTimeout");
}, 0);
async1();
new Promise(resolve => {
  console.log("Promise 1");
  resolve();
}).then(() => {
  console.log("Promise 2");
});
console.log("script end");

Understanding the Queue

All added to queue Executes in order: Task 1, Task 2, Task 3.

Code

function task1() {
  console.log("Task 1");
}
function task2() {
  console.log("Task 2");
}
function task3() {
  console.log("Task 3");
}
setTimeout(task1, 0);
setTimeout(task2, 0);
setTimeout(task3, 0);

Starvation Problem

recursiveMicrotask(); // Will block macrotasks Key Concepts 1.

Call Stack: LIFO (Last In First Out) 2.

Callback Queue: FIFO (First In First Out) 3.

Microtask Queue: Higher priority than callback queue 4.

Event Loop: Continuously checks call stack and queues Execution Flow: 1.

Execute all synchronous code 2.

Execute all microtasks (until queue is empty) 3.

Execute one macrotask 4.

Repeat Common Interview Questions Q: What is the output.

A: 1, 4, 3, 2 Q: How does JavaScript handle async operations.

A: Through event loop, which continuously checks: - Call stack (if empty) - Microtask queue (execute all) - Macrotask queue (execute one) - Repeat Q: What's the difference between microtasks and macrotasks.

A: Microtasks (Promises, queueMicrotask) have higher priority and execute before macrotasks (setTimeout, setInterval).

Code

function recursiveMicrotask() {
  Promise.resolve().then(() => {
    console.log("Microtask");
    recursiveMicrotask(); // Infinite microtasks
  });
}
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");

---

Summary

Understanding eventloop is essential for mastering javascript. Practice these examples and experiment with variations to deepen your understanding.

Key Takeaways

• eventloop is a fundamental concept in javascript
• Practice with these examples to build confidence
• Experiment with variations to explore edge cases
• Understanding eventloop will help you in technical interviews