DEV Community

Cover image for Quiz📣: How Well Do You Understand Asynchronous JavaScript?
Ekaterina Vujasinović for DITDOT

Posted on

Quiz📣: How Well Do You Understand Asynchronous JavaScript?

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'))
Enter fullscreen mode Exit fullscreen mode

Show the answer 👇
promise 
timeout
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Show the answer 👇
/* B */ 1
/* D */ 3
/* C */ 3
/* A */ 3
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

Show the answer 👇
B
A
C
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

Show the answer 👇
B
C
A
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (11)

Collapse
rammina profile image
Rammina

That was fun! My knowledge of async JavaScript kind of is lacking.

Collapse
ekaterina_vu profile image
Ekaterina Vujasinović Author

Thanks Rammina!

Collapse
zalithka profile image
Andre Greeff

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!

Collapse
ekaterina_vu profile image
Ekaterina Vujasinović Author

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.

Collapse
abdelrahman_dwedar profile image
‘Abdelraḥman Dwedar 👨🏻‍💻🇵🇸

I hope that this quistion doesn't annoy you, how can I make this thing (details)?

Collapse
ekaterina_vu profile image
Ekaterina Vujasinović Author

Hi Abdelrahman, I'm not sure what is the question here. Is there supposed to be some link in the details?

Collapse
abdelrahman_dwedar profile image
‘Abdelraḥman Dwedar 👨🏻‍💻🇵🇸

No problem at all, I found how to make it.

CLICK ME
This is what I maen

Thanks for publishing btw. 😊

Collapse
sshahzaiib profile image
Shähzåïß

This one was pretty refreshing
Thanks for sharing

Collapse
davenguyenhuy profile image
Nguyen Huy Cuong • Edited on

Thanks, I have to re-fresh my knowledge :( :(

Collapse
ekaterina_vu profile image
Ekaterina Vujasinović Author

Yeah, asynchronous code can be frustrating . It's probably the hardest part of JavaScript.