JavaScript Scope & Scope Chain Explained

What will happen if you call a variable before initialization? 🤔 That is called Hoisting 👉 "JavaScript moves declarations to the top of their scope before execution" Sounds confusing? Let’s break it down 👇 When you create variables or functions, JavaScript runs your code in 2 phases: 1️⃣ Memory Creation Phase Before execution, JavaScript scans your code and allocates memory Example (mentally): var a → undefined let b → uninitialized (Temporal Dead Zone) 2️⃣ Execution Phase Now JavaScript runs your code line by line 👉 If you access variables before initialization: var → returns undefined let / const → ReferenceError Why does this happen? Because: var is initialized with undefined in memory let and const are hoisted but stay in the Temporal Dead Zone (TDZ) until the line where they are declared Simple way to remember: var => “exist, but don’t have a value yet” let / const => “Don’t touch before declaration” ⚡ Bonus: Function declarations are fully hoisted, so you can call them before defining them Curious how functions behave in hoisting? 🤔 Go Google function vs function expression in JavaScript — it’ll surprise you 👀 That’s hoisting in JavaScript 🚀 #javascript #webdevelopment #coding #frontend #learninpublic #hoisting

Hoisting in JavaScript (and TypeScript) - Explained So You’ll Never Forget Ever saw this weird behavior? console.log(a); // undefined var a = 10; OR even worse: sayHello(); // Works! function sayHello() { console.log("Hello!"); } How is JavaScript using things before they are declared? 👉 That’s called Hoisting 🏠 Real-Life Example: Hotel Reception Imagine you walk into a hotel… "var" — Pre-registered Guest 📝 Your name is already in the system, but your room is not ready yet. 👉 You exist… but not fully ready 👉 So you get "undefined" "let" / "const" — Walk-in Guest 🚶♂️ You are NOT in the system yet. 👉 Try to access before check-in? ❌ “Sir, you are not registered!” (This is called Temporal Dead Zone) "function" — VIP Guest ⭐ Your room is already booked and ready! 👉 You can directly go in 👉 That’s why functions work before declaration Behind the scenes (Simple terms): JavaScript does 2 steps: 1️⃣ Memory Allocation Phase → Variables & functions are stored 2️⃣ Execution Phase → Code runs line by line Key Takeaways: ✔ "var" is hoisted (initialized as "undefined") ✔ "let" & "const" are hoisted but NOT initialized ✔ Functions are fully hoisted Pro Tip: Avoid confusion → Always declare variables at the top (or just use "let" / "const" properly) 💬 Have you ever faced a bug because of hoisting? #JavaScript #TypeScript #WebDevelopment #Frontend #Coding #LearnToCode

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

🚀 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

🚀 How JavaScript Works Behind the Scenes We use JavaScript every day… But have you ever thought about what actually happens when your code runs? 🤔 Let’s understand it in a simple way 👇 --- 💡 Step 1: JavaScript needs an Engine JavaScript doesn’t run on its own. It runs inside a JavaScript engine like V8 (Chrome / Node.js). 👉 Engine reads → understands → executes your code --- 💡 Step 2: Two Important Things When your code runs, JavaScript uses: 👉 Memory Heap → stores variables & functions 👉 Call Stack → executes code line by line --- 💡 Step 3: What happens internally? let name = "Aman"; function greet() { console.log("Hello " + name); } greet(); Behind the scenes: - "name" stored in Memory Heap - "greet()" stored in Memory Heap - function call goes to Call Stack - executes → removed from stack --- 💡 Step 4: Single Threaded Meaning JavaScript can do only one task at a time 👉 One Call Stack 👉 One execution at a time --- ❓ But then… how does async work? (setTimeout, API calls, promises?) 👉 That’s handled by the runtime (browser / Node.js) More on this in next post 👀 --- 💡 Why this matters? Because this is the base of: - Call Stack - Execution Context - Closures - Async JS --- 👨💻 Starting a series to revisit JavaScript from basics → advanced with focus on real understanding Follow along if you want to master JS 🚀 #JavaScript #JavaScriptFoundation #WebDevelopment #FrontendDevelopment #Coding #SoftwareEngineer #Tech

Ever written JavaScript that *shouldn’t* work… but somehow does? 🤯 I remember staring at my screen thinking, “Did JS just ignore my logic?” Here’s the problem 👇 JavaScript has this hidden behavior called **hoisting**. It moves declarations (not values) to the top of the scope *before execution*. Sounds helpful… until it silently breaks your expectations. Here’s the insight 💡 * `var` gets hoisted and initialized as `undefined` * `let` & `const` are hoisted but stay in a “temporal dead zone” 🚫 * Functions? Fully hoisted — you can call them before defining! Example: ```js console.log(a); // undefined 😵 var a = 5; ``` Lesson learned 📌 JavaScript isn’t “weird” — it just follows rules we often ignore. Understanding hoisting = fewer bugs + cleaner logic. Now I always think: “What does JS see *before* running this?” 👀 If you’re diving deeper into JS concepts, I share more here 👉 https://webdevlab.org 🚀 Curious… have you ever been surprised by hoisting in your code? 😄 #JavaScript #WebDevelopment #Frontend #CodingTips #DevLife

