In some ways, I think the programming journey defies the “normal” order of learning. We most likely learned about alphabets before learning to spell or read and simple division before long division. However, in learning to code, more emphasis is put on learning to use tools before knowing how they work or what happens in the background. Focusing on knowing how to use the tools is the reason you'll probably not bother about digging deeper into what the event loop is. Till one day, with your three years of experience working with javascript, an interviewer says: “so, tell me about the event loop” and you're smiling in embarrassment and mixing up the terms.

So without further ado, let's try to understand the javascript event loop.

The first thing worthy of note is that javascript code runs in a single thread. Simply put, only one task is executed at a time.

The second important thing to note is that the javascript engine runs javascript code. The javascript engine is built into modern browsers, and it consists of two main components:

• A heap used for memory allocation
• The call stack is used to keep track of and execute function calls

Thirdly, the javascript engine runs in the Javascript Runtime Environment. On web browsers, the Javascript Runtime Environment also provides APIs for timers, DOM manipulation, HTTP requests and others.

To describe the event loop, I'll use an example. Consider the snippet below

Here's what happens when I run the script

1. The first console.log is added to the call stack and executed
2. The setTimeout is pushed into the call stack. However, javascript only provides a way to access the setTimeout API and not execute it. So it is moved to the Event table and popped off the call stack.
3. The third console.log is then added to the call stack and executed.

What happens to the second console.log? After zero seconds, it is moved to the task queue (or callback queue), and after the call stack is empty, it is then moved from the task queue to the call stack and executed.

The above seems like a lot happening for three lines of code but let's also look at another example:

There is a new addition to the list, a Promise. When promises were introduced to Javascript, the job queue (or microtask queue) was also added to the loop. Here, the first two steps still apply but, when the promise is moved to the call stack, it is resolved to “c” immediately, and the .then() is moved to the microtask queue. Then, the last console.log is moved to the call stack and executed.

When the call stack is empty, the tasks in the job queue are moved (First In First Out) to the call stack and executed. After the job queue is empty, the tasks in the task queue are then moved to the call stack one after the other and executed.

So in the course of explaining these examples, we've looked at how the event loop works. Summarily, when a function is invoked or a script is run, the event loop continually checks and updates the call stack until execution is complete.

My goal in writing this article was to make the event loop a lighter pill to swallow, so, you can read more here:

JavaScript Internals: JavaScript engine, Run-time environment & setTimeout Web API
Synchronous vs Asynchronous JavaScript

Photo credit: Pixabay

Kindly leave any feedback in the comment section. Thank you for reading.