জাভাস্ক্রিপ্টের Promises এবং async/await – একদম ডিটেইলস গাইড

📌 কেন দরকার?

JavaScript হলো single-threaded asynchronous language।
তাই, অনেক কাজ (যেমন API calls, file reads, time delay) সময় নেয় এবং non-blocking ভাবে করতে হয়। এই সমস্যা সমাধানে আগে callback, পরে Promises, এবং এখন async/await এসেছে।

1️⃣ 🔗 Promise – কী এবং কেন?

📖 সংজ্ঞা:

Promise হলো JavaScript-এর একটি অবজেক্ট যা future-এ কোনো async কাজ সফল (resolved) হবে না ব্যর্থ (rejected) হবে — এই কথা বোঝায়।

📦 Promise-এর তিনটি অবস্থা:

✅ Basic Example:

const myPromise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("✅ Done!");
  } else {
    reject("❌ Failed!");
  }
});

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

🔁 Practical Example (API Call Simulation):

function getUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { name: "Yasir", age: 25 };
      resolve(user);
    }, 1000);
  });
}

getUserData()
  .then((data) => console.log("User:", data))
  .catch((err) => console.log("Error:", err));

2️⃣ 🧠 async/await – Promises এর সহজ রূপ

📖 সংজ্ঞা:

async/await হলো Promise-এর উপর ভিত্তি করে গঠিত একটি modern syntax, যেটা asynchronous কাজকে synchronous style-এ লিখতে সাহায্য করে।

⚙️ async কী?

• কোনো ফাংশনের আগে async লিখলে সেটা স্বয়ংক্রিয়ভাবে একটি Promise রিটার্ন করে।

⚙️ await কী?

• await কেবল async ফাংশনের ভিতরে ব্যবহার করা যায়
• এটি বলে: “এই Promise শেষ না হওয়া পর্যন্ত পরবর্তী কোড অপেক্ষা করুক”

✅ Basic async/await Example:

async function fetchData() {
  try {
    const data = await getUserData();
    console.log("User:", data);
  } catch (err) {
    console.error("Error:", err);
  }
}

fetchData();

🎯 async/await এর সুবিধা:

• কোড পরিষ্কার ও পড়তে সহজ
• Error handling সহজ (try/catch)
• Callback hell / chaining থেকে মুক্তি

⚖️ Promise vs async/await পার্থক্য

💼 ইন্টারভিউতে জিজ্ঞেস হয় এমন প্রশ্ন

✅ সাধারণ প্রশ্ন:

1. What is a Promise in JavaScript?
2. How is async/await different from Promises?
3. Can you use await outside async function?
4. What are the states of a Promise?
5. How to handle multiple Promises?

✅ কোড-ভিত্তিক প্রশ্ন:

// Output কী হবে?
function test() {
  return Promise.resolve("Hello");
}
console.log(test());

async function test2() {
  return "Hello";
}
console.log(test2());

✅ উত্তর:

উভয়েই Promise return করে।

🔁 Advanced: Promise.all, Promise.race

🔹 Promise.all(): সব Promise সফল হলে কাজ করে

Promise.all([fetchA(), fetchB(), fetchC()])
  .then(([a, b, c]) => {
    // All success
  })
  .catch((err) => {
    // যদি একটি fail হয়
  });

🔹 Promise.race(): যেটি আগে resolve/reject হয়, সেটি return করে

Promise.race([slowPromise(), fastPromise()]).then((val) =>
  console.log("Winner:", val)
);

🧪 Common Mistakes:

🧾 উপসংহার:

অবশ্যই! নিচে আমি Promises ও async/await-এর উপর ইন্টারভিউ এবং সাধারণভাবে গুরুত্বপূর্ণ প্রশ্নগুলোর বাংলায় বিস্তারিত ব্যাখ্যা করছি।

1️⃣ What is a Promise in JavaScript?

📖 Promise কী?

JavaScript-এ Promise হলো একটি অবজেক্ট যা কোনো আসন্ন (asynchronous) কাজের ফলাফলকে প্রতিনিধিত্ব করে। এটি একটি অবস্থা ধারণ করে, যার মধ্যে কাজটি সম্পন্ন হতে পারে (resolved) বা ব্যর্থ (rejected) হতে পারে।

Promise এর তিনটি অবস্থা (States):

1. Pending (অপূর্ণ): Promise এখনও unresolved, কাজটি চলছে।
2. Fulfilled (সম্পন্ন): Promise সফলভাবে resolve হয়ে গেছে।
3. Rejected (অবিশ্বাসিত): Promise কোনো কারণে fail হয়ে গেছে।

যখন Promise resolve হয়, তখন আপনি .then() মেথড ব্যবহার করে তার ফলাফল পেতে পারেন। আর যখন Promise reject হয়, তখন .catch() ব্যবহার করে error handle করতে পারেন।

✅ উদাহরণ:

const promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Success!"); // কাজ সফল
  } else {
    reject("Failure!"); // কাজ ব্যর্থ
  }
});

promise
  .then((result) => {
    console.log(result); // Success!
  })
  .catch((error) => {
    console.log(error); // Failure!
  });

2️⃣ How is async/await different from Promises?