🚀 Today I learned one of the most confusing but powerful JavaScript concepts — Prototype. At first, I used methods like .map(), .filter(), and .push() without thinking where they actually come from. Then I understood the role of Prototype 👇 👉 In JavaScript, objects can inherit properties and methods from another object through the prototype chain. Simple Example: function User(name) { this.name = name; } User.prototype.sayHi = function () { console.log("Hi " + this.name); }; const u1 = new User("Sartaj"); u1.sayHi(); 💡 Why use Prototype? ✔️ Shared methods for all instances ✔️ Better memory efficiency ✔️ Faster and cleaner object creation ✔️ Core concept behind JavaScript classes What I understood: prototype → used to store shared methods __proto__ → link to parent object new keyword connects objects to prototype The more I learn JavaScript fundamentals, the more interesting it becomes. 💻 Which JavaScript concept confused you the most at first? 👇 #JavaScript #WebDevelopment #Prototype #Coding #Frontend #MERNStack #Learning #100DaysOfCode

🚀 Day 10 of My JavaScript Journey ✨Today I explored how JavaScript actually works behind the scenes — and honestly, it changed the way I look at code completely 🤯 Here’s what I learned 👇 🧠 How JavaScript Code RunsJavaScript doesn’t just execute line by line — it first creates an Execution Context which manages everything. ⚙️ Execution Context Phases1️⃣ Memory Allocation Phase Variables get stored with undefined Functions are stored completely 2️⃣ Execution Phase Code runs line by line Values get assigned and functions execute 📦 Call Stack & Execution Flow JavaScript uses a Call Stack to manage function calls Each function creates its own execution context Stack follows LIFO (Last In, First Out) 💾 Stack vs Heap Memory Stack → Stores primitive values (fast ⚡) Heap → Stores objects (reference-based 🧩) 🤖 Interpreter BehaviorJavaScript reads and executes code step by step using an interpreter — not compiled like some other languages. ❓ Why undefined Appears?Because during memory phase, variables are declared but not initialized yet. ⬆️ Hoisting Explained var is hoisted with undefined Functions are fully hoisted let & const are hoisted but stay in Temporal Dead Zone (TDZ) ❌ 🚫 Temporal Dead Zone (TDZ)You can’t access let & const variables before initialization — it throws an error. ⚠️ Function Expressions vs Hoisting Function declarations → hoisted ✅ Function expressions → behave like variables ❌ 💡 Key TakeawayUnderstanding execution context, memory, and hoisting makes debugging WAY easier and helps write cleaner code 🔥 📌 Slowly moving from writing code → to understanding how it actually works inside #JavaScript #WebDevelopment #MERNStack #CodingJourney #LearnToCode #FrontendDevelopment #DeveloperLife

🔍 JavaScript Quirk: Hoisting (var vs let vs const) JavaScript be like: 👉 “I know your variables… before you even write them” 😅 Let’s see the magic 👇 console.log(a); var a = 10; 💥 Output: undefined Wait… no error? 🤯 Why? Because `var` is **hoisted** 📌 What is Hoisting? Hoisting is JavaScript’s behavior of **moving variable and function declarations to the top of their scope before execution**. 👉 JS internally does this: var a; console.log(a); // undefined a = 10; So the variable exists… but has no value yet. Now try with `let` 👇 console.log(b); let b = 20; 💥 Output: ReferenceError ❌ Same with `const` 👇 console.log(c); const c = 30; 💥 Error again ❌ Why? Because `let` & `const` are also hoisted… BUT they live in something called: 👉 “Temporal Dead Zone” (TDZ) Translation: 🧠 “You can’t touch it before it’s declared” --- 💡 Simple Breakdown: ✔ `var` → hoisted + initialized as `undefined` ✔ `let` → hoisted but NOT initialized ✔ `const` → same as let (but must assign value) 💀 Real dev pain: Using `var`: 👉 “Why is this undefined?” Using `let`: 👉 “Why is this error?” JavaScript: 👉 “Figure it out yourself” 😎 💡 Takeaway: ✔ Avoid `var` (legacy behavior) ✔ Prefer `let` & `const` ✔ Understand hoisting = fewer bugs 👉 JS is not weird… You just need to know its secrets 😉 🔁 Save this before hoisting confuses you again 💬 Comment “TDZ” if this finally made sense ❤️ Like for more JS quirks #javascript #frontend #codingtips #webdevelopment #js #developer

🧠 Day 29 — Execution Context & Call Stack in JavaScript (Simplified) Ever wondered how JavaScript actually runs your code behind the scenes? 🤔 It all starts with Execution Context and the Call Stack 🚀 --- 🔍 What is Execution Context? 👉 It’s the environment where JavaScript code is executed There are mainly 2 types: 1. Global Execution Context → Created first 2. Function Execution Context → Created whenever a function is called --- 📌 Example function one() { console.log("One"); two(); } function two() { console.log("Two"); } one(); --- 🧠 What happens? 👉 JS creates Global Execution Context 👉 one() is pushed to Call Stack 👉 Inside one(), two() is pushed 👉 After execution, functions are popped out --- ⚡ Call Stack = LIFO 👉 Last In, First Out Global() ↓ one() ↓ two() Then: two() → removed one() → removed Global() stays --- 🚀 Why it matters ✔ Helps debug errors ✔ Understand recursion better ✔ Explains stack overflow issues --- 💡 One-line takeaway: 👉 “Execution Context creates the environment, Call Stack manages the order.” --- Once you understand this, debugging JavaScript becomes much easier. #JavaScript #ExecutionContext #CallStack #WebDevelopment #Frontend #100DaysOfCode 🚀