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'))

promise 
timeout

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

/* B */ 1
/* D */ 3
/* C */ 3
/* A */ 3

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'))

B
A
C

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()

B
C
A

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.