As we all know JS has a very mischievous behavior and sometimes it gets really confusing to understand how it works behind the scenes. In this blog I will try to explain how callstack works in JS with code snippets as well as lame memes so bare with me.
This is how JS engine looks like :
Fig.1
This is how it looks like with browser features (ie browser engine like V8 engine is used in chrome):
Fig.2
Yes yes , its true , that our beloved JavaSript doesnt provide features like setTimeout, fetch , DOM apis etc. It is provided by the browser engine.
Fig.3
Now coming to CallStack, All the JS code is executed inside callstack. For example how does this code runs :
console.log("hello")
console.log("bye bye")
JS executes the first line as it goes in callstack, and prints "hello" on the console, then next line gets executed and "bye bye" appears on console. Pretty simple , right ?
Now lets move on to next code snippet :
console.log("hello")
setTimeout(()=>{
console.log("YOLO")
},1000)
console.log("bye bye")
Now this is where things start to get interesting , this is how it works : first line gets into callstack and it consoles "hello". Then moving onto second line, it enters into callstack , since we know setTimeout isnt part of JS environment , it delegates this to browser Web API's where timer gets started for 1 second (1000ms = 1s). Then as JS is synchronous it moves on to the next line and consoles "bye bye". But what happened to the setTimeout function ? Its timer is running in browser Web API , and once the timer gets over it enters Callback function into Callback Queue (Refer to Fig.2). Then Event Loop checks if the Callstack if empty or not , if callstack is empty then it shifts the callback function from callback queue to callstack and executes it straight away (ie consoles "YOLO"). If callstack is not empty then eventloop wait for callstack to be empty so that it shift callback function to callstack and execute it. All of this can be visualized here : jsv9000.app/?code=Y29uc29sZS5sb2coImhlbGxvI..
Wait it doesnt end here , lets take example of the another code snippet :
console.log("hello")
setTimeout(()=>{
console.log("YOLO")
},0)
console.log("bye bye")
What should the output be ? Lets understand this, firstly it will console "hello" then setTimeout function goes to web API but wait here the time to run the function is 0, so will it directly go into callstack again and get executed since it requires 0s to run ? No my friend , It will follow the same procedure as before , the callback function will go into callback queue and wait for callstack to be empty first. So this hows console will look like
hello
bye bye
YOLO
Got it? You can visualize it here : jsv9000.app/?code=Y29uc29sZS5sb2coImhlbGxvI..
Now , there are 2 types of callback queues,
- MicroTask Queue
- Task Queue
Microtask Queue : Any kind of promise functions , fetching functions enters into microtask queue. Task Queue : Rest of callback functions go to Task queue.
Microtask Queue has a higher priority then Task queue, ie. if callstack is empty and there are two functions in microtask queue and three functions in task queue then event loop will shift the functions present in microtask queue first after that it will shift the functions in task queue.
I hope this was helpful :)