> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/ecmascript/the-event-loop.md).

# The Event Loop

## The Event Loop Behavior

What's the execution order of this code?

{% tabs %}
{% tab title=" 🧐" %}

```javascript
var value;
​
setTimeout(function () {
    value = 'VALUE';
}, 100 /* 100 ms. */);
​
console.log(value); // ???
​
setTimeout(function () {
    console.log(value); // ???
}, 200);
```

{% endtab %}

{% tab title="👍" %}

```javascript
var value;
​
setTimeout(function () {
    value = 'VALUE';
}, 100 /* 100 ms. */);
​
console.log(value); // 1 - undefined
​
setTimeout(function () {
    console.log(value); // 2 - VALUE
}, 200);
```

{% endtab %}
{% endtabs %}

And in this case?

{% tabs %}
{% tab title=" 🧐" %}

```javascript
function main() {
​
    var value;
​
    setTimeout(function () {
        value = 'VALUE';
    }, 0 /* 0 ms. */);
​
    console.log(value); // ???
​
    setTimeout(function () {
        console.log(value); // ???
    }, 0);
    
    console.log(value); // ???
​
}
​
main();
```

{% endtab %}

{% tab title="👍" %}

```javascript
function main() {
​
    var value;
​
    setTimeout(function () {
        value = 'VALUE';
    }, 0 /* 0 ms. */);
​
    console.log(value); // 1 - undefined
​
    setTimeout(function () {
        console.log(value); // 3 - VALUE
    }, 0);
    
    console.log(value); // 2 - undefined
    
}
​
main();
```

{% endtab %}
{% endtabs %}

## How the event loop works

1. **Register a listener** : Most asynchronous tasks requires the definition of a callback function in order to retrieve the result of the processing or simply in order to know that the processing ended.\
   During this step, we explicitly or implicitly subscribe a listener to some event source. Examples: `setTimeout`, `addEventListener` etc...
2. **Add the function to the queue**: The callback function cannot be called immediately when the result is received as the thread might be busy executing another function. In the example below, both callback functions are ready to be called the thread is busy executing our `main` function. The JavaScript engine adds references to the callback functions at the end of the callback queue in order to be called once the thread is free.
3. **Tick** : When the `main` function execution ends, the thread won't have time to stay idle and will immediately grab the callback at the top of the queue and execute it. More precisely, this is the event loop which simply loops forever executing every function in the queue. **The moment where the event loop ends the execution of a function and is ready to grab the next one is called a "tick"**.

![The event loop](/files/-LLucsiL6mHXS-m-4Bx0)

{% embed url="<https://www.youtube.com/watch?v=8aGhZQkoFbQ>" %}
What the heck is the event loop anyway?
{% endembed %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://web-dev-guide.wishtack.io/ecmascript/the-event-loop.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.