📘 JavaScript Promises Practice Worksheet

Practice and strengthen your knowledge of JavaScript Promises with these challenges and solutions.

🚀 Basic Promise Usage

1. Create a Promise that resolves after 2 seconds and logs a message.


const wait2Seconds = new Promise((resolve) => {
  setTimeout(() => {
    resolve("✅ Resolved after 2 seconds");
  }, 2000);
});

wait2Seconds.then(msg => console.log(msg));

2. Write a Promise that randomly resolves or rejects.


const randomOutcome = new Promise((resolve, reject) => {
  let success = Math.random() > 0.5;
  setTimeout(() => {
    if (success) {
      resolve("🎉 Success!");
    } else {
      reject("❌ Failure!");
    }
  }, 1000);
});

randomOutcome
  .then(res => console.log(res))
  .catch(err => console.log(err));

🔁 Chaining Promises

3. Chain multiple then() handlers.


new Promise((resolve) => {
  resolve(5);
})
  .then(num => {
    console.log("Step 1:", num);
    return num * 2;
  })
  .then(num => {
    console.log("Step 2:", num);
    return num * 2;
  })
  .then(num => {
    console.log("Step 3:", num);
  });

🧠 Using async/await

4. Rewrite the chain above using async/await.


async function doubleSteps() {
  let num = 5;
  console.log("Step 1:", num);
  num = num * 2;
  console.log("Step 2:", num);
  num = num * 2;
  console.log("Step 3:", num);
}

doubleSteps();

5. Use async/await to fetch user data from JSONPlaceholder.


async function getUser() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const data = await res.json();
    console.log("👤 User:", data.name);
  } catch (err) {
    console.error("Fetch failed:", err);
  }
}

getUser();

🧩 Advanced: Promise.all, race, any

6. Use Promise.all to wait for multiple promises.


const p1 = Promise.resolve("🍎 Apple");
const p2 = Promise.resolve("🍌 Banana");
const p3 = Promise.resolve("🍇 Grapes");

Promise.all([p1, p2, p3])
  .then(values => console.log("All fruits:", values));

7. Use Promise.race to get the first settled promise.


const fast = new Promise(res => setTimeout(() => res("⚡ Fast!"), 1000));
const slow = new Promise(res => setTimeout(() => res("🐢 Slow"), 3000));

Promise.race([fast, slow]).then(result => console.log("Winner:", result));

8. Use Promise.allSettled to get all results (even if some fail).


const pA = Promise.resolve("✅ Done A");
const pB = Promise.reject("❌ Failed B");
const pC = Promise.resolve("✅ Done C");

Promise.allSettled([pA, pB, pC])
  .then(results => console.log(results));

9. Use Promise.any to get the first fulfilled promise.


const fail1 = Promise.reject("Error 1");
const fail2 = Promise.reject("Error 2");
const success = Promise.resolve("🎯 Success!");

Promise.any([fail1, fail2, success])
  .then(result => console.log("First fulfilled:", result));

📝 Bonus: Common Interview Question

10. Convert a callback-based function into a Promise-based one.


// Callback style
function loadScript(src, callback) {
  const script = document.createElement("script");
  script.src = src;
  script.onload = () => callback(null, script);
  script.onerror = () => callback("Error loading");
  document.body.appendChild(script);
}

// Promise version
function loadScriptPromise(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject("Error loading script");
    document.body.appendChild(script);
  });
}

loadScriptPromise("https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js")
  .then(script => console.log("Script loaded:", script.src))
  .catch(err => console.error(err));