The Most Common JavaScript Event Loop Interview Questions
January 25, 2023
The event loop is a common question in interviews. In addition to knowing the concept, You also need to know how it works in code. Here we have listed common JavaScript event loop code interpretation questions.
Basic Questions
What will be printed after executing the code?
console.log(1);
setTimeout(function () {
console.log(2);
}, 0);
Promise.resolve()
.then(function () {
console.log(3);
})
.then(function () {
console.log(4);
});
After reading the above code, what do you think will be printed?
The answer is below, let's analyze it together.
setTimeout is set to 0 milliseconds, but why is the thing in Promise executed first? The reason is that Promise will enter the microtask queue, and setTimeout will be queued in the macrotasks.
In an event loop, only one macrotask is executed at a time, so after console.log(1), it will first look at the microtask queue, and continuously extract it to the execution stack until the microtask queue is empty, so here it will first execute Promise, and then setTimeout.
1;
3;
4;
2;
Intermediate Questions
What will be printed after executing the code?
console.log("begins");
setTimeout(() => {
console.log("setTimeout 1");
Promise.resolve().then(() => {
console.log("promise 1");
});
}, 0);
new Promise(function (resolve, reject) {
console.log("promise 2");
setTimeout(function () {
console.log("setTimeout 2");
resolve("resolve 1");
}, 0);
}).then((res) => {
console.log("dot then 1");
setTimeout(() => {
console.log(res);
}, 0);
});
After reading the above code, what do you think will be printed out after executing the code?
The answer is as follows, let us analyze it together.
After the program code is executed, the program will be executed in order, so begin will be printed first. Then, the setTimeout will be placed in the macrotask queue.
That is why new Promise will be executed first. It will print out promise 2, and then the setTimeout within the promise will be put into the macrotask queue.
Now, the main thread is empty again, so the event loop will check the macrotask queue, execute the first setTimeout in the queue, then print setTimeout 1, and then put the Promise.resolve() within it to the microtasks queue.
Because the macrotask will only execute the first item each time, we turn to the microtask queue, then we will find that there is a Promise.resolve(), so promise 1 will be printed. Now, the microtasks queue is empty, so go back and look at the macrotasks queue.
In the macrotasks queue, there is a setTimeout, so it prints setTimeout 2. Then since resolve is called here, it enters .then and prints out dot then 1. And setTimeout will be put in the macrotask queue, because the microtask queue is empty now, setTimeout in the macrotask queue will be put on the execution stack, and then print console.log(res). The value of resolve is resolve 1, so resolve 1 is printed at the end.
"begins";
"promise 2";
"setTimeout 1";
"promise 1";
"setTimeout 2";
"dot then 1";
"resolve 1";
Advanced Questions
What will be printed after executing the 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(function () {
console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log("script end");
What do you think will be printed in this question?
The difference from the previous question is that this question has async syntax. The answer is below, and we will analyze it line by line.
When the program is executed, it will first print script start, then setTimeout will be put into the macrotask queue, then call the async1 function, print async1 start, and then call await async2 () so async2 will be printed.
await will put things into the microtasks queue, so instead of printing async1 end immediately it will be put into the microtasks queue first.
Then the program continues to execute. When encountering new Promise, it first prints the promise 1 inside, then calls resolve, and puts .then into the microtasks queue. Program execution continues, printing script end.
Now, the execution stack is empty, so it will check the microtasks queue and print async1 end first. Since the microtasks queue will be executed all the way until there is nothing, the event loop will continue to check the microtasks queue. Then it finds that there is a resolve in it , so print promise2. At this time, the queue of microtasks is empty, it goes to the queue of macrotasks. There is a setTimeout in the macrotasks queue, so it is printed out.
"script start";
"async1 start";
"async2";
"promise1";
"script end";
"async1 end";
"promise2";
"setTimeout";