How the event loop works in JavaScript
The event loop is one of those forbidden topics that nobody wants to talk about due to the complexity of some of its core concepts. But in fact, it’s one of the most important concepts in order to understand how JavaScript works under the hood, today we’ll shine a light in the midst of night, to fend off evil wherever it may lurk, grasping how the web’s language manages its tasks.
There are two main aspects to consider when the JavaScript Engine reads and executes our code:
- We need a place to store and write information (variables, functions, etc.)
- We need to keep track of what’s happening to our code line by line.
Javascript organizes variables and tasks using four concepts, call stack, event queue, scheduled queue, and memory heap.
Call Stack
A stack is a linear data structure that JavaScript uses to order our function calls, depending on the scope of a determined function (Global scope, block scope, function scope). It stores items using the Last In, First Out (LIFO) method. Whenever a new element is added to a stack, it is added to the top of the stack, and the top element is always removed first from a stack.
We can imagine a stack like a pile of dishes, in which you put one dish upon the other. But here’s the thing, you can’t take the first item that you added, only the last one, here is when the concept of Last In, First Out (LIFO) is applied.
In fact, the name of the website Stack Overflow is inspired by a very evil issue that often occurs, and it’s called Stack Overflow. It happens when we call functions nested inside each other, over and over again. If we just keep adding functions to the stack without popping them off, we will have a stack overflow. We can invoke this demon very easily using recursion.
Memory Heap
The memory heap is just an area where memory is allocated or deallocated without any order; when we create a new variable, the memory heap is going to create a reference to store our variable. This is opposed to a stack where memory is deallocated on the Last In, First Out (LIFO) basis.
Event Queue and Scheduled Queue
A queue is a linear data structure in which the order is First In First Out (FIFO). The event loop has a scheduled queue and an event queue, each of them play a vital role in making JavaScript seem to be a multi threaded language, when in fact it’s not.
The event queue is a special queue, which keeps track of all the functions queues, which are needed to be pushed into the call stack. The event queue is responsible for sending new functions to the track for processing. The queue data structure is required to maintain the correct sequence in which all operations should be sent for execution.
The scheduled queue has all the asynchronous tasks inside to be executed in the future; in fact, whenever the call stack and the event queue are empty, the scheduled tasks are going to be passed to the event queue and then to the call stack.
In fact, when it comes to promises in JavaScript, we have an additional concept that we need to review, the microtasks queue. The microtasks queue is a queue that has the all the promises and is going to be prioritized over the scheduled queue.
Event Loop
The event loop is the main character of our game, he has the responsibility of checking out if there is a task pending to be executed, in point of fact, he is in the middle between the call stack and the event queue, making sure if there is a task in either the event queue or microtasks queue to be passed to the call stack to be executed, we mentioned before that the microtasks queue has more priority than the scheduled queue, well, we are going to explain the process in order to understand in a deeper level.
When there are tasks in the call stack, they are going to be executed and therefore the executed tasks will be removed from the call stack, when the call stack is empty, the event loop is going to check if there is any task in the scheduled queue, microtask queue and in the event queue, if there is not a task in the event queue, the event loop is going to see on the scheduled queue, if there’s a task scheduled, the event loop will pass that task to the event queue and then, it’s going to see if there’s a task in the microtask queue too, in the case that there’s a task, the event loop will pass the task in the microtask queue to the call stack, and finally when the task is completed and removed from the call stack, the scheduled task that was on the scheduled queue, and was passed to the event queue, will be passed to the call stack.
In the image below we can see an overview of the JavaScript Engine; in this case “Web Api” is where the scheduled task is going to fall in. For practical reasons, we have splitted the queue in two, the event queue and the microtask queue in order to understand better how the event loop prioritizes the execution.
Now that we know how the event loop works, we can write a better asynchronous code with a deeper comprehension of the main concepts behind JavaScript, it’s the beauty of understanding the process and noticing that there is not magic in there, it’s just engineering’s art created by incredible minds that has an impact on how we develop web applications and the possibilities that we have as a developers to change the life of million of users across the world.
Let’s shine a light in the darkness and save the users of a stack overflow.
Author: Yosef Blandin.
Visit our website and learn about our services: https://turpialdev.com/
Follow us!
https://www.instagram.com/turpialdev/
https://www.facebook.com/turpialdev
https://www.linkedin.com/company/turpial-development
