Over the last few weeks, we had a lot of discussions on asynchronous JavaScript and patterns we use in our projects to build performant apps. It resulted in an article – 4 tips on writing better async/await code. Besides practical aspects like asynchronous coding patterns and best practices, one of the discussed topics was the importance of understanding how JavaScript handles asynchronous code under the hood.
Asynchronous code is passed to wait in one of the queues and executed whenever the call stack is empty. Tasks in the queues and call stack are coordinated by the event loop – the key mechanism used by JavaScript to avoid blocking the main thread. Learn more about it here.
We've collected 4 interesting examples of code (it looks like 4 is our favorite number 😉) that will help you test your knowledge of event loop and JavaScript asynchronous execution flow. Let's start ⏬
1. Which Queue Is Executed First?
Before diving deep into the event loop, call stack, and tasks, let's begin with a little warm-up question.
Not all queues were created equal. Knowing that setTimeout() callback is pushed to the task queue, and then() callback to the microtask queue, which one do you think will log first?
// Task queue setTimeout(() => console.log('timeout'), 0) // Microtask queue Promise.resolve().then(() => console.log('promise')) Show the answer 👇
promise timeout The tasks scheduled in the task queue will run first. But wait, how come the output logged from the setTimeout() callback appears second in our example?
In each iteration, the event loop will run the oldest initially existing task in the task queue first, and all the microtasks in the microtask queue second. When the event loop starts its first iteration, the task queue contains only one task – the main program script run. The setTimeout() callback is added to the task queue during the first iteration and will be queued from tasks only during the next iteration.
To better understand these mind-blowing concepts, check this animated diagram by Jake Archibald.
2. What Is the Output of the Code Below?
To answer this question, you need to be familiar with the concepts like synchronous vs. asynchronous code order of execution and how the event loop is running tasks.
Equally important, you also need to know which code runs synchronously and which asynchronously. Hint: not all Promise-related code is asynchronous. 🤯
There are four console.log() calls below. What will be logged in the console and in which order?
let a = 1 setTimeout(() => { console.log(a) //A a = 2 }, 0) const p = new Promise(resolve => { console.log(a) // B a = 3 resolve() }) p.then(() => console.log(a)) // C console.log(a) // D Show the answer 👇
/* B */ 1 /* D */ 3 /* C */ 3 /* A */ 3 The code inside the new Promise executor function runs synchronously before the Promise goes to a resolved state (when resolve() is called). For this reason example code logs 1 and sets variable a value to 3.
The variable value remains unchanged in all further console.log()calls.
3. In What Order Will Letters Be Logged?
How do DOM events fit in the event loop task handling mechanism? What we have here is a div container containing a button element. Event listeners are added to both the button and the container. Since the click event will bubble up, both listener handlers will be executed on a button click.
<div id="container"> <button id="button">Click</button> </div> What is the output after button click?
const container = document.getElementById('container'), button = document.getElementById('button') button.addEventListener('click', () => { Promise.resolve().then(() => console.log('A')) console.log('B') }) container.addEventListener('click', () => console.log('C')) Show the answer 👇
B A C No surprise here. The task of dispatching click event and executing handler will be invoked via the event loop, with synchronous code logging first and then() callback logging second. Next, the event bubbles up and the container event handler is executed.
4. Will the Output Change?
The code is the same as in the previous example, with a small addition of button.click() at the end. It is a weird UI design pattern where the button is clicked automatically. Do you think it's a game-changer or logging order stays the same? 🤔
const container = document.getElementById('container'), button = document.getElementById('button') button.addEventListener('click', () => { Promise.resolve().then(() => console.log('A')) console.log('B') }) container.addEventListener('click', () => console.log('C')) button.click() Show the answer 👇
B C A The strings are indeed logged in different order. button.click() is making all the difference, sitting at the bottom of the call stack and preventing microtask queue tasks from executing. Only after the call stack is emptied, () => console.log('A') will be queued from the microtasks.
Feel free to share your mind-boggling async & event loop related code examples in the comments ✍️. Don't forget to ❤️ and follow for more web dev content.