Asynchronous JavaScript (Part 2): Event Loop

In the previous post, we covered the essential components of a JavaScript engine, including the call stack, Meamory heap, and event queue, and how they work together to execute JavaScript code efficiently. We also discussed the callback queue, which are crucial for managing asynchronous operations in JavaScript.

Since we know that Web APIs delegate tasks to different threads, and once these tasks are completed, the desired functions must be sent to the call stack. To achieve this, the event queue is used to keep track of all the functions that need to be pushed into the call stack. The event queue is responsible for maintaining the correct sequence of operations and sending new functions to the call stack for processing.

Let's take an example, in the following example, we are using a setTimeout function, which will log the "executed" string after 2000 milliseconds.

  setTimeout(function()
    console.log("Executed";)
  }, 2000);        

1. When the JavaScript engine encounters the setTimeout() function, it adds it to the call stack for processing.
2. The setTimeout() function is executed, and it calls a Web API to start a timer for 2000 milliseconds.
3. While the timer is running, the setTimeout() function is popped off the call stack and is no longer being executed. At this point, the call stack is empty.
4. Once the timer finishes, the callback function that was passed to setTimeout() is pushed into the event queue by the Web API. In this case, the callback function logs the string "Executed" to the console.
5. The event loop continuously checks if the call stack is empty. If it is, it will push the first function in the event queue onto the call stack for execution.
6. In this case, once the call stack is empty, the event loop sees that there is a function in the event queue, and it pushes the console.log("Executed") function onto the call stack.
7. The console.log() function is executed and logs the string "Executed" to the console.
8. Once the function is executed, it is popped off the call stack, and the call stack is empty again. The event loop continues to check for new functions in the event queue and repeats the process as necessary.

So, in summary, the event loop ensures that asynchronous functions, like the setTimeout() function, are executed in the correct order by maintaining a queue of functions to be processed and only adding them to the call stack once it is empty. This allows the JavaScript engine to handle multiple tasks at once and prevents long-running functions from blocking other functions in the call stack.

This individual's video on the event loop in JavaScript is the most comprehensive and informative resource I found. It stands out as the best explanation I've come across

I hope that helps!

What's next ?

In the next part of our exploration of JavaScript, we'll be delving into a hot topic "The Execution context", which is a fundamental concept for understanding how JavaScript code is executed. We'll be exploring the scope, hoisting, and other key components that contribute to the way JavaScript manages its runtime environment.

So, join me 👀 on this journey as we delve into the exciting world of advanced JavaScript concepts and stay informed about the next post series outlined in the roadmap above.

Thank you for your continued support and interest in my newsletter

#advancedJavaScript

#javascriptConcepts

#javascriptdevelopers

#javascriptpro

#exploringtheDepthsofJavaScript

#guideto28AdvancedConcepts