📖 Promises এবং async/await এর মধ্যে পার্থক্য:

• Promises: .then() ও .catch() ব্যবহার করে asynchronous কাজ সম্পন্ন করা হয়।
• async/await: এটি Promise এর উপর ভিত্তি করে তৈরি, তবে এটি কোডকে সিঙ্ক্রোনাস (synchronous) স্টাইলে লেখার সুবিধা দেয়।

async/await-এ, await ব্যবহার করলে কোডটি তখন পর্যন্ত অপেক্ষা করবে যতক্ষণ না Promise পূর্ণ (resolved) বা ব্যর্থ (rejected) হবে। এটি কোডের readability এবং error handling কে আরও সহজ করে দেয়।

✅ উদাহরণ:

Promise style:

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

async/await style:

async function getData() {
  try {
    const data = await fetchData(); // Promise resolve হওয়ার পর অপেক্ষা করবে
    console.log(data);
  } catch (error) {
    console.log(error); // Error handling
  }
}

P.S: async/await ব্যবহারে কোড বেশি পরিষ্কার ও সোজা হয়, এবং error handling-ও অনেক সহজ।

3️⃣ Can you use await outside an async function?

📖 await কি async function ছাড়া ব্যবহার করা যাবে?

না, await কেবল async ফাংশনের ভিতরে ব্যবহার করা যেতে পারে। যদি আপনি await কে কোনো সাধারণ ফাংশনের বাইরে ব্যবহার করেন, তাহলে JavaScript একটি SyntaxError ছুঁড়ে দিবে।

✅ উদাহরণ:

সঠিক ব্যবহার (inside async function):

async function fetchData() {
  const result = await fetch("https://api.example.com");
  console.log(result);
}

ভুল ব্যবহার (outside async function):

const result = await fetch("https://api.example.com"); // SyntaxError: await is only valid in async functions

4️⃣ What are the states of a Promise?

📖 Promise এর তিনটি অবস্থা:

Promise তিনটি অবস্থায় থাকতে পারে:

1. Pending (অপূর্ণ): Promise শুরু হয়েছে কিন্তু ফলাফল পাওয়া যায়নি (এখনো কাজ চলছে)।
2. Fulfilled (সম্পন্ন): Promise সফলভাবে পূর্ণ হয়েছে এবং ফলাফল পাওয়া গেছে।
3. Rejected (অবিশ্বাসিত): Promise কোনো কারণে ব্যর্থ হয়েছে, যেমন: নেটওয়ার্ক এরর বা অন্যান্য সমস্যা।

✅ উদাহরণ:

const promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Data fetched successfully!");
  } else {
    reject("Failed to fetch data.");
  }
});

promise
  .then((result) => console.log(result)) // Success case
  .catch((error) => console.log(error)); // Failure case

5️⃣ How to handle multiple Promises?

📖 Multiple Promises কে কিভাবে handle করবেন?

একাধিক Promise কে একসাথে handle করার জন্য কিছু Promise utility আছে। এর মধ্যে সবচেয়ে পরিচিত হল Promise.all(), Promise.race(), এবং Promise.allSettled()।

✅ 1. Promise.all()

Promise.all() ব্যবহার করলে, সব Promise সফল হলে then() এ result পাওয়া যাবে, আর যদি কোনো একটি Promise fail হয়, তাহলে সব Promise reject হয়ে যাবে। অর্থাৎ, এটি সবকটি Promise একসাথে handle করে।

const promise1 = Promise.resolve("Data 1");
const promise2 = Promise.resolve("Data 2");

Promise.all([promise1, promise2])
  .then((values) => console.log(values)) // ["Data 1", "Data 2"]
  .catch((error) => console.error(error));

✅ 2. Promise.race()

Promise.race() ব্যবহার করলে, যেটি প্রথম resolve বা reject হবে, সেই Promise এর result পাওয়া যাবে। এটি মূলত প্রথম প্রাপ্ত Promise কে handle করে।

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, "Data 1"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Data 2"));

Promise.race([promise1, promise2])
  .then((value) => console.log(value)) // "Data 2"
  .catch((error) => console.error(error));

✅ 3. Promise.allSettled()

Promise.allSettled() ব্যবহার করলে, সব Promise শেষ হওয়ার পরে তার ফলাফল পাওয়া যায়, তাহলে সে fulfilled বা rejected যাই হোক না কেন।

const promise1 = Promise.resolve("Data 1");
const promise2 = Promise.reject("Error");

Promise.allSettled([promise1, promise2]).then((results) =>
  console.log(results)
); // [{status: 'fulfilled', value: 'Data 1'}, {status: 'rejected', reason: 'Error'}]

📝 উপসংহার:

• Promise হলো asynchronous কাজের জন্য একটি অবজেক্ট যা resolved বা rejected হতে পারে।
• async/await হলো Promise এর উপর ভিত্তি করে লেখা সহজ কোডের স্টাইল, যেখানে await Promise পূর্ণ হওয়া পর্যন্ত অপেক্ষা করে।
• Promise-এর তিনটি অবস্থা: pending, fulfilled, rejected।
• একাধিক Promise handle করার জন্য Promise.all(), Promise.race(), এবং Promise.allSettled() ব্যবহার করা হয়।