Event loop

---

As we all know javascript is a synchronous single threaded language

First let's understand, what we meant by single threaded. As the term itself suggests a single threaded is an application where only one process can run at a time.

Javascript has one call stack and this call stack presents in javascript engine and all the js code is executed in call stack.

Call stack

The call stack works based on the LIFO principle i.e.last-in-first-out.When you execute a script, the JavaScript engine creates a Global Execution Context and pushes it on top of the call stack.

Whenever a function is called, the JavaScript engine creates a Function Execution Context for the function, pushes it on top of the Call Stack, and starts executing the function.

Let's understand this with an example :

function result(){
  console.log('Ends')
}
function add(){
  result()
}
add()

When the script runs, the JavaScript engine places the global execution context (denoted by main())

JavaScript engine executes the call to the add() function and creates a function execution context for the add() function and pushes it on top of the call stack:

The add() function calls result() function. At this point, the JavaScript engine creates another function execution context for the result() function and places it on the top of the call stack:

JavaScript engine executes the result() function and pops it off the call stack.At this point, the add() function is on top of the call stack, JavaScript engine executes it and pops it off the call stack.Now, the call stack is empty so the script stops executing.

The following picture illustrates the overall status of the Call Stack in all steps:

Now let's see an example where we have to execute code after some delay.

console.log('Start');

setTimeout(function cb(){
   console.log('Download a file.');
}, 5000);

console.log('Done');

Browser gives access to all these superpowers to JS engine

We get access in call stack by the help of global object i.e window

In our example , as the code execution happens line by line the global execution context is created and then Start is printed in console and then as callback function cb is encounterd then it is registered with a timer of 5000ms and then Done is logged in console.

We know that JS won't wait for anyone and then once timer expires cb is pushed into callback queue

The event loop is a constantly running process that monitors both the callback queue and the call stack.

If the call stack is not empty, the event loop waits until it is empty and places the next function from the callback queue to the call stack. If the callback queue is empty, nothing will happen:

To sum it up, the event loop is a process that runs endlessly and whose only job is to monitor and transfer methods to the call stack from the callback queue.