Understanding JavaScript Call Stack and Execution Order

🚀 Understanding Factory Functions in JavaScript Ever felt confused using constructors and the new keyword? 🤔 That’s where Factory Functions make life easier! 👉 A Factory Function is simply a function that creates and returns objects. 💡 Why use Factory Functions? ✔️ No need for new keyword ✔️ Easy to understand (perfect for beginners) ✔️ Avoids this confusion ✔️ Helps in writing clean and reusable code ✔️ Supports data hiding using closures 🧠 Example: function createUser(name, age) { return { name, age, greet() { console.log("Hello " + name); } }; } const user = createUser("Sushant", 21); user.greet(); ⚠️ One downside: Methods are not shared (can use more memory) 🎯 Conclusion: Factory Functions are a great way to start writing clean and maintainable JavaScript code without complexity. #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearnToCode #100DaysOfCode

⚡ 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 🚀

🚨 Ever wondered what actually happens behind the scenes when your JavaScript code runs? Or why some variables behave like they exist before you even write them? 🤯 Let’s break it down — because understanding this changes how you write JavaScript forever. 👇 💡 Execution Context in JavaScript Every time your JS code runs, it goes through two powerful phases: 🔹 1. Memory Creation Phase (a.k.a Variable Environment) • JavaScript scans your code before execution • Allocates memory for variables and functions • Variables are initialized with undefined • Functions are stored with their entire definition 👉 This is why hoisting happens! 🔹 2. Code Execution Phase (Thread of Execution) • Code runs line by line • Variables get their actual values assigned • Functions are invoked and executed • A single thread handles everything (yes, JS is single-threaded!) ⚡ Important Insight JavaScript doesn’t just “run code” — it prepares and then executes. That preparation step is what often confuses developers. 😬 Common Confusion • Accessing variables before assignment → undefined • Thinking JS executes top-to-bottom only → not entirely true • Misunderstanding hoisting → leads to bugs 🔥 Pro Tip Mastering execution context helps you: • Debug faster • Write predictable code • Truly understand closures, scope, and async behavior 📌 Think of it like this: Memory Creation = Setting the stage 🎭 Execution Phase = Performing the play 🎬 Once you see it this way, JavaScript starts making a lot more sense. #JavaScript #WebDevelopment #AsyncProgramming #Coding #LearnToCode #100DaysOfCode

I ran a small JavaScript experiment today, and it was a good reminder that performance often hides inside simple concepts. I used the same function twice with the same inputs. The first call took noticeable time. The second call returned almost instantly. Nothing changed in the inputs. Nothing changed in the output. The only difference was that the second time, JavaScript didn’t need to do the work again. That’s the beauty of memoization. Instead of recalculating, it remembers the previous result and returns it from cache. What looks like a small optimization in code can make a big difference in how efficiently an application behaves. The deeper I go into JavaScript, the more I realize: the real power is not just in writing code — it’s in understanding how to make code smarter. #JavaScript #WebDevelopment #FrontendDevelopment #Memoization #Closures

🚀 JavaScript Variables (var, let, const) & Hoisting. Before JavaScript executes your code… Have you ever wondered where variables are stored? 🤔 🧠 What is a Variable? A variable is a named container used to store data. ⚙️ JavaScript gives us 3 ways to declare variables: var a = 10; let b = 20; const c = 30; 🧠 What is Hoisting? 👉 Hoisting is JavaScript’s behavior of moving declarations to the top of their scope before execution. 👉 In simple words: You can access variables and functions even before they are initialized. 📦 Example with var: console.log(x); // undefined var x = 5; 🚫 Example with let: console.log(y); // ❌ ReferenceError let y = 10; 🔒 Same with const: console.log(z); // ❌ ReferenceError const z = 15; 🎯 Key Differences: • var → hoisted + initialized (undefined) • let & const → hoisted but NOT initialized (Temporal Dead Zone) 👉 “In the next post, we’ll dive into Scope — the concept that truly defines how variables behave in JavaScript.” #JavaScript #WebDevelopment #Frontend #Coding

