Interview question

What is the difference between macrotasks and microtasks in the event loop? Event loop में macrotasks और microtasks में क्या अंतर है?

Answer

Queue type	Examples	Priority
Microtask queue	Promise .then/.catch/.finally, queueMicrotask, MutationObserver	Higher - fully drained before next macrotask
Macrotask (task) queue	setTimeout, setInterval, setImmediate, I/O, UI rendering	Lower - one processed per event loop cycle

console.log('1: Sync');

setTimeout(() => console.log('2: Macrotask (setTimeout)'), 0);

Promise.resolve()
    .then(() => console.log('3: Microtask A'))
    .then(() => console.log('4: Microtask B'));

queueMicrotask(() => console.log('5: Microtask C'));

console.log('6: Sync');

// Output:
// 1: Sync
// 6: Sync
// 3: Microtask A
// 5: Microtask C
// 4: Microtask B
// 2: Macrotask (setTimeout)

// Explanation: all sync code first, THEN the entire microtask queue
// is drained (including newly added microtasks from within microtasks),
// and ONLY THEN does the event loop move to the next macrotask

Event loop cycle:
1. Run all synchronous code → 2. Drain ENTIRE microtask queue (even new ones added during draining) → 3. Process ONE macrotask → 4. Repeat from step 2

// A microtask that schedules more microtasks still runs before any macrotask
setTimeout(() => console.log('macrotask'), 0);
Promise.resolve().then(() => {
    console.log('microtask 1');
    Promise.resolve().then(() => console.log('microtask 2 (nested)'));
});
// Output: microtask 1, microtask 2 (nested), macrotask

Queue type	उदाहरण	Priority
Microtask queue	Promise .then, queueMicrotask	ज़्यादा - अगले macrotask से पहले पूरी drain होती है
Macrotask queue	setTimeout, setInterval, I/O	कम - एक cycle में एक process

console.log('1: Sync');

setTimeout(() => console.log('2: Macrotask'), 0);

Promise.resolve()
    .then(() => console.log('3: Microtask A'))
    .then(() => console.log('4: Microtask B'));

queueMicrotask(() => console.log('5: Microtask C'));

console.log('6: Sync');

// Output:
// 1: Sync
// 6: Sync
// 3: Microtask A
// 5: Microtask C
// 4: Microtask B
// 2: Macrotask

Event loop cycle:
1. सारा synchronous code → 2. पूरी microtask queue drain (नए भी) → 3. एक macrotask process → 4. फिर step 2 से

Was this answer clear?

Subjects

Related questions