Event loop in JavaScript: As simple as it could be
Almost all JavaScript developers have come across the term ‘Event Loop’, and it is often quite confusing for beginners. Even for me, it was quite difficult to understand in the beginning. And through this blog, I will try to make not just ‘Event Loop’ but also many other JavaScript jargons as simple as it could be…I hope you learn something new through this blog. Now let's get started!
Before we begin with event loop, it is very important for you to understand how JavaScript works. For those who don’t know, let me reiterate: JavaScript is a synchronous single-threaded language. Synchronous meaning that JavaScript will execute in a sequence which is line by line and it is single-threaded because at a time there will be only one thread. Now doesn’t it make you wonder how requests to servers are maintained by JavaScript after all these requests will take some time? Does JavaScript behave asynchronously in such situations or it’s synchronous nature still intact?
As mentioned earlier, JS is synchronous and it even handles situations that might take some time (for instance request to the server) synchronously, and here comes the event loop in the picture. As some of you might not be aware of ‘Execution Context’, I will give a short and crisp explanation for the same as it is very important to understand event loop and for those who already know it can skip the next para.
JavaScript maintains its synchronous nature through execution context. Whenever any JS code is executed an execution context is created i.e. it is space within which the JS code executes. Also, note that for every function a new execution context is created and pushed into ‘Call Stack’. Call stack is a stack that is maintained by the JS engine and it is this stack that contains all the execution contexts. When any function is no longer needed its execution context is popped out of this stack and at last when the code ends, even the first and foremost execution context about which I mentioned earlier in this para is popped out of the stack. I hope you got at least some idea and it will be enough to move straight onto event loop.
Imagine a situation like below.
In the above situation, I have used setTimeout in order to imitate a situation that might take some time. We all know that the output will be like this and I am here to tell you HOW!
JavaScript will create a main execution context which will be pushed into the stack as soon as we will run this program. Within this context, line 1 will be executed and the output will be logged. On-Line 2, JS engine encounters a callback function that has to be executed after 2 seconds. Now, the engine will store this function in the web API environment till the timer is on and in the meantime, the control will come to the next line of code and it will log “Remember JS is synchronous”. Once 2 seconds are over, this callback function will be pushed into a ‘Callback queue’. Now comes the “Event Loop”: the work of event loop is to keep a constant eye on the call stack and the callback queue and soon as the call stack is empty, it pushes the function into the stack as per the FIFO order in callback queue. And this is how JS handles situations that might take some time to execute.
I hope you now understand how JavaScript collects and processes events without ever blocking any piece of code and YES, it is as simple as this!
