What the heck is the Event Loop anyway?

Before starting this tutorial I have a simple question for you. Are you ready?

What should be the output for this code?

console.log("Hello World");
setTimeOut(function(){
  console.log("I am in the timeout function")
}, 0)
console.log("I am outside of the timeout");

Comment your answer in the comment before you read the blog with simple explanation.

Early in this week I was working with one project and the behavior of setTimout function in javascript just amazed me. I wondered how this timeout function are working and then on the researching journey I met a great guy named “Event Loop”. And as my nature I also searched for it and I come across this video by Philip Roberts which answered all of my doubts.

So during this journey I solved some of my doubts which I want to share with you. So let’s get started.

1) What is JavaScript ?

I got so many definition for this on the web and the definition from the video was the perfect definition as my perspective.

JavaScript is single-threaded, non-blocking, asynchronous, concurrent language.

So, other then that JavaScript has a call stack, an event loop, a callback queue and some other apis and stuff. So I saw that v8(runtime inside chrome) only have a call stack and a heap. stack is used for function and storing local variables where heap is used for memory allocations.

But v8 dose not have ajax, timeout, timeinterval and some other function. So these things are provided by the browser as the webapis with event loop and callback queue.

So for below part I am assuming that you guys knows how stack works. and if you don’t know then just read a small blog or watch a video. It’s a very simple which implements LIFO concept.

function A() {  console.log("A"); B(); };
function B() { console.log("B"); };
A();

In stack main is the base of javascript. So for above code it will first push main then push A then push console and pop console, push b push console pop console and pop B and then pop main.

If you want to see the stack trace you can actually throw an error and get the error message on console where you can see the full stack trace.

How timeout function works?

Now let’s the answer for the first question which I asked you to solve. Was you answer correct? Let’s see.

Answer is “Hello World ” then “I am outside of the timeout” and then “I am in the timeout function”. Let’s see the stack trace for the function. First of all main will be push, then console will be push after that setTimeout will be push in for a moment but at a time it will be removed from the stack and then again console for outside of timeout will be called and after that console for the timeout will be called. So see how this works in the browser.

Step by Step :

1. First main will be push and then console for hello world will be pushed (That’s pretty straight forward).
2. Now when it sees the timeout function in the stack (which is not in the v8) it will use the webapis for this and start the timer for timeout in another loop and wait it until ends.
3. Here timeout is in the webapis area till then browser execute the console for the outside of timeout and print it on the console and also pop the main function from the stack.
4. Till this time that timeout function was executed by that thread and complete it’s timeout period and at the end of the thread it is going to push into the event queue, where all the queued function are stored by the browser.
5. Here in event loop this timeout is the only queued so when the event loop sees that timeout it will check for the stack. If and if stack is empty then only it will push that callback into the stack. Browser can see that the stack is empty so it will push that callback to the stack and then console function of that callback function will be pushed and print out the output to the console “I am in the timeout function”.
6. and then pop the console and pop the callback function and after that stack is going to be empty and again ready for work.

If you want to check out the live example how this works you can check on this page.

So some real life example to see how this process works.

When you create a button and attach an action(like async timeout or ajax) with it. When you clicked that button multiple times it their action are stored on the event loop and execute one by one.

That’s It for today. I hope you learned something new today. Any comments or suggestion are welcome. Share and like this if you like this. Because after all sharing is caring.

See you soon :)