Let's Talk about Event Loop in JavaScript
Tags: javascript, programming, webdev, interview
Published: 2023-12-07 07:34:06

## Before knowing what is Event Loop, we need to understand the nature of Javascript.

 - As we all know that JavaScript is a **Single-threaded** language which means that it can excecute only a single line code at a time unlike other programming languages like C++/Java.

 - Javascript engine excecutes the code from top to bottom. It creates an execution context, and inserts, removes the function in and out of the **call stack** while the code is getting executed.

 - While the code is getting executed if it strikes a function that performs a very long task then rest of the code cannot be executed until the current function is not completed its execution.

 - Lets take an example to understand this point -

![Example of a code which demonstrates how js work on a single thread](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdwgf1v860y58eufstus.png)

 - Explaination:
   - Output of the code: 

   ```
   Start of the program
   program completed
   ```

   - In this code, we can see that the first **console.log()** 
   printed as soon the code started to geeting execute but inside 
   the function **runner()**, the while loop blocks the execution 
   the last **console.log()**, this a perfect example which 
   explains that javascript is single-threaded language.

---

- To solve this problem event loop comes into picture with the help of which Javascript performs **asynchronous** tasks/operations and creates an illusion of **multi-threading**.

--- 

## Components of a Web Browser - 

- JavaScript Runtime
  - Heap Memory
  - Call Stack
- Web APIs
- Event Loop
- Queues:
  - MicroTask Queue
  - MacroTask Queue (aka. Callback Queue) 

---

## Entry of Callback functions

To prevent a blocking function from blocking other activities, we typically put it inside a **callback** function to execute it after all other activities are are performed by the code.

Now, you are wondering that what the heck is a Callback function?

As mentioned that earlier that Web browser have other components as well other than JS Engine.

**To Understand Callback function lets take an example.**

![example of a callback function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idhx324rxkubngv7w1mi.png)

- When you call the _setTimeout()_ function, make a _fetch request_, or _click a button_, the web browser can do these activities concurrently and asynchronously.
- The _setTimeout()_, _fetch requests_ and _DOM events_ are parts of the Web APIs of the web browser.
- In our example, when calling the _setTimeout()_ function, the JavaScript engine places it on the _call stack_, and the Web API creates a _timer_ that expires in 1 second, till then rest of the code gets executed.
- Then JavaScript engine places the task() function into a queue called a _callback queue_ or a _task queue_.

**This is where _Event Loop_ comes into picture**

- The _Event loop_ facilitates this process,
  - It constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the _event queue_. If it is not, then the current function call is processed.

---

_Hope the topic was cleared and now you have a better understanding of Event loop in JavaScript_
_Thankyou_