JavaScript Promises Simplified

JavaScript bugs often come down to one thing: The Global Execution Context. Not because it’s complicated. But because it’s always there silently controlling the flow. Here’s a simple way to understand it: 1️⃣ JavaScript runs in phases First: memory is allocated. Then: code is executed. That alone explains why variables can be accessed before assignment. 2️⃣ undefined isn’t random It’s JavaScript saying: “I know this variable exists, but its value isn’t set yet.” 3️⃣ Functions behave differently for a reason Function declarations are fully available early. Function expressions are not. That difference isn’t magic. It’s the execution context doing its job. 4️⃣ Many bugs are actually timing issues Understanding when things exist is just as important as what they are. Once you see this flow, JavaScript feels less weird and much more predictable. Sometimes the biggest clarity comes from understanding what runs before your code. ♻️ Repost if this helps clarify JavaScript’s behavior. 👋 Follow for more learnings from my frontend &full-stack journey. #FrontendDevelopment #SoftwareEngineering #JavaScriptTips

JavaScript bugs often come down to one thing: The Global Execution Context. Not because it’s complicated. But because it’s always there silently controlling the flow. Here’s a simple way to understand it: 1️⃣ JavaScript runs in phases First: memory is allocated. Then: code is executed. That alone explains why variables can be accessed before assignment. 2️⃣ undefined isn’t random It’s JavaScript saying: “I know this variable exists, but its value isn’t set yet.” 3️⃣ Functions behave differently for a reason Function declarations are fully available early. Function expressions are not. That difference isn’t magic. It’s the execution context doing its job. 4️⃣ Many bugs are actually timing issues Understanding when things exist is just as important as what they are. Once you see this flow, JavaScript feels less weird and much more predictable. Sometimes the biggest clarity comes from understanding what runs before your code. ♻️ Repost if this helps clarify JavaScript’s behavior. 👋 Follow for more learnings from my frontend &full-stack journey. #FrontendDevelopment #SoftwareEngineering #JavaScriptTips

Ever wondered how JavaScript handles multiple tasks at once despite being single-threaded? The secret lies in the Event Loop, the ultimate coordinator between the JavaScript engine and the browser. Here is a breakdown of how this "superpower" works: 🚀 The Call Stack Everything starts here. The JavaScript engine executes code line by line within the Call Stack. If a function is running, the engine stays busy until it is finished. 🌐 Browser Superpowers (Web APIs) Since the engine can't handle timers or network requests on its own, it calls upon the browser’s Web APIs (like setTimeout, fetch(), and DOM APIs). These are accessed via the global window object. ⏳ The Queues When an asynchronous task (like a timer) finishes, its callback doesn't jump straight to the stack. It waits in a queue: • Microtask Queue: The VIP line. It handles Promises and Mutation Observers with higher priority. • Callback Queue (Task Queue): The standard line for timers and DOM events. 🔄 The Event Loop The Event Loop has one job: monitoring. It constantly checks if the Call Stack is empty. If it is, it first clears the entire Microtask Queue before moving to the Callback Queue. ⚠️ Pro-tip: Be careful! If the Microtask Queue keeps generating new tasks, it can lead to "starvation", where the regular Callback Queue never gets a chance to run. #JavaScript #WebDevelopment #Coding #EventLoop #FrontendDevelopment

The JavaScript start to make sense with the help of Namaste JS. JavaScript is single-threaded. It can only do one thing at a time. So how does it handle timers, API calls, and other async stuff without freezing? Turns out, it doesn't. The browser does. JavaScript hands off async operations to the browser (Web APIs), keeps running your code, and picks up the results later when it's free. The event loop is just the thing that coordinates all of this. The tricky part? Understanding why this prints in this order: setTimeout → goes to callback queue Promise → goes to microtask queue (higher priority) Promises always cut the line. That's why they execute before setTimeout, even with 0ms delay. Documented the whole flow with examples: https://lnkd.in/dC3mh_AV If the event loop still feels like magic, maybe this helps. #JavaScript #WebDev #Coding #LearningInPublic

You might be accidentally pausing your API calls. 🛑⏳ I see this pattern in code reviews constantly. It looks clean, but it kills performance. ❌ The Sequential Trap: JavaScript const user = await getUser(id); const posts = await getPosts(id); const friends = await getFriends(id); In this code, the browser waits for user to finish before starting posts. If each call takes 1 second, the user waits 3 seconds. ✅ The Parallel Fix: JavaScript const [user, posts, friends] = await Promise.all([ getUser(id), getPosts(id), getFriends(id) ]); Now, all requests fire at once. Total wait time? 1 second. The Rule of Thumb: If the data from Request A isn't required to make Request B, do not await them one by one. JavaScript is single-threaded, but the network is not. Let it do the heavy lifting. 👇 How often do you catch this in Code Reviews? #JavaScript #WebPerformance #AsyncAwait #FrontendDevelopment #CodingTips #adarshjaiswal

