Node.js Tutorial - 42 - Event Loop

Summary

This video explains the event loop in Node.js, highlighting its role in asynchronous code execution. The speaker reviews key concepts such as JavaScript's synchronous, single-threaded nature and the importance of libuv in handling asynchronous tasks. The video provides an in-depth walkthrough of synchronous and asynchronous code execution, followed by a visual representation of the event loop. It covers how different queues (timer, I/O, check, close, and microtask) are prioritized and executed, helping viewers understand Node.js's internal processes for managing async code efficiently.

Takeaways

• 😀 JavaScript is a synchronous, blocking, single-threaded language, but asynchronous programming is enabled through external libraries like libuv.
• 💡 The V8 engine, which executes JavaScript, consists of a memory heap for variable storage and a call stack for function execution.
• 🛠️ When an async function is called, it's offloaded to libuv, which handles it using the system's async mechanisms or a thread pool, keeping the main thread free.
• 📜 In synchronous code execution, functions are pushed onto the call stack and popped off in a last-in-first-out order, producing a sequential output.
• ⏳ In asynchronous code, the async function is offloaded, and JavaScript continues executing other tasks while waiting for the async operation to finish.
• 🔄 The Node.js event loop is a key mechanism that manages the execution of async callbacks once the call stack is empty.
• 📝 There are multiple queues in the event loop, including the timer queue (setTimeout, setInterval), IO queue (async operations like file reads), check queue (setImmediate), close queue, and two microtask queues (nextTick, promise).
• ⏱️ The event loop processes these queues in a specific priority order, with microtasks being executed first, followed by timer callbacks, IO callbacks, and others.
• 🔀 Even if two async tasks complete at the same time (e.g., setTimeout and FS.readFile), timer callbacks are prioritized over IO callbacks.
• 📊 The event loop continues to run as long as there are callbacks to process, and exits when there are none left, ensuring efficient asynchronous execution in Node.js.

Q & A

What is the primary role of the event loop in Node.js?

The event loop in Node.js orchestrates the execution of synchronous and asynchronous code. It ensures that tasks such as callbacks from async operations are handled appropriately and in a specific order after synchronous tasks have completed.

How does JavaScript handle asynchronous operations in Node.js?

JavaScript offloads asynchronous operations to a library called libuv in Node.js. The async task is then executed either using native OS mechanisms or through a thread pool, ensuring the main thread is not blocked.

What happens to synchronous code in Node.js?

Synchronous code in Node.js is executed in a straightforward, last-in-first-out manner on the call stack. Functions are pushed onto the stack and popped off once executed, with global scope execution starting first.

What is the role of the call stack and the heap in the V8 engine?

The call stack is responsible for tracking the execution of functions in a last-in, first-out manner. The heap is where memory is allocated for variables and functions during the execution of code.

How does the event loop prioritize execution of different callback functions?

The event loop executes callbacks in a specific order: first, callbacks in the microtask queues (next tick queue and promise queue), followed by callbacks in the timer queue (for setTimeout and setInterval), then the I/O queue, check queue, and close queue. Microtask queues are rechecked after every other callback queue.

What is the difference between the timer queue and the I/O queue in Node.js?

The timer queue handles callbacks associated with setTimeout and setInterval, while the I/O queue handles callbacks related to asynchronous I/O operations, such as reading files with fs.readFile.

What are microtask queues, and why are they important?

Microtask queues consist of the next tick queue (for process.nextTick callbacks) and the promise queue (for native promises). They are crucial because callbacks in these queues are given the highest priority and are executed before any other async tasks.

What happens if two async tasks, such as setTimeout and fs.readFile, complete simultaneously?

If setTimeout and fs.readFile complete at the same time, the callback from the timer queue (setTimeout) is executed first, followed by the callback from the I/O queue (fs.readFile). This priority order is part of how the event loop manages task execution.

When does Node.js execute callbacks for asynchronous tasks?

Node.js executes callbacks for asynchronous tasks only when the call stack is empty, ensuring that no synchronous code execution is interrupted.

What are some node-specific functions mentioned in the script?

Node-specific functions mentioned in the script include setImmediate (which places callbacks in the check queue) and process.nextTick (which places callbacks in the next tick queue, a part of the microtask queues).

Outlines

00:00

🔄 Understanding Async Code Execution in Node.js

This section introduces the concept of asynchronous (async) code execution in Node.js, emphasizing that JavaScript is inherently synchronous, single-threaded, and blocking. It explains how async programming is made possible with the help of libraries like Libuv. The paragraph also details how code executes within the Node.js runtime, including the role of the V8 engine in memory allocation (Heap) and execution (Call Stack), and how Libuv offloads async tasks to the operating system’s native mechanisms or thread pool to ensure the main thread remains unblocked. Through a simple synchronous code example, the step-by-step execution of functions is illustrated.

