This content originally appeared on DEV Community and was authored by Er. Bhupendra Kumar
JAVASCRIPT INTERVIEW QUESTION
It looks like you're exploring the order of execution in JavaScript,
specifically with regards to setTimeout,
Promise.resolve, and synchronous code.
`setTimeout(()=>{
console.log('Timeout')
},0)
Promise.resolve().then(()=>
console.log('promise')
)
console.log('end');`
Here's what happens:
setTimeout is called with a timeout of 0, which means the callback will be executed as soon as possible,
but not immediately. It's added to the macrotask queue.
Promise.resolve() creates a resolved promise, and the then method is called with a callback.
This callback is added to the microtask queue.
console.log('end') is executed immediately, as it's a synchronous statement.
The order of execution is:
1. end
2. promise (microtask queue is executed before the next macrotask)
3. Timeout (macrotask queue is executed)
/////////////////////////////////////////////////////////////////////////////////////////
` console.log('start');
setTimeout(() => {
console.log("middle");
}, 0);
console.log('end');`
1. console.log('start') is executed immediately.
2. setTimeout is called with a timeout of 0,
which adds the callback to the macrotask queue.
3. console.log('end') is executed immediately.
The order of execution is:
start
end
middle (macrotask is executed)
############################################################################################
Think of it like this:
Synchronous code
console.log('start')
console.log('end')
Macrotask queue
console.log("middle")
The synchronous code is executed first, and then the macrotask queue is processed,
executing the callback.
key concept:
synchronous and asynchronous code works-
1. synchronous code is executed first
2. macrotask queue is executed next
3. microtask queue is executed after the macrotask queue
--> macrotask queue: the queue of tasks that are executed by the browser, such as
setTimeout, setInterval, I/O, UI rendering, etc.
--> microtask queue: the queue of tasks that are executed by the browser, such as
promise resolution/rejection, async/await, etc.
This content originally appeared on DEV Community and was authored by Er. Bhupendra Kumar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Er. Bhupendra Kumar | Sciencx (2024-08-03T17:37:56+00:00) MOST IMPORTANT JS OUTPUT BASED QUESTION:. Retrieved from https://www.scien.cx/2024/08/03/most-important-js-output-based-question/
" » MOST IMPORTANT JS OUTPUT BASED QUESTION:." Er. Bhupendra Kumar | Sciencx - Saturday August 3, 2024, https://www.scien.cx/2024/08/03/most-important-js-output-based-question/
HARVARDEr. Bhupendra Kumar | Sciencx Saturday August 3, 2024 » MOST IMPORTANT JS OUTPUT BASED QUESTION:., viewed ,<https://www.scien.cx/2024/08/03/most-important-js-output-based-question/>
VANCOUVEREr. Bhupendra Kumar | Sciencx - » MOST IMPORTANT JS OUTPUT BASED QUESTION:. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/03/most-important-js-output-based-question/
CHICAGO" » MOST IMPORTANT JS OUTPUT BASED QUESTION:." Er. Bhupendra Kumar | Sciencx - Accessed . https://www.scien.cx/2024/08/03/most-important-js-output-based-question/
IEEE" » MOST IMPORTANT JS OUTPUT BASED QUESTION:." Er. Bhupendra Kumar | Sciencx [Online]. Available: https://www.scien.cx/2024/08/03/most-important-js-output-based-question/. [Accessed: ]
rf:citation » MOST IMPORTANT JS OUTPUT BASED QUESTION: | Er. Bhupendra Kumar | Sciencx | https://www.scien.cx/2024/08/03/most-important-js-output-based-question/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.