Most Commonly Asked JavaScript Interview Questions: Understanding JavaScript's Event Loop, Promises, setTimeOut, Micro and Macro Task Queues

JavaScript’s event loop, Micro and Macro Task Queues, promises, and setTimeout are frequent topics in technical interviews. Mastering these concepts not only helps in interviews but also in writing efficient JavaScript code. Here, we'll explore some commonly asked interview questions and provide detailed explanations for each.

Check out my detailed YouTube video on this topic here. In this video, I explain JavaScript event loop, Micro and Macro Task Queues, promises, and setTimeout with additional examples and visuals.

Question No. 1

Code:

console.log("Start");

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

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

console.log("Middle");

Promise.resolve().then(() => {
    console.log("3: Promise");
});

Promise.resolve().then(() => {
    console.log("4: Promise");
});

console.log("End");        

Output:

Start
Middle
End
1: Promise
2: Promise
3: Promise
4: Promise        

Explanation:

• The synchronous code is executed first, so "Start", "Middle", and "End" are logged in order.
• Promises are microtasks, and they are executed after the current synchronous code completes. Therefore, "1: Promise", "2: Promise", "3: Promise", and "4: Promise" are logged in the order they were registered.

Question No. 2

Code:

console.log("Start");

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

Promise.resolve().then(() => {
    console.log("2: Promise");

    // Nested Promise
    Promise.resolve().then(() => {
        console.log("3: Promise");
    });
});

console.log("Middle");

Promise.resolve().then(() => {
    console.log("4: Promise");
});

console.log("End");        

Output:

Start
Middle
End
1: Promise
2: Promise
4: Promise
3: Promise        

Explanation:

• Synchronous code ("Start", "Middle", "End") runs first.
• Promises are then executed in the order they were registered: "1: Promise" and "2: Promise".
• "4: Promise" runs before the nested promise ("3: Promise") since the nested promise is registered in a microtask within another microtask.

Question No. 3

Code:

console.log("Start");

setTimeout(() => {
    console.log("1: setTimeout");
}, 100);

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

console.log("End");        

Output:

Start
End
2: setTimeout
1: setTimeout        

Explanation:

• Synchronous code runs first, logging "Start" and "End".
• setTimeout with 0 ms runs next, logging "2: setTimeout".
• setTimeout with 100 ms runs last, logging "1: setTimeout".

Question No. 4

Code:

console.log("Start");

setTimeout(() => {
    console.log("1: setTimeout");
}, 0);

setTimeout(() => {
    console.log("2: setTimeout");
    setTimeout(() => {
        console.log("3: setTimeout");
    }, 0);
}, 0);

console.log("Middle");

setTimeout(() => {
    console.log("4: setTimeout");
}, 0);

console.log("End");        

Output:

Start
Middle
End
1: setTimeout
2: setTimeout
4: setTimeout
3: setTimeout        

Explanation:

• Synchronous code runs first: "Start", "Middle", "End".
• setTimeout with 0 ms runs in the order they were registered: "1: setTimeout", "2: setTimeout", and "4: setTimeout".
• The nested setTimeout inside the second setTimeout runs last: "3: setTimeout".

Question No. 5

Code:

console.log("Start");

setTimeout(() => {
    console.log("Timeout 1");
}, 100);

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

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

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

setTimeout(() => {
    console.log("Timeout 3");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise 3");
});

console.log("End");        

Output:

Start
End
Promise 1
Promise 3
Promise 2
Timeout 3
Timeout 2
Timeout 1        

Explanation:

• Synchronous code runs first: "Start" and "End".
• Microtasks (promises) are executed next: "Promise 1", "Promise 3", "Promise 2".
• Macrotasks (setTimeout) are executed in the order they were registered: "Timeout 3", "Timeout 2", and "Timeout 1".

Understanding the event loop, Micro and Macro Task Queues, promises, and setTimeout is crucial for mastering JavaScript. These questions help clarify how JavaScript handles asynchronous operations and the order in which tasks are executed.