Understanding JavaScript Execution Context is essential for mastering how functions are executed and how variables are scoped. It defines the environment in which the current code is evaluated, impacting everything from variable access to the function call stack. https://lnkd.in/dCmjYpXt

🟨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗮𝘆 𝟰𝟵: 𝗜𝗻𝘃𝗲𝗿𝘀𝗶𝗼𝗻 𝗼𝗳 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 (𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀 𝗣𝗿𝗼𝗯𝗹𝗲𝗺) In JavaScript, we often use callbacks to handle async tasks — API calls, timers, or events. But callbacks introduce a hidden issue called Inversion of Control. 🔹 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗮 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸? A callback is a function passed to another function and executed later. 𝘴𝘦𝘵𝘛𝘪𝘮𝘦𝘰𝘶𝘵(() => { 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨("𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵"); }, 1000); 🔹 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗜𝗻𝘃𝗲𝗿𝘀𝗶𝗼𝗻 𝗼𝗳 𝗖𝗼𝗻𝘁𝗿𝗼𝗹? When we pass a callback, we give control of our code to another function. We don’t control: • When it runs • How many times it runs • Whether it runs at all 🔹 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝘢𝘱𝘪.𝘤𝘳𝘦𝘢𝘵𝘦𝘖𝘳𝘥𝘦𝘳(𝘤𝘢𝘳𝘵, 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 () { 𝘢𝘱𝘪.𝘱𝘳𝘰𝘤𝘦𝘦𝘥𝘛𝘰𝘗𝘢𝘺𝘮𝘦𝘯𝘵(); }); Here: • proceedToPayment is our code • createOrder decides when it runs • Our callback executes only when the API decides, based on its internal logic or async events. This is Inversion of Control in action. 🔹 𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗜𝘀 𝗮 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 • Unexpected behavior • Harder debugging • Leads to callback hell in large apps 🔹 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻 Promises and async / await keep control in our hands. 🔹 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Callbacks give control away. Promises bring it back. 💬 GitHub link in the comments for examples #JavaScript #Day49 #100DaysOfCode #Frontend

JavaScript doesn’t decide variable access at runtime. It decides it at write-time. That’s Lexical Scope. JavaScript looks for variables based on where the code is written, not where a function is called from. How lookup works: • Check local scope • Then parent scope • Then parent’s parent • Finally global This upward lookup is called the Scope Chain. A Lexical Environment is simply: Local memory + reference to its parent environment Important rules: • Inner functions can access outer variables • Globals are accessible (but dangerous) • Anything outside the chain = not defined JavaScript doesn’t guess. It follows the structure you wrote. If you understand this, closures, hoisting confusion, and “undefined errors” stop being mysterious. #JavaScript #LexicalScope #ScopeChain #NamasteJavaScript #LearningInPublic #FrontendDevelopment #WebDevelopment

This async / await output confuses even experienced developers 🤯 🧩 JavaScript Output-Based Question (Async / Await) ✅ Correct Output 3 1 4 2 🧠 Why this output comes? (Step-by-Step) 1️⃣ Synchronous code runs first • console.log(3) → prints 3 2️⃣ test() is called • console.log(1) runs immediately → prints 1 3️⃣ await Promise.resolve() • Even though the promise is resolved, await pauses the function execution • Remaining code moves to the microtask queue 4️⃣ Back to synchronous code • console.log(4) → prints 4 5️⃣ Microtasks execute • console.log(2) runs last → prints 2 🔑 Key Takeaways (Interview Insight) ✔️ await is always asynchronous ✔️ Code after await runs in the microtask queue ✔️ Even resolved promises don’t run immediately ✔️ Understanding the event loop is critical for async JavaScript async / await looks synchronous, but behaves asynchronously. #JavaScript #AsyncAwait #InterviewQuestions #FrontendDeveloper #MERNStack #ReactJS

This async / await output confuses even experienced developers 🤯 🧩 JavaScript Output-Based Question (Async / Await) ✅ Correct Output 3 1 4 2 🧠 Why this output comes? (Step-by-Step) 1️⃣ Synchronous code runs first • console.log(3) → prints 3 2️⃣ test() is called • console.log(1) runs immediately → prints 1 3️⃣ await Promise.resolve() • Even though the promise is resolved, await pauses the function execution • Remaining code moves to the microtask queue 4️⃣ Back to synchronous code • console.log(4) → prints 4 5️⃣ Microtasks execute • console.log(2) runs last → prints 2 🔑 Key Takeaways (Interview Insight) ✔️ await is always asynchronous ✔️ Code after await runs in the microtask queue ✔️ Even resolved promises don’t run immediately ✔️ Understanding the event loop is critical for async JavaScript async / await looks synchronous, but behaves asynchronously. #JavaScript #AsyncAwait #InterviewQuestions #FrontendDeveloper #MERNStack #ReactJS