---
title: "What is the event loop in JavaScript and how does it work?"  
description: "Understanding the event loop is important for JavaScript developers so that they can understand how asynchronous operations are managed and executed."  
author: "Ashutosh Patel"  
published: 2024-06-26  
updated: 2024-06-26  
canonical: https://www.mindstick.com/articles/336246/what-is-the-event-loop-in-javascript-and-how-does-it-work  
category: "javascript"  
tags: ["javascript", "javascript events", "javascript method"]  
reading_time: 3 minutes  

---

# What is the event loop in JavaScript and how does it work?

#### JavaScript Event Loop

The [event loop](https://www.mindstick.com/forum/158326/what-is-the-event-loop-in-javascript-and-how-does-it-work) is an essential part of the JavaScript concurrency model, handling the execution of code, callbacks, and events in a non-blocking manner. It ensures that JavaScript continues to execute and handles [asynchronous operations](https://www.mindstick.com/forum/160099/what-is-a-callback-function-in-javascript-and-how-is-it-used-in-handling-asynchronous-operations) correctly.

Here is the [working process](https://www.mindstick.com/forum/161466/what-is-the-working-process-of-entityframework) of the Event Loop,

#### Understanding the Event Loop

**Call Stack-** JavaScript is single-threaded, which means it can only execute one piece of code at a time (except for Web Workers). The call stack is where function calls are queued and performed Last In, First Out (**LIFO**).

**Web APIs and Callback Queues-** The JavaScript engine, like in a [web browser](https://answers.mindstick.com/qa/95505/what-are-the-pros-and-cons-of-using-safari-web-browser), uses a web API (such as the **DOM**, `setTimeout`, `fetch`, etc.) that handles asynchronous operations and initiates transactions when these APIs are called after the JavaScript engine , and specify how to terminate them.

**Event Loop-** The function of the event loop is to maintain the Call Stack and Callback Queue,

- **Call Stack-** Consists of synchronous function calls one at a time.
- **Callback Queue-** Stores tasks (callbacks) that are ready to execute after the result of the currently executed script (when the stack is empty).

## Process of Execution

- When the script starts executing, the main thread executes the synchronous code and pushes the function calls onto the call stack.
- When an [asynchronous operation](https://www.mindstick.com/forum/159924/how-to-create-a-timeout-using-a-promise-to-cancel-a-long-running-asynchronous-operation) (such as `setTimeout`) is encountered, it starts and then sends the associated callback operation to the Web API environment (it sets a time in the `setTimeout`statement).
- The browser's web API handles asynchronous actions, leaving the JavaScript engine free to run code synchronously.
- When the Web API processing completes (e.g., `setTimeout`times out), the callback task is pushed to the Callback Queue.
- The event loop continues to [check if](https://www.mindstick.com/forum/12878/how-to-check-if-an-asp-dot-net-file-upload-control-has-a-file-in-jquery) the Call Stack is empty. If present, it is the first operation in the Callback Queue to the Call Stack for execution.
- This functionality is persistent, allowing JavaScript to [handle asynchronous](https://www.mindstick.com/forum/160364/how-to-handle-asynchronous-module-loading-in-javascript) events and callbacks in a non-blocking manner while maintaining a single-threaded execution model

## Example-

```javascript
console.log('Start');
setTimeout(() => {
 console.log('Inside setTimeout callback');
}, 0);
console.log('End');
```

**In the example above-**\
`console.log('Start')` and `console.log('End')` are activated simultaneously by pushing to the Call Stack.

Call `setTimeout`, which configures its [callback function](https://www.mindstick.com/forum/157609/what-is-a-callback-function-in-javascript-give-an-example) to be at least **0 milliseconds** (the actual delay may vary depending on [system performance](https://answers.mindstick.com/qa/102466/how-does-a-computer-s-bios-settings-impact-system-performance)).

`console.log('End')` completes execution and pops from the Call Stack.

The callback function for `setTimeout` is added to the Callback Queue after the specified delay.

The event loop detects that the Call Stack is empty and moves the callback task from the Callback Queue to the Call Stack, where it is executed (`console.log('Inside setTimeout callback')`).

## Output-

```plaintext
Start
End
Inside setTimeout callback
```

**Also, Read:** [Explain the concept of Web APIs in JavaScript](https://www.mindstick.com/articles/336242/explain-the-concept-of-web-apis-in-javascript)

---

Original Source: https://www.mindstick.com/articles/336246/what-is-the-event-loop-in-javascript-and-how-does-it-work

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.