JavaScript Promises and Async/Await for Frontend Development

𝟵𝟵% 𝗼𝗳 𝗝𝗦 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝘄𝗿𝗶𝘁𝗲 𝗮𝘀𝘆𝗻𝗰 𝗰𝗼𝗱𝗲 𝗱𝗮𝗶𝗹𝘆. 𝗕𝘂𝘁 𝗺𝗼𝘀𝘁 𝗰𝗮𝗻'𝘁 𝗲𝘅𝗽𝗹𝗮𝗶𝗻 𝘄𝗵𝘆 𝗶𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝘀. 👇 I didn't either until I learned about the JavaScript Runtime Environment. Here's the mental model that changed everything for me: JavaScript by itself is just a language. Runtime = Engine + APIs + Event Loop 🔥 What's actually running under the hood: ⚙️ JS Engine (V8) → converts code to machine code 📞 Call Stack → runs functions one by one 🌐 Web APIs → setTimeout, DOM, fetch (NOT part of JS itself!) 📬 Callback Queue → stores async callbacks ⚡ Microtask Queue → Promises, higher priority 🔄 Event Loop → the brain connecting everything The flow: Code → Call Stack → Web APIs → Queue → Event Loop → Call Stack Right now, try this 👇 console.log("Start"); setTimeout(() => console.log("Async"), 0); console.log("End"); Output → Start, End, Async 🤯 Even with 0 ms delay, "Async" prints LAST. That's the Event Loop doing its job. 🧠 Interview tip: Q: Why can JS handle async if it's single-threaded? A: The Runtime provides Web APIs + Event Loop + Queues — not the language. If this helped, repost ♻️ to help another developer. Follow Amit Prasad for daily updates on JavaScript and DSA 🔔 💬 Comment: Did you know that setTimeout 0ms still runs last? #JavaScript #WebDevelopment #Frontend #NodeJS #100DaysOfCode #DSA #Developer #CodingLife #TechLearning

🚀 **𝐃𝐚𝐲 5 – 𝐇𝐨𝐢𝐬𝐭𝐢𝐧𝐠 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 (𝐂𝐥𝐞𝐚𝐫 & 𝐏𝐫𝐚𝐜𝐭𝐢𝐜𝐚𝐥 𝐄𝐱𝐩𝐥𝐚𝐧𝐚𝐭𝐢𝐨𝐧)** You might have seen this 👇 👉 Using a variable before declaring it But why does this work? 🤔 --- 💡 **What is Hoisting?** Hoisting means: 👉 Before execution, JavaScript **allocates memory for variables and functions** 👉 In simple words: **Declarations are processed before code runs** --- 💡 **Example:** ```js id="d5pro1" console.log(a); var a = 10; ``` 👉 Output: `undefined` --- 💡 **What actually happens behind the scenes?** Before execution (Memory Phase): * `a` → undefined Then execution starts: * `console.log(a)` → prints undefined * `a = 10` --- 💡 **Important Rule** 👉 JavaScript only hoists **declarations**, not values --- 💡 **var vs let vs const** 👉 **var** * Hoisted * initialized as `undefined` * can be accessed before declaration 👉 **let & const** * Hoisted * BUT not initialized --- ⚠️ **Temporal Dead Zone (TDZ)** This is the time between: 👉 variable declared 👉 and initialized During this: ❌ Accessing variable → **ReferenceError** --- 💡 **Example:** ```js id="d5pro2" console.log(a); let a = 10; ``` 👉 Output: **ReferenceError** --- ⚡ **Key Insight (Very Important)** 👉 Hoisting is NOT moving code 👉 It’s just **memory allocation before execution** --- 💡 **Why this matters?** Because it helps you understand: * unexpected `undefined` values * ReferenceErrors * how JavaScript actually runs code --- 👨💻 Continuing my JavaScript fundamentals series 👉 Next: **JavaScript Runtime & Event Loop** 👀 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #SoftwareEngineer #Tech

What is the difference between shallow copy and deep copy? Copying objects in JavaScript is not always what it seems. A `shallow copy` duplicates only the first level. Nested objects are still shared by reference. A `deep copy` duplicates everything recursively. Why did this happen? - The top-level object was copied - But `address` still points to the same reference To fully isolate data, a deep copy is required. Understanding this is critical when: - Managing state - Avoiding unintended mutations - Debugging shared data issues The behaviour is subtle — but the impact is everywhere. #Frontend #JavaScript #WebDevelopment #SoftwareEngineering

JavaScript is easy. Until it isn't. 😅 Every developer has been there. You're confident. Your code looks clean. You hit run. And then: " Cannot read properties of undefined (reading 'map') " The classic JavaScript wall. Here are 7 JavaScript mistakes I see developers make constantly and how to fix them: 1. Not understanding async/await ⚡ → Wrong: | const data = fetch('https://lnkd.in/dMDBzbsK'); console.log(data); // Promise {pending} | → Right: | const data = await fetch('https://lnkd.in/dMDBzbsK'); | 2. Using var instead of let/const → var is function scoped and causes weird bugs → Always use const by default. let when you need to reassign. Never var. 3. == instead of === → 0 == "0" is true in JavaScript 😱 → Always use === for comparisons. Always. 4. Mutating state directly in React → Wrong: user.name = "Shoaib" → Right: setUser({...user, name: "Shoaib"}) 5. Forgetting to handle errors in async functions → Always wrap await calls in try/catch → Silent failures are the hardest bugs to track down 6. Not cleaning up useEffect in React → Memory leaks are real → Always return a cleanup function when subscribing to events 7. Treating arrays and objects as primitives → [] === [] is false in JavaScript → Reference types don't compare like numbers — learn this early JavaScript rewards the developers who understand its quirks. 💡 Which of these caught YOU off guard when you first learned it? 👇 #JavaScript #WebDevelopment #Frontend #FullStackDeveloper #React #Programming #CodingTips #Developer #Tech #Pakistan #LearnToCode #JS #SoftwareEngineering #100DaysOfCode #PakistaniDeveloper