05:02

📝 Comparing Synchronous and Asynchronous Code Execution

This part dives deeper into how Node.js handles async operations. By contrasting a synchronous code snippet with an asynchronous example (using `fs.readFile`), it explains how async tasks are handed over to Libuv for processing and how callbacks are executed after the main code completes. The explanation visualizes how the call stack manages both sync and async code and shows how the console outputs 'first', 'third', and 'second' in an asynchronous operation. It concludes with questions regarding the precise execution order of async callbacks, hinting at the complexity of callback execution timing and priorities.

10:02

🔁 The Event Loop: Coordinating Sync and Async Code

This section introduces the concept of the event loop, which is central to how Node.js handles asynchronous callbacks. It explains that the event loop coordinates the execution of both sync and async code, running through various queues that hold callbacks of different types (e.g., timer callbacks, I/O callbacks). The visual representation of the event loop is described in detail, covering six key queues: Timer, I/O, Check, Close, and two microtask queues (Next Tick Queue and Promise Queue). The microtask queues, specific to Node.js, are highlighted as distinct from the others, playing a crucial role in callback execution order.

Keywords

💡Event Loop

The event loop is a core component in Node.js that coordinates the execution of synchronous and asynchronous code. It ensures non-blocking execution by cycling through different queues and pushing callbacks onto the call stack when appropriate. The video explains that understanding the event loop is key to mastering async programming in Node.js, as it determines when and how tasks like I/O operations and timer callbacks are executed.

💡Call Stack

The call stack is a fundamental part of the JavaScript engine, responsible for keeping track of function calls in a last-in, first-out (LIFO) manner. In the video, it's described as the place where synchronous code is executed, and async functions are added or removed as their execution completes. This structure allows the event loop to prioritize when callbacks are executed after the stack becomes empty.

💡Async Programming

Asynchronous programming allows Node.js to perform tasks without blocking the main thread, enabling operations like I/O to run in the background. The video emphasizes that async programming in Node.js requires understanding how async tasks are handled by the event loop, libuv, and other related mechanisms to avoid performance bottlenecks.

💡libuv

Libuv is a multi-platform library that Node.js uses to handle asynchronous I/O operations. It provides the thread pool for non-blocking I/O and manages async callbacks via the event loop. The video explains how libuv offloads tasks like reading files to threads so that the main event loop is free for other operations.

💡Timers Queue

The timers queue holds callback functions for `setTimeout` and `setInterval` in Node.js. These callbacks are executed when their timer expires, as explained in the video. The event loop prioritizes these callbacks at specific points in its cycle, running them only when the call stack is clear.

💡Microtask Queue

The microtask queue holds high-priority tasks such as `process.nextTick` and promise callbacks. According to the video, microtasks are always executed first during the event loop cycle, even before callbacks from timers or I/O operations, making them crucial for fast async code execution.

💡I/O Queue

The I/O queue is where callbacks related to asynchronous I/O operations, such as file reads and network requests, are placed. The video highlights that after the timers and microtask queues are processed, Node.js moves to the I/O queue to handle operations like those from the `fs` and `http` modules.

💡setImmediate

A Node.js-specific function that schedules a callback to be executed immediately after the I/O phase in the event loop. The video describes `setImmediate` callbacks as being placed in the 'check queue,' which is processed right after the I/O callbacks but before timers in the next loop iteration.

💡Synchronous Code

Synchronous code is executed line by line, blocking the execution of other tasks until it finishes. The video contrasts this with asynchronous code, showing how synchronous functions are processed directly on the call stack, while async operations are offloaded to different queues handled by the event loop.

💡Callback Functions

Callback functions are passed to asynchronous operations, allowing code to be executed after the completion of a task, such as a file read or timer. In the video, the execution order of callbacks in different queues (timers, I/O, microtasks) is carefully explained as they relate to how the event loop functions.

Highlights

JavaScript is a synchronous, blocking, single-threaded language, making async programming essential for non-blocking operations.

Node.js achieves asynchronous programming using the V8 engine and libuv, with the latter handling async tasks and ensuring non-blocking of the main thread.

The V8 engine manages memory and a call stack, executing synchronous code in a last-in, first-out manner.

Libuv is responsible for executing async operations by offloading tasks to the operating system's native async mechanisms or using its thread pool.

Synchronous code execution follows a clear pattern where functions are pushed to and popped off the call stack, with no interruptions or delays.

