Event Loop & Async Execution

Question 1

What happens if a microtask keeps adding more microtasks?

Answer 1

JavaScript will continue processing microtasks indefinitely until no more microtasks are scheduled. This can cause the event loop to stall, preventing macrotasks (like setTimeout) from executing.

Question 2

Why do microtasks run before macrotasks?

Answer 2

Microtasks allow JavaScript to immediately handle updates (e.g., resolved Promises) before rendering. This ensures higher-priority tasks are handled before timers and I/O operations.

Question 3

Guess the output of the following code:
~~~
console.log(‘Start’);

setTimeout(() => console.log(‘Timeout 1’), 0);
setTimeout(() => console.log(‘Timeout 2’), 0);

Promise.resolve().then(() => {
console.log(‘Promise 1’);
return Promise.resolve();
}).then(() => console.log(‘Promise 2’));

console.log(‘End’);
~~~

Answer 3

Start
End
Promise 1
Promise 2
Timeout 1
Timeout 2

Question 4

Why does ‘Promise 1’ run before ‘Timeout 1’?

Answer 4

Sync code runs first (Start, End). Microtasks (Promise.then()) execute before macrotasks (setTimeout).

Question 5

What’s wrong with this async function?

  setTimeout(() => {
    return 'Data';
  }, 1000);
}

fetchData().then(data => console.log(data));

Answer 5

setTimeout does not return a Promise, so fetchData() immediately resolves to undefined.

Question 6

How can you fix the async function ‘fetchData’ to return data after a delay?

Answer 6

Wrap setTimeout in a Promise:

async function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve('Data'), 1000);
  });
}