What is the Event Loop? A Simple Explanation

Interview Question: 'Can you explain the Event Loop?'

This is a core concept question. A simple analogy works best.

The simple answer: 'JavaScript is single-threaded, meaning it has one Call Stack. When it encounters an async operation (like a setTimeout or an API fetch), it hands it off to the Web API in the browser. JavaScript then continues running other code. Once the async operation is finished, its callback function is placed in the Callback Queue. The Event Loop's one and only job is to constantly check: 'Is the Call Stack empty?' If it is, the Event Loop takes the first item from the Queue and pushes it onto the Stack to be executed.'

This is why a setTimeout(fn, 0) doesn't run immediately—it still goes through the whole loop.

Code Example: Demonstrating the Loop

An interviewer might ask you what this code logs to the console. This is a classic test.

console.log('A: Start');

// This is handed off to the Web API
setTimeout(() => {
  console.log('B: Inside setTimeout');
}, 0);

// This is a Promise, so it goes to the Microtask Queue
// which has priority over the main Callback Queue
Promise.resolve().then(() => {
  console.log('C: Inside Promise.then()');
});

console.log('D: End');

// --- CONSOLE OUTPUT --- 
// A: Start
// D: End
// C: Inside Promise.then() (Microtask Queue runs first!)
// B: Inside setTimeout (Callback Queue runs after Microtasks)

Bonus Point: Mentioning the Microtask Queue (for Promises) vs. the Callback Queue (for setTimeout) is a senior-level move. Microtasks always execute before Macrotasks (Callbacks).

Callbacks vs. Promises: Solving the 'Pyramid of Doom'

Interview Question: 'What problem do Promises solve?'

Answer: 'Promises solve two main problems: 1) They provide a cleaner, chainable way to handle async operations, and 2) They solve 'Callback Hell', also known as the 'Pyramid of Doom'.'

The 'Before' Problem: Callback Hell

Imagine you need to make three API calls in order, where each call depends on the one before it. With callbacks, you get this ugly, nested 'pyramid':

function getUserData(userId, callback) {
  api.fetchUser(userId, (user) => {
    // 1. First call
    api.fetchUserPosts(user.id, (posts) => {
      // 2. Second call, nested
      api.fetchPostComments(posts[0].id, (comments) => {
        // 3. Third call, nested deeper
        console.log('Got the comments:', comments);
        callback(comments);
      }, (err) => {
        // Error handling is also nested and must be repeated
        console.error('Error fetching comments', err);
      });
    }, (err) => {
      console.error('Error fetching posts', err);
    });
  }, (err) => {
    console.error('Error fetching user', err);
  });
}
// This is hard to read, hard to maintain, and hard to debug.

The 'After' Solution: Promises

Promises represent a future value. They can be in one of three states: pending, fulfilled (succeeded), or rejected (failed). They allow you to 'chain' operations using .then() and handle all errors in one place with .catch().

function getUserData(userId) {
  // Assume our API functions now return Promises
  api.fetchUser(userId)
    .then((user) => {
      // 1. First call. Return the next promise.
      return api.fetchUserPosts(user.id);
    })
    .then((posts) => {
      // 2. Second call. Chain is flat.
      return api.fetchPostComments(posts[0].id);
    })
    .then((comments) => {
      // 3. Third call. Value is here.
      console.log('Got the comments:', comments);
    })
    .catch((err) => {
      // 4. A single catch block handles all errors
      // from any step in the chain.
      console.error('An error occurred:', err);
    });
}
// This is clean, flat, and much more readable.

Async/Await: The Modern Way to Write Promises

Interview Question: 'What are async and await?'

Answer: 'async and await are modern (ES7) keywords that provide syntactic sugar on top of Promises. They let you write asynchronous code that looks and feels synchronous, making it much easier to read and maintain.'

How They Work:

• async: You put this keyword before a function declaration (e.g., async function myFunc()). This automatically makes the function return a Promise.
• await: You use this keyword inside an async function. You put it in front of any expression that returns a Promise (like an API call). The await keyword 'pauses' the function execution at that line until the Promise settles (fulfills or rejects).

Code Example: .then() vs. async/await

Let's take our Promise example from before and convert it.

'Before': Promise .then() chain

function getUserData(userId) {
  api.fetchUser(userId)
    .then((user) => api.fetchUserPosts(user.id))
    .then((posts) => api.fetchPostComments(posts[0].id))
    .then((comments) => console.log('Got the comments:', comments))
    .catch((err) => console.error('An error occurred:', err));
}

'After': async/await

Notice how clean this is. Error handling is done with a standard try...catch block, just like synchronous code.

// 1. Mark the function as 'async'
async function getUserData(userId) {
  try {
    // 2. 'await' the promise to get the value directly
    const user = await api.fetchUser(userId);

    // 3. This line won't run until 'user' is back
    const posts = await api.fetchUserPosts(user.id);

    // 4. This line won't run until 'posts' are back
    const comments = await api.fetchPostComments(posts[0].id);

    console.log('Got the comments:', comments);

  } catch (err) {
    // 5. All errors are caught in one simple block
    console.error('An error occurred:', err);
  }
}
// This code is much easier for the human brain to follow.

Promise.all() vs. Promise.allSettled()

Interview Question: 'What's the difference between Promise.all and Promise.allSettled?'

This is a great question to test your knowledge of advanced Promise patterns. Both are used to run multiple promises in parallel, but they handle errors very differently.

1. Promise.all() - The 'Fail-Fast' Method

Promise.all takes an array of promises and waits for all of them to fulfill. It returns a single promise that resolves with an array of the results.

The Catch (The 'Fail-Fast' Behavior): If any single promise in the array rejects, the entire Promise.all immediately rejects with that one error. You get no data from the other promises that might have succeeded.

When to use it: When all requests are critical and must all succeed for the operation to be valid. (e.g., 'Fetch user data' AND 'Fetch user permissions'. If permissions fail, don't show the user data).

Code Example: Promise.all()

const promise1 = Promise.resolve('Success 1');
const promise2 = Promise.reject('ERROR! 2');
const promise3 = Promise.resolve('Success 3');

async function runAll() {
  try {
    const results = await Promise.all([promise1, promise2, promise3]);
    console.log(results);
  } catch (err) {
    // This will run immediately when promise2 rejects
    console.error(err); // Output: 'ERROR! 2'
    // We get no results, not even 'Success 1' or 'Success 3'
  }
}
runAll();

2. Promise.allSettled() - The 'Wait-for-All' Method

Promise.allSettled also takes an array of promises. It waits for all of them to either fulfill or reject (i.e., 'settle').

It never rejects. It always returns a promise that fulfills with an array of 'status' objects. Each object tells you if that specific promise fulfilled (and its value) or rejected (and its reason).

When to use it: When you want to run multiple independent tasks and want to know the outcome of all of them, even if some fail. (e.g., 'Fetch 3 different unrelated widgets for a dashboard. Show the ones that load, and show an error for the ones that fail.')

Code Example: Promise.allSettled()

const promise1 = Promise.resolve('Success 1');
const promise2 = Promise.reject('ERROR! 2');
const promise3 = Promise.resolve('Success 3');

async function runAllSettled() {
  // This 'try' block will always succeed
  try {
    const results = await Promise.allSettled([promise1, promise2, promise3]);
    console.log(results);
  } catch (err) {
    console.error('This will never run', err);
  }
}
runAllSettled();

// --- CONSOLE OUTPUT --- 
// [
//   { status: 'fulfilled', value: 'Success 1' },
//   { status: 'rejected', reason: 'ERROR! 2' },
//   { status: 'fulfilled', value: 'Success 3' }
// ]