🚀 Day 955 of #1000DaysOfCode ✨ How JavaScript Event Loop Works Behind the Curtains JavaScript looks simple on the surface — but under the hood, a lot is happening to make async code work smoothly. In today’s post, I’ve explained how the JavaScript Event Loop actually works behind the scenes, so you can understand how tasks are executed, queued, and prioritized. From the call stack to the callback queue and microtask queue, this concept explains why some functions run before others — even when the code looks sequential. Understanding the event loop helps you debug tricky async issues, avoid unexpected behavior, and write more predictable code. If you’re working with promises, async/await, or APIs, this is one of those concepts you must truly understand. 👇 What part of the event loop confuses you the most — call stack, microtasks, or callbacks? #Day955 #learningoftheday #1000daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #AsyncJavaScript

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? Optional chaining (?.) can save you from runtime errors when accessing deeply nested properties. Instead of writing multiple checks like: "user && user.profile && user.profile.name" You can simply write: "user?.profile?.name" 🔧 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝗺𝗮𝘁𝘁𝗲𝗿𝘀: - Cleaner and more readable code - Prevents “Cannot read property of undefined” errors - Makes defensive coding easier Small syntax, big readability win. #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #CodingTips #CleanCode #BestPractices #FullstackDeveloper

JavaScript isn’t asynchronous… the environment is. After diving deep into asynchronous JavaScript, I realized something that completely changed how I think about writing code: We don’t “wait” for data… we design what happens when it arrives. 💡 Most developers use fetch and Promises daily, but very few truly understand what happens under the hood. Here’s the real mental model: 🔹 JavaScript is single-threaded 🔹 Heavy operations (API calls, timers) are offloaded to Web APIs 🔹 fetch() returns a Promise immediately (not the data!) 🔹 .then() doesn’t execute your function… it registers it for later 🔥 The game changer? There are actually two queues, not one: Microtask Queue (Promises) → HIGH PRIORITY Callback Queue (setTimeout, etc.) And the Event Loop always prioritizes microtasks. 💥 Example: console.log("1"); setTimeout(() => console.log("2"), 0); Promise.resolve().then(() => console.log("3")); console.log("4"); 👉 Output: 1 . 4 . 3 . 2 🧠 Why this matters: Explains unexpected execution order Makes debugging async code 10x easier Helps avoid common interview pitfalls Builds a strong foundation for React & modern frontend ⚡ Key Insight: Promises are not about cleaner syntax… They are about controlling time and execution order in a non-blocking environment. 📌 Once you truly understand: Event Loop Microtask vs Callback Queue Promise lifecycle You stop guessing… and start predicting behavior. #JavaScript #Frontend #WebDevelopment #AsyncJS #Promises #EventLoop #React #Programming

Day 12/100 of JavaScript 🚀 Today’s topic: async / await "async" and "await" provide a cleaner way to work with Promises and write asynchronous code that looks like synchronous code 📍Basic example async function getData() { const res = await fetch("https://lnkd.in/gCA7VyNQ"); const data = await res.json(); console.log(data); } 📍With error handling async function getData() { try { const res = await fetch("https://lnkd.in/gCA7VyNQ"); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } } 🔑 Key points : - "async" makes a function return a Promise. - "await" pauses execution until the Promise resolves. - Makes code more readable than ".then()" chaining. async/await simplifies handling asynchronous operations while still using Promises under the hood. #Day12 #JavaScript #100DaysOfCode

🚀 𝐃𝐚𝐲 6 – 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 (𝐒𝐢𝐦𝐩𝐥𝐞 & 𝐂𝐥𝐞𝐚𝐫) JavaScript is single-threaded… 👉 But then how does it handle things like `setTimeout`? 🤔 Let’s understand the real flow 👇 --- 💡 The Setup JavaScript uses: * Call Stack → runs code * Web APIs → handles async tasks * Callback Queue → waits for execution * Event Loop → manages everything --- 💡Example: console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); console.log("End"); --- 💡 Output: Start End Timeout --- 💡 Why? (Step-by-step) * `Start` → runs immediately * `setTimeout` → sent to Web APIs * `End` → runs immediately * Timer completes → callback goes to Queue * Event Loop checks → Stack empty * Callback pushed to Stack → executes --- ⚡ Key Insight 👉 Even with `0ms`, it does NOT run immediately 👉 It waits until the Call Stack is empty --- 💡 Simple Mental Model 👉 “Async code runs after sync code finishes” --- 💡 Why this matters? Because it explains: * execution order * async behavior * common bugs --- 👨💻 Continuing my JavaScript fundamentals series 👉 Next: **Promises (Async Made Better)** 👀 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #SoftwareEngineer #Tech

🔍 A small JavaScript detail that can cause unexpected bugs: Object key ordering Many developers assume object keys are always returned in insertion order, but JavaScript actually follows a specific ordering rule when you iterate over object properties (Object.keys, Object.entries, for...in). The order is: • Integer index keys → sorted in ascending order • String keys → insertion order • Symbol keys → insertion order (not included in Object.keys) This is one of the reasons why using Object as a map can sometimes lead to unexpected iteration behavior when numeric keys are involved. If key order matters, Map is usually the more predictable choice since it preserves insertion order for all key types. Small language details like this are easy to overlook, but they often explain those subtle bugs you run into during debugging. #JavaScript #SoftwareEngineering #Frontend