JavaScript Event Loop

The JavaScript event loop is a fundamental concept in asynchronous programming. Understanding how it interacts with other components like the call stack, web APIs, and task queue is crucial for writing efficient and non-blocking code. In this tutorial, we'll delve into the mechanics of the event loop and see how it enables JavaScript to handle multiple tasks concurrently.

Introduction

The event loop is what makes JavaScript asynchronous. It allows the execution of long-running operations without blocking the main thread, enabling a smooth user experience. Whether you're dealing with network requests, timers, or callbacks, understanding the event loop will help you write more efficient and predictable code.

Core Content

The Call Stack

The call stack is a data structure that keeps track of function calls in JavaScript. It follows the Last-In-First-Out (LIFO) principle, meaning the last function to be called is the first one to be executed.

1function first() {
2console.log('First');
3}
4 
5function second() {
6console.log('Second');
7first();
8}
9 
10second();

Second
First

In this example, second is called first and pushed onto the stack. Then, first is called from within second, so it gets pushed onto the stack next. After first completes, it pops off the stack, followed by second.

Web APIs

Web APIs are built-in browser features that allow JavaScript to interact with the outside world. Examples include timers (setTimeout, setInterval), DOM manipulation, and network requests (fetch). These operations are handled by the web API environment, not the JavaScript engine itself.

1console.log('Start');
2 
3setTimeout(() => {
4console.log('Timeout');
5}, 0);
6 
7console.log('End');

Start
End
Timeout

Here, setTimeout is a web API that schedules the callback function to be executed after a delay. The JavaScript engine delegates this task to the web API environment, which handles it asynchronously.

Task Queue

The task queue (also known as the message queue) is where asynchronous tasks are placed once they're ready to be executed. When the call stack is empty, the event loop takes the first task from the queue and pushes it onto the stack for execution.

1console.log('Start');
2 
3setTimeout(() => {
4console.log('Timeout');
5}, 0);
6 
7Promise.resolve().then(() => {
8console.log('Promise');
9});
10 
11console.log('End');

Start
End
Promise
Timeout

In this example, both the setTimeout callback and the promise's .then() handler are placed in the task queue. The event loop ensures that the promise handler is executed before the timeout callback because promises have higher priority in the task queue.

Event Loop

The event loop continuously checks the call stack and the task queue. If the call stack is empty, it takes the first task from the task queue and pushes it onto the stack for execution. This process repeats indefinitely.

1console.log('Start');
2 
3setTimeout(() => {
4console.log('Timeout');
5}, 0);
6 
7Promise.resolve().then(() => {
8console.log('Promise');
9});
10 
11console.log('End');

Start
End
Promise
Timeout

The event loop ensures that asynchronous tasks are executed in the correct order, even though they're handled by different environments (JavaScript engine and web API).

Practical Example

Let's create a practical example that demonstrates the interaction between the call stack, web APIs, task queue, and event loop.

1console.log('Start');
2 
3setTimeout(() => {
4console.log('Timeout');
5}, 0);
6 
7Promise.resolve().then(() => {
8console.log('Promise');
9});
10 
11for (let i = 0; i < 1000000000; i++) {}
12 
13console.log('End');

Start
End
Promise
Timeout

In this example, the setTimeout and promise tasks are placed in the task queue. The long-running loop blocks the call stack, preventing any asynchronous tasks from being executed until it completes. Once the loop finishes, the event loop processes the promise first (due to its higher priority) and then the timeout.

Summary

What's Next?

Now that you understand how the event loop works with other components in JavaScript, let's move on to learning about JavaScript Template Literals. Template literals provide a convenient way to embed expressions within strings, making your code more readable and maintainable.

Next topic: JavaScript Template Literals