Event Loop, Call Stack, Web APIs and Callback Queue

So this is really the bigger picture, we have the V8 runtime, but then we have these things called WebAPIs which are extra things that browser provides. and this mythical event loop and the callback queue, so we need to starting from beginning.

The Call Stack

JavaScript is a single threaded programming language, which means that has a single call stack. and it can do one thing at a time, that what a single thread means, the program can run one piece of code at a time.
So, the Call Stack it’s basically a data structure which records basically where in the program we are, so if we step into a function, we put something on the stack, if we return from a function, we pop off the top of the stack, that’s all the stack can do.

All the functions executed goes to the call stack to be processing, the first function that goes in, it's the last to goes out. So it’s a LIFO, an acronym for Last In, First Out is a method for organizing in Data Structure.

The Blocking

Ok, What happens when things are slow?

Let’s say we have this kind of code

console.log('hi') // JS will executes this

setTimeout(function() { // And this
	console.log('there')
}, 5000)

console.log('hello') // Finally executes this

But, somehow five seconds later, console.log(’there’), wrapped by the setTimeout, appears on the stack and executes the callback for that function. How does that happen?

Web APIs and Callback Queue

Yes, it’s true that what I save said before that JavaScript Runtime can only do one thing at one time. But at the same time he can does more than one thing at one time. And the reason we can do things concurrently is that the browser is more than just the runtime, but the browser gives us these other things, the WebAPIs, these are effectively threads.

You can just make calls to, and those pieces of the browser are aware of this concurrency kicks in.

Now we have this picture let's see how this code runs in a more full picture of what a browser looks like.

console.log('hi') // JS will executes this

setTimeout(function() { // And this
	console.log('there')
}, 5000)

console.log('hello') // Finally executes this

Again, the same code as before, run code, logs hi to the console, simple. now we can see what happens when we call setTimeout. We are passing this callback function and a delay to the setTimeout call. Now setTimeout is an API provided to us by the browser.

The browser kicks off a timer for you. And now it's going to handle the count down for you, right, so that means our setTimeout call, itself is now complete, so we can pop off the stack. which five seconds later is going to complete.

Now the web API can't just start modifying your code, he can’t appear randomly in the middle of your code.

So this is where the task queue or callback queue kicks in. Any of the web APIs pushes the callback on to the callback queue when it's done.

Event Loop

Finally we get to the event loop, and it has one very simple job. The event loop's job is to look at the call stack and look at the callback queue.

If the stack is empty it takes the first thing on the queue and pushes it on to the stack which effectively run it.

So if the call stack is clear, and there's a callback on the callback queue, the event loop runs, it says: “oh, I get to do something.” And then, pushes the callback on to the call stack. The callback appears on the call stack, run, console.log “there”, and we're done.