JavaScript Hoisting Explained: Why a = 10; console.log(a); outputs undefined

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

🚀 JavaScript Output Prediction Challenge What will be the output? 🤔 💡 Important Behaviour: 👉 JavaScript executes code line by line 👉 The very first line throws the following: ❌ ReferenceError: a is not defined So in reality, the programme stops immediately and nothing else runs. 📌 Now, let’s understand what would happen inside the function (ignoring the first error): 👉 Before execution, JS does Hoisting (memory creation phase) Inside the function: var a → hoisted and initialized as undefined let b → hoisted but kept in Temporal Dead Zone (TDZ) (not accessible yet) 👉 Execution phase: "1:" → undefined (Because 'a' exists but not assigned yet) "2:" → ❌ ReferenceError (because b is in TDZ) After assignment: a = 10 b = 20 "3:" → 10 "4:" → 20 🔥 Core Concepts: JS has 2 phases → Memory Creation + execution. var → hoisted + usable as undefined let/const → hoisted but blocked by TDZ 💬 If you got this right, your JS fundamentals are solid 👇 #JavaScript #Hoisting #Frontend #CodingChallenge #WebDevelopment

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

🚀 JavaScript Event Loop — The Concept That Confuses (Almost) Everyone If you’ve ever wondered: 👉 Why does Promise run before setTimeout? 👉 How JavaScript handles async code while being single-threaded? Let’s break it down visually 👇 🧠 JavaScript Memory Model: • Call Stack → Executes functions (one at a time) • Heap → Stores objects, closures, data ⚙️ Behind the Scenes: JavaScript doesn’t handle async tasks alone — it uses: • Web APIs (browser / Node runtime) • Queues to schedule execution 📦 Queues Explained: 🔥 Microtask Queue (HIGH PRIORITY) → Promise.then, queueMicrotask 🕒 Macrotask Queue (LOW PRIORITY) → setTimeout, setInterval, events 🔁 Event Loop Flow: 1. Execute Call Stack 2. When stack is empty → Run ALL Microtasks 3. Then execute ONE Macrotask 4. Repeat 💡 Example: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 👉 Output: Start → End → Promise → Timeout ⚠️ Pro Tip (Interview Gold) Microtasks can starve macrotasks if continuously added — meaning setTimeout might never run! 🎯 Golden Rule to Remember: 👉 Call Stack > Microtasks > Macrotasks 🧠 Think of it like this: 👨🍳 Call Stack = Chef (works on one dish) ⭐ Microtasks = VIP orders (served first) 📋 Macrotasks = Normal orders (served later) If this helped you understand the Event Loop better, drop a 👍 or share with someone preparing for frontend interviews! #JavaScript #Frontend #WebDevelopment #ReactJS #InterviewPrep #Programming

🚀 JavaScript Event Loop Explained (A Must-Know Concept) If you've ever wondered why setTimeout(fn, 0) doesn’t run immediately or how JS handles async tasks while being single-threaded — this is where the Event Loop comes in. Let’s break it down 👇 🧠 1. JavaScript is Single-Threaded JS runs one thing at a time using a Call Stack. Functions are pushed → executed → popped Only synchronous code runs here 🌐 2. Web APIs (Browser Magic) When JS encounters async operations: setTimeout, fetch, DOM events 👉 They are handled outside JS by Web APIs Once done, they don’t go to the stack directly… 📬 3. Queues (Where async waits) There are 2 types of queues: 🔹 Microtask Queue (High Priority) Promise.then() queueMicrotask() MutationObserver 🔸 Macrotask Queue (Low Priority) setTimeout() setInterval() DOM events 🔄 4. Event Loop (The Brain) The Event Loop keeps checking: 1️⃣ Is Call Stack empty? 2️⃣ Run ALL Microtasks 🟢 3️⃣ Then run ONE Macrotask 🟡 4️⃣ Repeat 🔁 💡 Example: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); 📌 Output: 👉 1 → 4 → 3 → 2 🔥 Why? 1, 4 → synchronous → run first 3 → microtask → higher priority 2 → macrotask → runs last ⚡ Pro Tips ✔ Microtasks always run before macrotasks ✔ Even setTimeout(fn, 0) is NOT immediate ✔ Too many microtasks can block UI (⚠️ starvation) 🎯 Why You Should Care Understanding the Event Loop helps you: Write better async code Debug tricky timing issues Ace JavaScript interviews 💼 💬 If this clarified things, drop a 👍 or comment your doubts — happy to help! #JavaScript #WebDevelopment #Frontend #NodeJS #Coding #Programming #SoftwareEngineering

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁𝗟𝗼𝗼𝗽 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 (𝗔 𝗠𝘂𝘀𝘁‐𝗞𝗻𝗼𝘄 𝗖𝗼𝗻𝗰𝗲𝗽𝘁) Understanding the JavaScript Event Loop is a game changer for writing efficient and predictable asynchronous code. Many developers use setTimeout and Promises every day — but far fewer truly understand how JavaScript executes async tasks behind the scenes. Let’s break it down 👇 𝗛𝗼𝘄 𝘁𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗪𝗼𝗿𝗸𝘀  • JavaScript runs on a single thread  • Synchronous code executes first via the Call Stack  • Then Microtasks run (like Promises)  • Next, one Macrotask executes (timers, events)  • This cycle continues repeatedly  𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝘆 ➡️ Synchronous ➡️ Microtasks ➡️ Macrotasks 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝗰𝗼𝗻𝗰𝗲𝗽𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 ✅ Debug async issues with confidence ✅ Avoid unexpected execution order ✅ Build more predictable React applications ✅ Frequently tested in frontend interviews Credit: owner Follow Alpna P. for more related content! 🤔 Having Doubts in technical journey? 🚀 Book 1:1 session with me : https://lnkd.in/gQfXYuQm 🚀 Subscribe and stay up to date: https://lnkd.in/dGE5gxTy 🚀 Get Complete React JS Interview Q&A Here: https://lnkd.in/d5Y2ku23 🚀 Get Complete JavaScript Interview Q&A Here: https://lnkd.in/d8umA-53 #JavaScript #EventLoop #FrontendDevelopment #ReactJS #WebDevelopment #InterviewPrep #AsyncJavaScript #SoftwareEngineering

