Top 5 JavaScript Interview Problems (With Real-World Solutions)

Chapter 4: Callback vs Promise vs Async/Await (with Real Challenges)

🧠 Why This Matters

Asynchronous JavaScript is at the core of:

• APIs
• User interactions
• Timers
• Animation
• I/O in Node.js

In interviews, async questions are used to test:

• Your mental model of the event loop
• How well you write non-blocking, readable code
• Your ability to handle errors, chaining, and real-world async flows

In this chapter, we’ll cover:

• The evolution: Callbacks → Promises → Async/Await
• Real-world async bugs and how to fix them
• Interview challenges that require restructuring async logic

📍 1. Callbacks — The OG Asynchronous Tool

A callback is just a function passed as an argument to another function, often executed after an async operation.

✅ Basic Callback Example

function fetchData(callback) {

  setTimeout(() => {

    callback("Data loaded");

  }, 1000);

}

fetchData(data => {

  console.log(data); // ✅ "Data loaded"

});

❌ Callback Hell

getUser(id, function (user) {

  getPosts(user, function (posts) {

    getComments(posts[0], function (comments) {

      // 😵 deeply nested mess

    });

  });

});

Hard to read, debug, and maintain. This is why Promises were born.

🔁 2. Promises — Cleaner Async

A Promise represents a value that may be available now, later, or never.

✅ Basic Promise Example

function fetchData() {

  return new Promise((resolve, reject) => {

    setTimeout(() => resolve("Data loaded"), 1000);

  });

}

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

⚠️ Error Handling in Promises

fetchData()

  .then(data => {

    throw new Error("Oops");

  })

  .catch(err => console.error(err.message)); // "Oops"

⚡ 3. Async/Await — Syntactic Sugar on Promises

async function loadData() {

  try {

    const data = await fetchData();

    console.log(data);

  } catch (err) {

    console.error(err.message);

  }

}

✅ Cleaner, more readable, easier to debug than .then() chains

🚀 Real Interview Challenge #1: Convert Callback to Promise

function loadUser(id, callback) {

  setTimeout(() => {

    callback({ id, name: "Zara" });

  }, 1000);

}

// ❓ Convert to return a Promise

✅ Solution:

function loadUser(id) {

  return new Promise(resolve => {

    setTimeout(() => {

      resolve({ id, name: "Zara" });

    }, 1000);

  });

}

🚀 Real Interview Challenge #2: Sequential Async with Async/Await

You’re given:

function getUser() {

  return new Promise(resolve => setTimeout(() => resolve("User"), 1000));

}

function getPosts(user) {

  return new Promise(resolve => setTimeout(() => resolve([`${user}'s Post 1`, `${user}'s Post 2`]), 1000));

}

Task: Fetch user and then their posts using async/await.

✅ Solution:

async function displayPosts() {

  const user = await getUser();

  const posts = await getPosts(user);

  console.log(posts);

}

🚀 Real Interview Challenge #3: Parallel vs Sequential Calls

const task1 = () => new Promise(res => setTimeout(() => res("1 done"), 1000));

const task2 = () => new Promise(res => setTimeout(() => res("2 done"), 1000));

const task3 = () => new Promise(res => setTimeout(() => res("3 done"), 1000));

A. Sequential Version (takes ~3s)

async function runTasks() {

  console.log(await task1());

  console.log(await task2());

  console.log(await task3());

}

B. Parallel Version (takes ~1s)

async function runTasksParallel() {

  const [a, b, c] = await Promise.all([task1(), task2(), task3()]);

  console.log(a, b, c);

}

Use Promise.all when tasks are independent and can run in parallel.

🚀 Real Interview Challenge #4: Build a sleep() Function in JS

await sleep(2000);

console.log("Woke up!");

✅ Implementation:

function sleep(ms) {

  return new Promise(resolve => setTimeout(resolve, ms));

}

✅ Summary