Asynchronous operations like 'fs.readFile' are offloaded to libuv, allowing the call stack to proceed with other tasks while libuv processes the async task.

The event loop in Node.js is a core design pattern that coordinates the execution of synchronous and asynchronous code, ensuring efficient handling of tasks.

There are six different queues in the event loop: Timer queue, IO queue, Check queue, Close queue, and two microtask queues (Next Tick and Promise).

The priority order for callbacks within the event loop is crucial, with synchronous code always taking precedence over async operations.

Microtask queues, including Next Tick and Promise queues, have the highest priority, and are executed first when the call stack is empty.

Timers (setTimeout and setInterval) have priority over IO callbacks in the event loop, even if both are ready to be executed at the same time.

Set Immediate is specific to Node.js and adds tasks to the Check queue, executed after IO callbacks but before the Close queue.

The event loop continues running as long as there are tasks to process. If all callbacks are executed and no code remains, the loop exits.

The event loop's orchestration of tasks ensures non-blocking performance, answering questions like when async callbacks are executed.

Understanding the event loop helps clarify the execution priority of different async methods and how they interact with the call stack in Node.js.

Transcripts

welcome back in this video Let's

understand about the all-important event

Loop in node.js

let me Begin by reiterating a few points

about async code execution

first

JavaScript is a synchronous blocking

single threaded language

second

to make async programming possible we

need the help of Liberty I hope this is

clear to you

using these two points let me now paint

a picture in your mind as to how code

typically executes in the node runtime

on the left we have the V8 engine which

executes JavaScript code

it comprises of a memory he and a call

stack

whenever you declare variables or

functions memory is allocated on the

Heap

whenever you execute code functions are

pushed into the call stack and when the

function returns it is popped off the

call stack

straightforward last in first out

implementation of the stack data

structure

on the right we have libue

whenever you execute an async method it

is offloaded to the UV

Liberty will then run the task using

native async mechanisms of the operating

system and if that is not possible it

will utilize its thread pool to run the

task ensuring the main thread is not

blocked

let's now walk through two simple code

Snippets and understand how the V8

engine and libue are used by node

first let's take a look at synchronous

code execution

on the left we have a simple code

snippet

three console log statements that log

first second and third one after the

other

let's now walk through the code as if

the runtime is executing it

the main thread of execution always

starts in the global scope

so the global function if you can call

it that is pushed onto the stack

then on line 1 we have a console log

statement

the function is pushed onto the stack

and for the sake of understanding the

timeline let's assume this happens at

one millisecond

first is logged to the console

then the function is popped off the

stack

execution comes to line two

let's say at 2 milliseconds

log function is again pushed onto the

stack

second is locked to the console and the

function is popped off the stack

finally execution is on line three and

at three milliseconds function is pushed

onto the stack

third is locked to the console

and the function is popped off the stack

there is no more code to execute and

Global is also popped off

this is pretty much how synchronous code

execution can be visualized with the

node runtime

next let's take a look at async nescode

execution

on the left we have another code snippet

three log statements like before but

this time the second log statement is

within a callback function passed to FS

dot read file

let us once again walk through the code

as if the runtime is executing it

the main thread of execution always

starts in the global scope so the global

function is pushed onto the stack

execution comes to line one at one

millisecond console.log is pushed onto

the stack

first is logged in the console

and the function is popped off the stack

execution now moves on to line two

add 2 milliseconds the read file method

gets pushed onto the stack

in the earlier lecture I mentioned that

read file is an async operation that is

offloaded to libue

so what happens now is that the Callback

function is handed over to libue

JavaScript then simply pops off the

read5 method from the call stack because

its job is done as far as execution of

line 2 is concerned

in the background the beauty starts to

read the file contents on a separate

thread

at 3 milliseconds JavaScript proceeds to

line 5. it pushes the log function onto

the stack

third gets locked to the console

and the function is popped off the stack

now there is no more user written code

in the global scope to execute so the

call stack is empty

at about 4 milliseconds let's say that

the file read task is completed in the

thread pool

the associated callback function

is now pushed onto the call stack

within the Callback function we have the

log statement

that is pushed onto the call stack

second is locked to the console and the

function is popped off

as there are no more statements to

execute in the Callback function

that is popped off as well

no more code to run so the global

function as we call it is also popped

off the stack

the console output is going to read

first third and then second

this is how the node runtime executes an

asynchronous code snippet that uses FS

dot read file

similar execution holds good for other

async methods as well

I hope it is clear to you as to how code

is executed in the node runtime

now if you've understood this far

let me ask you a few questions

whenever an async task completes in liby