Really insightful explanation of the JavaScript event loop. Breaking down complex concepts like this in a simple and practical way is not easy — great work! Alpna P. Posts like these truly help developers strengthen their fundamentals. Looking forward to more such content.

JavaScript is single-threaded… yet handles async like a pro. 🤯 If you’ve ever been confused about how setTimeout, Promises, and callbacks actually execute then the answer is the Event Loop. Here’s a crisp breakdown in 10 points 👇 1. The event loop is the mechanism that manages execution of code, handling async operations in JavaScript. 2. JavaScript runs on a single-threaded call stack (one task at a time). 3. Synchronous code is executed first, line by line, on the call stack. 4. Async tasks (e.g., setTimeout, promises, I/O) are handled by Web APIs / Node APIs. 5. Once completed, callbacks move to queues (macro-task queue or micro-task queue). 6. Micro-task queue (e.g., promises) has higher priority than macro-task queue. 7. The event loop constantly checks: Is the call stack empty? 8. If empty, it pushes tasks from the micro-task queue first, then macro-task queue. 9. This cycle repeats continuously, enabling non-blocking behavior. 10. Result: JavaScript achieves asynchronous execution despite being single-threaded. 💡 Master this, and debugging async JS becomes 10x easier. #JavaScript #WebDevelopment #Frontend #NodeJS #EventLoop #AsyncProgramming #CodingInterview

⚡ Day 7 — JavaScript Event Loop (Explained Simply) Ever wondered how JavaScript handles async tasks while being single-threaded? 🤔 That’s where the Event Loop comes in. --- 🧠 What is the Event Loop? 👉 The Event Loop manages execution of code, async tasks, and callbacks. --- 🔄 How it works: 1. Call Stack → Executes synchronous code 2. Web APIs → Handle async tasks (setTimeout, fetch, etc.) 3. Callback Queue / Microtask Queue → Stores callbacks 4. Event Loop → Moves tasks to the stack when it’s empty --- 🔍 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); --- 📌 Output: Start End Promise Timeout --- 🧠 Why? 👉 Microtasks (Promises) run before macrotasks (setTimeout) --- 🔥 One-line takeaway: 👉 “Event Loop decides what runs next in async JavaScript.” --- If you're learning async JS, understanding this will change how you debug forever. #JavaScript #EventLoop #WebDevelopment #Frontend #100DaysOfCode 🚀

One of the most underrated JavaScript features: Destructuring. Not because it's complex,but because once you truly get it, your code never looks the same again. Here's the shift it creates: BEFORE: const a = arr[0]; const b = arr[1]; const name = user.name; const age = user.age; AFTER: const [a, b] = arr; const { name, age } = user; Same logic.But destructuring goes deeper than just shorthand: ✦ Skip indexes in arrays using commas ✦ Rename variables on extraction ✦ Set default values for missing properties ✦ Use ...rest to capture everything remaining ✦ Destructure directly inside function parameters These patterns come up daily, in React, in Node.js, in any codebase that handles real data. I just published a full blog post breaking all of this down with visuals, before/after comparisons, and practical examples. Blog-link: https://lnkd.in/giGUXq7C #JavaScript #JS #WebDev #ProgrammingTips #CleanCode #SoftwareDevelopment