Javascript basics: Event loop & concurrency.
I have worked in Javascript for few years now. In fact Javascript is the language, Github receives highest number of commits in. Recently I spent some time in understanding how javascript works. This article is part of my javascript basics series. If you want to know more about this javascript basics series, you may want to look at my earlier article about hoisting in javascript.
So, what is javascript…
Javascript is a single-threaded, non-blocking, asynchronous, concurrent language.
What does it mean… 😂
There is something call synchronous code, and something else called asynchronous code in javascript. Synchronous code is that gets executed one line after another as any other programming language. Asynchronous call receives a callback. Callback is called at a later point of time.
The most commonly used asynchronous code is “setTimeout”. let’s look at what is “setTimeout”.
If we look at the code of the javascript V8 engine, there is nothing called “setTimeout”, “DOM”, “ajax” in there. These things are provided by the WebAPI. So even if the Javascript engine is single threaded, javascript can perform multiple actions by help of this WebAPI. That’s how concurrency comes into the picture.
Let’s look at how this javascript engine works.
What’s event loop
Javascript engine is single threaded. It can do one thing at a time. It can’t pause execution of one function and do another thing and comes back to the paused function later, like C. It has to complete execution of one code then move to another.
How javascript queues and executes the code is the event loop.
The first thing we can look at is the Call stack. Call stack is like any stack, pushes things to the stack, operates from the top of the stack. It follows LIFO (Last In First Out).
Suppose, we want to execute the following program
The call stack will look like
So when javascript executes a function or code, it moves to the top of the stack. It executes the code and pops it out.
This system can be abused very easily and our javascript engine will be very busy to perform anything else.
Suppose we try running a function like below
The result is
It keep pushing itself to the stack. The size of the stack exceeds the maximum stack size, hence it stops the execution. The stack trace we see in case of any error, is the state of the call stack when the error occurred.
Let’s think about asynchronous functions now. Let’s take example of our “setTimeout” function. Let’s see what happens when we call a setTimeout function.
Let’s see what happens for this function.
Here we can see, all the synchronous lines to print A, D and E moves to the call stack. The first timeout function to print B, has a delay of 0 ms. It’s moved to the Web API then moves to the Message queue instantaneously. But not necessarily, it will be executed instantaneously as there might be other messages already present in the message queue. So the time given to the setTimeout function is not the exact time but the minimum time after which the callback function will be executed. Where as the second timeout function has a delay of 5 seconds. It is moved to Web API and keeps waiting for 5 seconds. After 5 seconds, it is moved to the message queue.
Javascript engines moves items from message queue to the call stack when call stack is empty. Message queue, being a queue follows FIFO (First In First Out) principle and processes items accordingly.
Likewise, in case of AJAX calls, it moves the call to the Web API. When response comes back, it moves the callback to the Message queue. The callback gets processed when its turn comes.
Let’s think about a slow functions.
Javascript engine can execute one code at a time. If we push a slow function to the stack, it will block our engine. We won’t be able to perform any operation.
Let’s consider the following example
Let’s check the call stack]
Here, we are executing 3 slow functions one after another, the engine is completely blocked until execution is completed for all these functions.
Let’s see another example
It’s doing the same thing but the slow functions are executed in async manner. Let’s see what is happening here.
Here, we execute the same slow function twice. But because it is being pushed to message queue to be executed later, the engine is not blocked for the whole time, it has scope other actions as well.
Congratulations! We are the end of the article. Thanks for reading. Hope I could shade some light on how event loop works.
Thank you for reading!