Mastering the JavaScript Event Loop: A Comprehensive Guide

Introduction

Javascript-RuntimeJavaScript is a Single Threaded, Non-Blocking programming language(We will discuss each of this jargon at the end of this article)

Back then JavaScript was a web scripting language. One can make a website more interactive with JavaScript.No one could have thought of JavaScript being the next big thing in tech.
But ever wondered :
✔️ How does JavaScript being a synchronous, single-threaded language is still providing apt performance?
✔️ Why tech giants and developers are developing projects based on JavaScript (ReactJS, NodeJS, Angular etc).

The answer to these questions lies in how JavaScript works:

JavaScript Working Model

Call Stack and Web APIs event loopAn illustration of the JavaScript working model can be seen in the image. You will notice that it has four key components;

  1.  Call Stack
  2.  Web APIs
  3.  Queue
  4.  The Event Loop

So briefly understand the importance of each of the three components

Stack

Call StackAs per the definition JavaScript is single-threaded, it can’t handle two executions simultaneously, then how does it function so efficiently, let’s dive into it.
In any JavaScript web browser (ex. chrome) or runtime (nodeJS) the code is compiled line by line. Now the question is how the order of the code execution is decided.
Yes, it’s the call stack of the JavaScript model which decides which function will be executed first and subsequently which code has to wait in the queue.

Consider the following code:

function add(a, b) {
console.log(‘add’)
return a + b;
}

function average(a, b) {
console.log(‘average’)
return add(a, b) / 2;
}
//console output
//add
//average

It was quite easy to guess the output, but you get the idea that stacks are based on the last in the first out approach. The last function called will be executed first, as observed in the above example. This should be enough to give an overview of the call stacks.

Please note the following:

✔️ A code that is just ready for the execution will be performed by the stack (as we have seen in the above example)
✔️ But if the code is not yet ready( Async calls, AJAX ) and has some delay to it execution will be thrown out from the stack to the Web APIs deck for further execution.

Unlock the Power of Java: Hire Our Expert Developer Today!

Web APIsWeb APIs

Web APIs to any JavaScript environment merely help in code execution for those codes which were thrown out from the stack,i.eThey needed time for execution.

Consider the following example:

function delay(){
setTimeout(()=>{
console.log('delay')
},1000)
}
function noDelay(){
console.log('no delay')
}

delay()
noDelay()

Please note the following points:

✔️ In the above code we are calling the delay() and noDelay() function
✔️ If you observe closely in delay we are having a setTimeout function with a delay of a second.
✔️ During the execution the delay function will be pulled out of the stack and will be processed at the web api deck.
✔️ And after completion it will be sent to the Queue.

Now can you guess what will be the outcome for 0 delay time?

QueueQueue

Queue is yet another key component to the working of JavaScript. Queue, as the name suggests, contains the tasks/code execution order which is sent from the Web APIs deck.

Event Loop

Queue-event-loop

Now comes the interesting part of the model, the event loop. We know that the tasks in the queue are ready to be executed, but for execution, the code has to be there in the call stack. Thus comes the application of the event loop.
An event loop is the link between the queue and the call stack. It helps in code execution by pushing the code again to the stack.

coma

Conclusion

Now that we have a basic understanding of how JavaScript works, again let’s have a look at the definition of JavaScript:

“JavaScript is a single threaded, non blocking programming language.”

✔️ Single Threaded, the call stack of the JavaScript model can execute only one piece of code at a time

✔️  Non Blocking, the call stack is not blocked or the call stack doesn’t wait for the code for execution. The code will be pulled out immediately if it is not ready for execution to the Web APIs deck for further processing.

Keep Reading

Keep Reading

Launch Faster with Low Cost: Master GTM with Pre-built Solutions in Our Webinar!

Register Today!
  • Service
  • Career
  • Let's create something together!

  • We’re looking for the best. Are you in?