Today, we will demystify the . All those fancy terms like Callstack and Callback queue may sound complicated, but don't worry! I recall how tough it was when I initially started learning about it three years ago. JavaScript event loop I will guide you through the event loop in a way that I wish someone had guided me. So, let's dive in and explore the following concepts together: Callstack queue Callback queue Event loop. Understanding these concepts is crucial for becoming a proficient JavaScript developer, and by the end of this article, you will have a clear understanding of how they work together. Are you ready? Then click that ❤️ button on the right, and Let's get started. Warm-up While writing your day-to-day code, you may not actively think about the event loop, but it will likely be useful to understand at some point. It's also a commonly discussed topic in job interviews. JavaScript operates on a single thread, allowing it to process instructions one at a time. Hey, just a quick heads-up: you can actually spawn a to run computations in parallel! It's pretty neat, but keep in mind that it has specific use cases, and there's one important thing to note: you won't be able to access the DOM from within the Web Worker. Just something to be aware of 🙂 Web Worker Let's check out this code together! Can you take a guess at what the output will be? console.log("A");

setTimeout(function() {
    console.log("B");
}, 0);

console.log("C"); What do you think the output will be? Notice how I scheduled a timer with , but I'm saying it should be called 0 milliseconds in the future. setTimeout Will the output be: or A B C A C B? Take a guess 🤔 , , and then are the answer. A C B Honestly, I don't expect you to get it right. It's a tricky piece of code, and that's why I'm here to help. In this post, I'll spend the whole time explaining how this code works. So, let's dive in hacker 🦾 The Mighty Callstack Think of the call stack as an array where the JavaScript interpreter keeps track of the code you're running. Let's consider the following code as an example: console.log("A");