Day 1 🧠 Understanding Lexical Scoping in JavaScript (in 2 minutes) One concept that quietly powers a lot of JavaScript behavior is lexical scoping. 👉 Simply put: A function remembers where it was written, not where it is called. 🔍 Example: let name = "Global"; function print() { console.log(name); } function test() { let name = "Local"; print(); } test(); // Output: Global 💡 Even though print() is called inside test(), it still logs "Global". Why? Because print() was defined in the global scope, so it uses that scope. 🧠 Key Takeaways: Scope is determined at write time (lexical), not run time. JavaScript looks for variables in the scope chain upward. This is the foundation of closures. 🚀 Why this matters: Understanding lexical scoping helps you: ✔ Write predictable code ✔ Debug faster ✔ Master closures, callbacks, and async logic ✔ Work better with React hooks 🔥 One-line takeaway: 👉 "Where you write your function decides what it can access." If you're learning JavaScript fundamentals, don’t skip this — it shows up everywhere. #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

Things I wish someone had drawn out for me when I was starting with JavaScript. A lot of engineers write JS for years without really knowing what happens after they hit run. How does the code actually execute? What's the JS engine doing? Why does async code behave the way it does? Why does setTimeout sometimes feel unpredictable? It all makes sense once you see the full picture. Here's what these notes cover: The JS Runtime Environment — engine, call stack, memory heap, and how execution contexts are created and destroyed. The Event Loop, how it continuously monitors the call stack and decides what runs next. Callback Queue vs Microtask Queue, why Promises behave differently from setTimeout, and why microtasks always go first. JIT Compilation, how V8 interprets and optimises your code on the fly. Web APIs and the Browser, where setTimeout, DOM APIs, fetch, and localStorage actually live. Once this clicked for me, a lot of "weird" JavaScript behaviour stopped feeling weird. If you're learning JS right now, save this. Come back to it when async starts feeling confusing. What part of JavaScript took you the longest to truly understand? #JavaScript #WebDevelopment #Frontend #LearnToCode

🚀 **𝐃𝐚𝐲 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

Day 4 — Making Tech Simple. JavaScript looks simple… But here’s something most beginners don’t understand How does JavaScript handle multiple tasks at once if it’s single-threaded? The answer = Event Loop Here’s what actually happens: • Call Stack → Executes code one by one • Web APIs → Handle async tasks (setTimeout, fetch, events) • Callback Queue → Stores completed tasks • Event Loop → Pushes tasks back to stack when it’s free That’s how JavaScript handles async behavior without breaking. If you don’t understand this… 👉 Async code will always confuse you 👉 Debugging will feel hard But once you get it… Everything starts making sense 💡 📌 Day 4 of breaking down complex tech into simple visuals. Follow me if you want to actually understand JavaScript deeply. Comment “DAY 5” if you’re ready — Syed Shaaz Akhtar #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering

🧠 Day 12 — Prototypal Inheritance in JavaScript (Simplified) JavaScript doesn’t use classical inheritance like other languages — it uses prototypes. --- 🔍 What is Prototypal Inheritance? 👉 Objects in JavaScript can inherit properties and methods from other objects --- 📌 Example: const animal = { eats: true }; const dog = Object.create(animal); dog.barks = true; console.log(dog.eats); // true console.log(dog.barks); // true --- 🧠 What’s happening? dog doesn’t have eats JavaScript looks up the prototype chain Finds eats inside animal 👉 This is called prototype chaining --- 🔗 Prototype Chain 👉 If a property is not found: JS looks in the object Then its prototype Then prototype’s prototype Until null --- 🚀 Why it matters ✔ Memory efficient (shared methods) ✔ Core concept behind JS objects ✔ Used in classes internally --- 💡 One-line takeaway: 👉 “Objects can inherit from other objects using prototypes.” --- Understanding this makes concepts like classes and this much easier. #JavaScript #Prototypes #WebDevelopment #Frontend #100DaysOfCode