at what point does node decide to run

the associated callback function on the

call stack

does it wait for the call stack to be

empty or does it interrupt the normal

flow of execution to run the Callback

function

what about async methods like set

timeout and set interval which also

delay the execution of callback function

F2 async tasks such as set timeout and

Fs dot read file complete at the same

time how does node decide which callback

function to run first on the call stack

does 1 get priority over the other

at the moment we simply don't know

just when we thought we understood how

code is executed behind the scenes in

the node runtime it seems to have become

more complex

well let me tell you all these questions

can be answered by understanding about

the core part of liby which is the event

Loop

now what is the event Loop well

technically it is just a c program

but you can think of event loop as a

design pattern that orchestrates or

coordinates the execution of synchronous

and asynchronous code in node.js

and the way we are going to understand

how the event Loop works is a two-step

process

in this video we will take a look at a

visual representation of the event Loop

that will give you a brief overview of

the different parts that come together

in the event Loop

and then over the next few videos we

will conduct various experiments with

code to better understand the visual

representation

all right here is how we can visualize

the event Loop

I would like to pause and thank deepal

jsekara who has written an article where

I first came across a similar

representation

it has been very useful for me and now

my job is to make sure you easily

understand this as well

now the event Loop is a loop that is

alive as long as your node.js

application is up and running

in every iteration of the loop we come

across six different cues

each queue holds one or more callback

functions that need to be eventually

executed on the call stack

and of course the type of callback

functions are different for each queue

first we have the timer queue this

contains callbacks associated with set

timeout and set interval

second we have the ioq

this contains callbacks associated with

all the async methods that we have seen

so far

example methods associated with the fs

and HTTP modules

third we have the check queue now this

contains the callbacks associated with a

function called set immediate

this function is specific to node and

it's not something you would come across

when writing JavaScript for the browser

fourth we have the close queue this

contains callbacks associated with the

close event of an async task

finally we have a micro task Queue at

the center

this is actually two separate cues

the first queue is called Next tick

queue and contains callbacks associated

with a function called process dot next

take which is again specific to node.js

the second cue is the promise queue

which contains callbacks that are

associated with the native promise in

JavaScript

and one very important point to note is

that timer IO check and close queues are

all part of libuby

the two microtask use however are not

part of libuee

hopefully the color difference conveys

that

nevertheless there's still part of the

node runtime and play an important role

in the order of execution of callbacks

speaking of which let's understand that

next

the arrowheads are already a giveaway

but it is very easy to get confused

so let me explain the priority order of

the queues

first you should know that all user

written synchronous JavaScript code

takes priority over asynchronous code

that the runtime would like to execute

which means only after the call stack is

empty the event Loop comes into picture

within the event Loop though the

sequence of execution follows certain

rules and I will warn you there are

quite a few rules you have to wrap your

head around

let's go over them one at a time

step one

any callbacks in the micro task queues

are executed

first tasks in the next queue and only

then tasks in the promise queue

Step 2 all callbacks within the timer

queue are executed

step 3 callbacks in the micro task

queues if present are executed after the

execution of every callback in the timer

queue

again first tasks in the next queue and

then tasks in the promise queue

step 4

all callbacks within the ioq are

executed

step 5 callbacks in the micro task

queues if present are executed

next to queue followed by promise queue

step 6 all callbacks in the check queue

are executed

step 7 callbacks in the micro task

queues if present are executed after the

execution of every callback in the check

queue

again first tasks in the next IQ and

then tasks in the promise queue

step 8 all callbacks in the close queue

are executed

step 9

for one final time in the same Loop the

micro task queues are executed next a

queue followed by promise queue

at this point if there are more

callbacks to be processed the loop is

kept alive for one more run and the same

steps are repeated

on the other hand

if all callbacks are executed and there

is no more code to process the event

Loop exits

this is the role libuey's event Loop

plays in the execution of async code in

node.js

I'm also hopeful that we now have

answers to the questions we had a few

minutes ago

for our first question the answer is

that callback functions are executed

only when the call stack is empty the

normal flow of execution will not be

interrupted to run a callback function

for our second question we now know that

set timeout and set interval callbacks

are given first priority

for the third question We Now understand

that timer callbacks are executed before

I O callbacks even if both are ready at

the exact same time

apart from this we also learned about a

few other cues that have their own

priority

but this visual representation here is

what I want you to imprint in your mind

as it is how node executes async code

Under The Herd

if it is now clear as to what the event

Loop is over the next few videos let's

conduct a few different experiments to

understand and verify the order of

execution in the event Loop

thank you for watching please do

consider subscribing to the channel and

I'll see you in the next one