JavaScript Promises are not just syntax. They are a way to manage TIME in JavaScript. Let’s break it down clearly 👇 🔹 What is a Promise? A Promise is an object that represents the eventual result of an asynchronous operation. That result can be: • successful • failed • or still waiting Think of a Promise as a “future value”. --- 🔹 Promise States (VERY IMPORTANT) A Promise has exactly THREE states: 1️⃣ Pending → Initial state → Neither fulfilled nor rejected 2️⃣ Fulfilled → Operation completed successfully → A value is available 3️⃣ Rejected → Operation failed → An error reason is available A promise can change state ONLY ONCE. --- 🔹 Creating a Promise const promise = new Promise((resolve, reject) => { const success = true; if (success) { resolve("Data received"); } else { reject("Something went wrong"); } }); --- 🔹 Consuming a Promise promise .then(data => { console.log(data); }) .catch(error => { console.log(error); }); • `.then()` → runs when fulfilled • `.catch()` → runs when rejected --- 🔹 Important Rule (Many Miss This) Promises themselves are NOT async. The callbacks registered by `.then()` and `.catch()` run asynchronously as MICROTASKS. That’s why: Promise.resolve().then(() => console.log("Promise")); setTimeout(() => console.log("Timeout"), 0); Output: Promise Timeout Promises have higher priority than timers. --- 🔹 Promise Chaining Promises can be chained to avoid callback hell. fetch("/api") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); Each `.then()` returns a NEW promise. --- 🔹 Promise Utilities (Common Interview Topic) • Promise.all() → waits for ALL promises → fails if ANY fails • Promise.allSettled() → waits for ALL → never fails • Promise.race() → resolves/rejects with the FIRST result • Promise.any() → resolves with FIRST fulfilled promise --- 🔹 async / await (Promise Syntax Sugar) async function loadData() { try { const data = await fetch("/api"); console.log(data); } catch (err) { console.error(err); } } `await` pauses the function. The rest runs as a microtask. --- 🔹 Common Mistakes ❌ Assuming promises run immediately ❌ Forgetting error handling ❌ Mixing callbacks and promises ❌ Not returning promises in `.then()` --- 🔹 Mental Model (Senior-Level) 1️⃣ Create a promise 2️⃣ Promise settles (fulfilled/rejected) 3️⃣ `.then()` / `.catch()` queued as microtasks 4️⃣ Event Loop decides execution --- 🔹 Why Promises Matter for Frontend Developers • Data fetching • React side effects • Performance optimization • Predictable async logic Frameworks depend heavily on promises. --- Once you truly understand promises, async code becomes predictable. Follow me for more **ultra-clear JavaScript & frontend explanations**🚀 #javascript #frontend #webdevelopment #interview
🔹 Promise Utilities (Interview Favorite) Promise.all() → waits for ALL → fails if ANY fails Promise.allSettled() → waits for ALL → never fails Promise.race() → first settled promise wins Promise.any() → first fulfilled promise wins Examples 👇 (see next comment)
const p1 = Promise.resolve("A"); const p2 = Promise.resolve("B"); const p3 = Promise.reject("Error"); Promise.all([p1, p2]); // ["A", "B"] Promise.allSettled([p1, p3]); // fulfilled + rejected results Promise.race([p1, p2]); // "A" Promise.any([p3, p1]); // "A"