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'))
The tasks scheduled in the task queue will run first. But wait, how come the output logged from the 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 To better understand these mind-blowing concepts, check this animated diagram by Jake Archibald.Show the answer š
promise
timeout
setTimeout()
callback appears second in our example?setTimeout()
callback is added to the task queue during the first iteration and will be queued from tasks only during the next iteration.
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
The code inside the The variable value remains unchanged in all further Show the answer š
/* B */ 1
/* D */ 3
/* C */ 3
/* A */ 3
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
. 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'))
No surprise here. The task of dispatching Show the answer š
B
A
C
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()
The strings are indeed logged in different order. Show the answer š
B
C
A
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.
Top comments (11)
That was fun! My knowledge of async JavaScript kind of is lacking.
Thanks Rammina!
well well, 3 out of 4 isn't too bad (the explicit
button.click()
call caught me out).. that really did make me think though, I like it!Hi Andre, I'm glad you enjoyed it. The questions are a bit tricky, especially the last one and 3 out of 4 is a great result.
This one was pretty refreshing
Thanks for sharing
I hope that this quistion doesn't annoy you, how can I make this thing (details)?
Hi Abdelrahman, I'm not sure what is the question here. Is there supposed to be some link in the details?
No problem at all, I found how to make it.
CLICK ME
This is what I maen
Thanks for publishing btw. š
I have a problem with the UI
Thanks, I have to re-fresh my knowledge :( :(
Yeah, asynchronous code can be frustrating . It's probably the hardest part of JavaScript.