Event loop
Published: 2021-12-05 19:17:59

---

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](https://developer.mozilla.org/en-US/docs/Glossary/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](https://levelup.gitconnected.com/learn-javascript-fundamentals-scope-context-execution-context-9fe8673b3164) 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())


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aix8nz6he23g6cibdu2f.jpeg)

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0gj3adeqv03wodduqkj.jpeg)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp8ribamvcnlc8jrj5cv.jpeg)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgdvl396owm9q7uykdjd.jpeg)

_**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 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9np3gteq188v5l5do87y.jpeg)
 

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdstwo9e13l5zjcsqls6.jpeg)
 

 We know that JS won't wait for anyone and then once timer expires **cb** is pushed into callback [queue](https://www.javatpoint.com/javascript-queue)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdma9gz9zzbmv8s1sqfc.jpeg)
 

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gejd242r41b9no1y6mc.jpeg)


<u> 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.</u>