Quiz📣: How Well Do You Understand Asynchronous JavaScript?
Tags: javascript, webdev, programming, quiz
Published: 2021-10-28 13:37:47

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 - <mark>[4 tips on writing better async/await code](https://www.ditdot.hr/en/4-tips-better-asynchronous-javascript-code)</mark>. 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](https://blog.bitsrc.io/understanding-asynchronous-javascript-the-event-loop-74cd408419ff).

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 <code>setTimeout()</code> callback is pushed to the task queue, and <code>then()</code> callback to the microtask queue, which one do you think will log first? 

```javascript
// Task queue 
setTimeout(() => console.log('timeout'), 0)

// Microtask queue 
Promise.resolve().then(() => console.log('promise'))
```
{% details Show the answer 👇 %} 

```javascript
promise 
timeout
```
The tasks scheduled in the task queue will run first. But wait, how come the output logged from the <code>setTimeout()</code> 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 <code>setTimeout()</code> 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 <a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#why-this-happens">animated diagram</a> by Jake Archibald.
{% enddetails %}

## 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 <code>console.log()</code> calls below.  What will be logged in the console and in which order? 

```javascript
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
```
{% details Show the answer 👇 %} 

```javascript
/* B */ 1
/* D */ 3
/* C */ 3
/* A */ 3
```
The code inside the <code>new Promise</code> executor function runs synchronously before the Promise goes to a resolved state (when `resolve()` is called). For this reason example code logs <code>1</code> and sets variable <code>a</code> value to <code>3</code>. 

The variable value remains unchanged in all further <code>console.log()</code>calls.
{% enddetails %}

## 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 <code>div</code> container containing a <code>button</code> 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. 

```html
<div id="container">
  <button id="button">Click</button>
</div>
```

What is the output after button click?

```javascript
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'))
```
{% details Show the answer 👇 %} 

```javascript
B
A
C
```
No surprise here. The task of dispatching <code>click</code> event and executing handler will be invoked via the event loop, with synchronous code logging first and <code>then()</code> callback logging second. Next, the event bubbles up and the container event handler is executed.
{% enddetails %}

## 4. Will the Output Change? 

The code is the same as in the previous example, with a small addition of <code>button.click()</code> 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? 🤔

```javascript
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()
```
{% details Show the answer 👇 %} 

```javascript
B
C
A
```
The strings are indeed logged in different order. <code>button.click()</code> 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, <code>() => console.log('A')</code> will be queued from the microtasks.
{% enddetails %}

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.