console.log("B"); Let's talk about the call stack: It begins empty. Next, the JavaScript interpreter adds the first line to the call stack. So, at this moment, the call stack holds . console.log("A") The statement is executed, which prints to the console. After that, this instruction is removed from the call stack, leaving it empty again. console.log("A") "A" Then, is added to the call stack. console.log("B") This line is executed, resulting in being logged to the console. Once again, this instruction is removed from the call stack, leaving it empty. "B" Check out this excellent tool below that visualizes the call stack loop (and more): (It helps you visualize this) loupe - example 1 Let's put the Web APIs and callback queue aside for a moment. Simply click on (I've already filled in the code for you), and take a peek at the Call stack. Save & run Let's Look at an Example With a Function Keep in mind that I won't use ES2015 since the tool doesn't support it since it was written over 7 years ago. However, the concepts still apply to arrow functions. loupe function init() {
    console.log("A");
    console.log("B");
}

init(); Let me walk you through how the call stack is filled in this example: Initially, the call stack is empty. The function is defined but not called, so it doesn't go into the call stack. The call stack stores the instructions that need to be executed. init() When the execution encounters the call to , it is added to the call stack because it can be executed. init() At this point, remains in the call stack, and the JavaScript interpreter starts reading the code inside the function line by line. init() The line is added to the call stack. Now, the call stack contains both and . console.log("A") init() console.log("A") The line is executed, which logs to the console. Then, is removed from the call stack. So, the call stack now only contains . console.log("A") "A" console.log("A") init() The next line, , is executed. It logs to the console, and then is removed from the call stack. Again, the call stack only contains . console.log("B") "B" console.log("B") init() Since there are no more lines to execute inside the function, is removed from the call stack, and the call stack becomes empty once again. init() init() Let's take a moment to visualize the call stack using the same tool as before. . Open the loupe, and check out example 2 Enters Callback Queue When I introduce or other Web APIs, things can get a little trickier. These Web APIs work differently because of how JavaScript is designed and how it interacts with the visual part of the Browser (like the DOM, user interactions, network requests, and more). setTimeout So, instead of functions being executed immediately and added to the call stack, there is an intermediate step when using Web APIs like . Let's see an example below: setTimeout setTimeout(function logA() {
    console.log("A");
}, 5_000); I named the function so that when we visualize this example, it will appear as instead of being anonymous. logA logA Here's how this code runs step by step: The call stack starts empty. Then the code is added to the call stack. setTimeout(function logA() {...}, 5_000); It gets executed, instructing the browser to create a timer for 5 seconds. The call stack becomes empty again (as the timer has been set). After approximately 5 seconds, the timer elapses, and the browser notifies JavaScript that it's time to call the function. However, the function cannot be directly added to the call stack. logA Instead, it is added to the callback queue, which is a separate "array" that stores callbacks from WebAPIs like . setTimeout Currently, the call stack is still empty, but the callback queue contains . logA() Since the call stack is empty, it can process the next item in the callback queue (we'll explore this further in the next lesson). Therefore, is moved from the callback queue to the call stack. logA() is executed, which adds to the call stack, executes it, and then removes it. logA() console.log("A") There's a bunch of stuff happening here, but don't worry, you can totally grasp it if you follow these two recommendations: Take a look at the visualization: . loupe - example 3 Give the explanation above another read. Keep repeating steps 1 and 2 until everything becomes clear. And hey, if it's still not clear, just let me know in the comments. I'm here to help 😀 Why Did They Design It Like This? The main reason for this is to improve performance. JavaScript operates on a single thread, which means it has to handle several tasks simultaneously, such as running your code, rendering the screen (including CSS calculations and pixel drawing), and responding to user interactions like button clicks or page scrolling. All of these tasks happen on the same thread. When the call stack becomes overloaded with a lot of tasks, it can cause your website to become unresponsive. To avoid this issue, the browser utilizes a scheduling system for Web API calls. This system allows the browser to defer these tasks until the call stack is empty, ensuring that your website remains responsive. However, it's important to note that the event loop, while effective in managing these tasks, is not a perfect design. It's still possible to inadvertently slow down your website due to the way JavaScript operates inside the browser. Let's Talk About the Event Loop Now that we understand the and the , let's dive into the event loop, which is a straightforward part of the equation. call stack callback queue The event loop performs a task: it constantly checks if there are any items in the and sends them to the , but only when the call stack is not occupied. callback queue call stack Take a look at this example: . loupe - example 4 Observe how the callback queue accumulates three instructions - , , and . Then, the event loop (depicted as an orange circle with arrows) forwards these tasks one by one, but only when the call stack is free. logA logB logC Let's Revisit the Initial Example console.log("A");
setTimeout(function logB() {
    console.log("B");
}, 0);
console.log("C"); The call goes through the callback queue, so it runs after . That's why you'll see , , and then in the console. Give it a try yourself on . setTimeout console.log("C") A C B loupe - example 5 The setTimeout When you use , it won't actually happen instantly in 0 milliseconds. Instead, there will be a few milliseconds that pass before the code executes. setTimeout(..., 0) This delay occurs because the code needs to go through the browser to schedule a timer for 0 milliseconds, then it enters the and waits for the to be empty before running. callback queue call stack JavaScript Video Highlights: Event Loop & Similar APIs I want to share some great videos with you that I think you'll find really helpful and interesting. One of the most-watched talks in the JavaScript community is Philip Roberts’ talk at JS Conf. It's a fantastic talk, and there's a good reason why so many people love it. By the way, Philip Roberts is also the creator of the tool that you've been using in this post. loupe Pretty cool, right? https://www.youtube.com/watch?v=8aGhZQkoFbQ&embedable=true I really think you should set aside some time to watch his 25-minute talk on the event loop titled What the heck is the event loop anyway? Believe me, this video will teach you so much. I still go back to it every now and then to refresh my knowledge. https://www.youtube.com/watch?v=cCOL7MC4Pl0&embedable=true And guess what? There's a of this topic available, which covers other similar APIs. It's called by Jake Archibald. I also recommend checking it out. I hope you enjoy these videos and find them valuable for your career 😃 newer version In the Loop Keep Exploring Hacker You did an amazing job 🥳 I've worked hard to demystify the event loop and provide you with clear explanations and examples. Remember, learning about the event loop is an ongoing process. It's completely normal to face challenges along the way, so don't hesitate to ask me any questions. Your feedback and concerns mean a lot to me, so please share them in the comments below. If you found this article helpful, make sure to click the ❤️ button on the top right. Also, feel free to explore my other recent posts on HackerNoon (just scroll down a bit to find them). Keep up the great work on your learning journey, and happy coding 👋

Too Long; Didn't Read

Making security fun one episode at a time

Understanding the Javascript Event Loop (Everything You Need to Know)

Too Long; Didn't Read

Sojin Samuel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Understanding the Javascript Event Loop (Everything You Need to Know)

Too Long; Didn't Read

Sojin Samuel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES