Intro to JavaScript Promises — One Piece Edition ☠️🏴‍☠️

In this guide, we'll embark on an adventure to understand JavaScript Promises, using examples from the thrilling world of One Piece. We'll explore why Promises are powerful, how they compare to older methods, and how they can help you handle asynchronous operations more effectively.

Introduction to Promises

Imagine you're Monkey D. Luffy, captain of the Straw Hat Pirates, coordinating various tasks to find the One Piece. Some tasks take time, and you don't want to wait idle for each to complete. Promises in JavaScript are like your trusted crewmates who promise to return with results in the future.

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

Creating a Promise

Let's dive into some examples.

Case 1: Successful Promise Resolution

Luffy wants to recruit a new crewmate who is at least 18 years old.

javascript

let recruitPromise = new Promise((resolve, reject) => {
  let age = 20;

  if (age >= 18) {
    resolve("Welcome aboard! 🎉");
  } else {
    reject("You're too young! 🙅‍♂️");
  }
});

recruitPromise.then((message) => console.log(message));

console.log(recruitPromise, typeof recruitPromise);

Why use Promises over older methods?

Clarity: Promises provide a cleaner way to handle asynchronous code compared to callbacks.
Error Handling: Easier to handle errors with .catch().

If we run the code, what will be logged to the console?

Answer

It will log "Welcome aboard! 🎉" from the .then() handler.
It will also log the Promise object and "object" as its type.

Try It Out

Modify the age to 16 and observe what happens.

Task

Change let age = 20; to let age = 16;.
Run the code and see the output.

What happens when the Promise is rejected but no .catch() is provided?

Common Pitfall

If a Promise is rejected and there's no .catch(), it leads to an Unhandled Promise Rejection error.

When we run the code with age = 16, we'll see an error:

Uncaught (in promise) You're too young! 🙅‍♂️

To handle this, we need to add a .catch() method.

Case 2: Handling Rejection with `.catch()`

Let's handle the rejection properly.

javascript

let recruitPromise = new Promise((resolve, reject) => {
  let age = 16;

  if (age >= 18) {
    resolve("Welcome aboard! 🎉");
  } else {
    reject("You're too young! 🙅‍♂️");
  }
});

recruitPromise
  .then((message) => console.log(message))
  .catch((error) => console.log("Sorry, " + error));

Now, when the Promise is rejected, what will be the output?

Answer

Sorry, You're too young! 🙅‍♂️

Case 3: Chaining `.then()` Methods

Sanji is cooking a meal, and each step depends on the previous.

javascript

let cookingPromise = new Promise((resolve, reject) => {
  let ingredientsAvailable = true;

  if (ingredientsAvailable) {
    resolve("Ingredients ready 🥕");
  } else {
    reject("Ingredients missing ❌");
  }
});

cookingPromise
  .then((message) => message + ", starting to cook 🍳")
  .then((message) => message + ", meal is ready 🍛")
  .then((message) => console.log(message))
  .catch((error) => console.log("Oh no! " + error));

If ingredientsAvailable is true, what will be the output?

Answer

Ingredients ready 🥕, starting to cook 🍳, meal is ready 🍛

Try It Out

Set ingredientsAvailable to false and see what happens.

Task

Change let ingredientsAvailable = true; to let ingredientsAvailable = false;.
Run the code and observe the output.

What happens to the .then() chain when the Promise is rejected?

Common Pitfall

When a Promise is rejected, all subsequent .then() methods are skipped, and control goes to the .catch() block.

The output will be:

Oh no! Ingredients missing ❌

Case 4: Continuing After `.catch()`

Zoro gets lost but wants to continue his journey.

javascript

let journeyPromise = new Promise((resolve, reject) => {
  let knowsDirection = false;

  if (knowsDirection) {
    resolve("On the right path 🗺️");
  } else {
    reject("Lost in the woods 🌳");
  }
});

journeyPromise
  .then((message) => message + ", moving forward 🚶")
  .catch((error) => {
    console.log("Oops! " + error);
    return "But I won't give up! 💪";
  })
  .then((message) => console.log(message));

After handling the error in .catch(), the chain continues.

What will be the output?

Answer

Oops! Lost in the woods 🌳
But I won't give up! 💪

Important Note

If you return a value from the .catch() block, it will be passed to the next .then().

Case 5: Asynchronous Operations with `setTimeout`

Usopp is preparing his slingshot, which takes some time.

javascript

let prepareWeapon = new Promise((resolve, reject) => {
  let hasAmmo = true;

  if (hasAmmo) {
    setTimeout(() => {
      resolve("Weapon ready 🎯");
    }, 2000);
  } else {
    reject("Out of ammo 🔋");
  }
});

prepareWeapon
  .then((message) => message + ", aiming at target 🎯")
  .then((message) => console.log(message))
  .catch((error) => console.log("Oh no! " + error));

After 2 seconds, what will be logged?

Answer

Weapon ready 🎯, aiming at target 🎯

Try It Out

Set hasAmmo to false and observe what happens.

Task

Change let hasAmmo = true; to let hasAmmo = false;.
Run the code and see the output.

When hasAmmo is false, the output will be:

Oh no! Out of ammo 🔋

Case 6: Chaining After Rejection

Nami tries to retrieve a treasure map, but sometimes the map is unavailable.

javascript

let fetchMap = new Promise((resolve, reject) => {
  let mapAvailable = false;

  setTimeout(() => {
    if (mapAvailable) {
      resolve({ map: "Grand Line Map 🗺️" });
    } else {
      reject("Map not found 🚫");
    }
  }, 3000);
});

fetchMap
  .then((data) => data.map)
  .then((map) => map.toUpperCase())
  .then((map) => console.log("Transformed Map:", map))
  .catch((error) => {
    console.log("Error:", error);
    return "Using alternative route 🌊";
  })
  .then((message) => console.log(message));

What will happen after 3 seconds?

Answer

Error: Map not found 🚫
Using alternative route 🌊

Understanding

After the .catch(), the chain continues, and we can provide an alternative solution.

Case 7: Multiple Scenarios and Error Handling

Franky is building a new ship, but he needs special materials.

javascript

let buildShip = new Promise((resolve, reject) => {
  let materialsAvailable = false;
  let budget = 1000000; // in Berries

  setTimeout(() => {
    if (materialsAvailable && budget >= 500000) {
      resolve("Ship is built 🚢");
    } else if (!materialsAvailable) {
      reject("Materials missing 🧱");
    } else if (budget < 500000) {
      reject("Not enough budget 💰");
    }
  }, 2000);
});

buildShip
  .then((message) => console.log(message))
  .catch((error) => {
    console.log("Problem encountered: " + error);
    return "Initiating backup plan 🔧";
  })
  .then((nextStep) => console.log(nextStep));

What will be the output?

Answer

Problem encountered: Materials missing 🧱
Initiating backup plan 🔧

Try It Out

Set materialsAvailable to true and budget to 400000.
What happens now?

Task

Change let materialsAvailable = false; to let materialsAvailable = true;.
Change let budget = 1000000; to let budget = 400000;.
Run the code.

Answer

Problem encountered: Not enough budget 💰
Initiating backup plan 🔧

Common Pitfalls

Common Pitfall

Forgetting to handle rejections: Always include a .catch() block to handle errors.
Not returning from .then() or .catch(): To pass values down the chain, you must return them.
Assuming .then() runs after .catch(): Once a Promise is rejected and caught, the chain continues from the next .then() after the .catch().

Tasks for Practice

Task 1: Luffy Waiting for Meat

Create a Promise that simulates Luffy waiting for meat to cook, which takes 2 seconds. If meatAvailable is true, resolve with "Meat is ready 🍖"; otherwise, reject with "No meat available 😢".

Task

javascript

let cookMeat = new Promise((resolve, reject) => {
  let meatAvailable = true;

  // Your code here
});

cookMeat
  .then((message) => console.log(message))
  .catch((error) => console.log(error));

Solution

javascript

let cookMeat = new Promise((resolve, reject) => {
  let meatAvailable = true;

  setTimeout(() => {
    if (meatAvailable) {
      resolve("Meat is ready 🍖");
    } else {
      reject("No meat available 😢");
    }
  }, 2000);
});

cookMeat
  .then((message) => console.log(message))
  .catch((error) => console.log(error));

Task 2: Chopper's Medicine

Chopper is preparing medicine, which takes 3 seconds. If ingredientsAvailable is true, resolve with "Medicine ready 💊"; otherwise, reject with "Ingredients missing 🚫". Chain .then() methods to simulate giving the medicine to Luffy.

Task

Create the Promise with a setTimeout.
Handle both resolved and rejected cases.
Chain .then() methods to log "Giving medicine to Luffy 🏃‍♂️" and "Luffy is healed! 🎉".

Solution

javascript

let prepareMedicine = new Promise((resolve, reject) => {
  let ingredientsAvailable = true;

  setTimeout(() => {
    if (ingredientsAvailable) {
      resolve("Medicine ready 💊");
    } else {
      reject("Ingredients missing 🚫");
    }
  }, 3000);
});

prepareMedicine
  .then((message) => {
    console.log(message);
    return "Giving medicine to Luffy 🏃‍♂️";
  })
  .then((action) => {
    console.log(action);
    return "Luffy is healed! 🎉";
  })
  .then((result) => console.log(result))
  .catch((error) => console.log("Oh no! " + error));

Task 3: Robin's Research

Robin is searching for Poneglyphs. The search takes 4 seconds. If locationKnown is true, resolve with "Found Poneglyph 📜"; otherwise, reject with "Location unknown ❓". Use .finally() to log "Search operation completed 🕵️‍♀️".

Task

Create a Promise with a setTimeout.
Use .then(), .catch(), and .finally().
Ensure the .finally() runs regardless of success or failure.

Solution

javascript

let searchPoneglyph = new Promise((resolve, reject) => {
  let locationKnown = false;

  setTimeout(() => {
    if (locationKnown) {
      resolve("Found Poneglyph 📜");
    } else {
      reject("Location unknown ❓");
    }
  }, 4000);
});

searchPoneglyph
  .then((message) => console.log(message))
  .catch((error) => console.log("Search failed: " + error))
  .finally(() => console.log("Search operation completed 🕵️‍♀️"));

Conclusion

Promises are essential for managing asynchronous operations in JavaScript.

Key Takeaways:

Use Promises to avoid callback hell.
Always handle both resolved and rejected cases.
Chain .then() and .catch() for sequential operations.
Utilize .finally() for code that runs regardless of the Promise outcome.

Happy coding, and may your JavaScript journey be as adventurous as Luffy's quest for the One Piece! ☠️

Intro to JavaScript Promises — One Piece Edition ☠️🏴‍☠️ ​

Introduction to Promises ​

Creating a Promise ​

Case 1: Successful Promise Resolution ​

Case 2: Handling Rejection with .catch() ​

Case 3: Chaining .then() Methods ​

Case 4: Continuing After .catch() ​

Case 5: Asynchronous Operations with setTimeout ​

Case 6: Chaining After Rejection ​

Case 7: Multiple Scenarios and Error Handling ​

Common Pitfalls ​

Tasks for Practice ​

Task 1: Luffy Waiting for Meat ​

Task 2: Chopper's Medicine ​

Task 3: Robin's Research ​

Conclusion ​

Intro to JavaScript Promises — One Piece Edition ☠️🏴‍☠️

Introduction to Promises

Creating a Promise

Case 1: Successful Promise Resolution

Case 2: Handling Rejection with `.catch()`

Case 3: Chaining `.then()` Methods

Case 4: Continuing After `.catch()`

Case 5: Asynchronous Operations with `setTimeout`

Case 6: Chaining After Rejection

Case 7: Multiple Scenarios and Error Handling

Common Pitfalls

Tasks for Practice

Task 1: Luffy Waiting for Meat

Task 2: Chopper's Medicine

Task 3: Robin's Research

Conclusion