JavaScript Variables: var vs let vs const Explained

Day 6: Closures in JavaScript Closures — one of the most powerful (and confusing) concepts in JavaScript 🤯 A closure is created when a function remembers variables from its outer scope, even after the outer function has finished execution. 🔹 Example function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 🔍 What’s happening here? outer() finishes execution But inner() still remembers count This memory + function = closure 🔹 Key Rules ✅ Closures are formed because of lexical scope ✅ Functions retain access to their outer variables ✅ Each function call creates a new closure 🔹 Why are closures important? ✔️ Data hiding & encapsulation ✔️ Used in debouncing, throttling, currying #JavaScript #Closures #ScopeChain #WebDevelopment #LearningInPublic

Most people think functions "forget" everything once they finish running. Closures change the rules! While revising JavaScript fundamentals today, closures finally made sense to me. Normally, variables are garbage collected after execution. But closures allow inner functions to access outer variables even after the outer function has finished. In simple words, the inner function “remembers” its outer scope. 💬 Why this matters: • Private Variables : Closures let us protect data by keeping variables inaccessible from outside. • Persistent State : They allow functions to remember values without relying on global variables. • Event Handlers : They help UI elements remember what action to perform later. • Modules : They help organize code and prevent naming conflicts in larger applications. What’s one JavaScript concept that recently clicked for you? 👇 #JavaScript #WebDevelopment #Closures #LearningJourney

JavaScript is single-threaded, but async code doesn’t just run whenever it feels like it. The engine processes: The call stack Then microtasks (Promises) Then macrotasks (setTimeout, etc.) Which means this: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Logs: Start End Promise Timeout Even with 0ms, setTimeout waits until the microtask queue is empty. Once I understood that, async bugs stopped feeling random. The event loop isn’t just trivia, it’s how you reason about timing instead of guessing. #JavaScript #EventLoop #AsyncProgramming #WebDevelopment

🔥 JavaScript Concept: Hoisting — Code Moves Before Execution Hoisting is JavaScript’s behavior of moving declarations to the top of their scope before execution. 🔹 Key Points ✔ "var" is hoisted and initialized as "undefined" ✔ "let" & "const" are hoisted but NOT initialized (Temporal Dead Zone) ✔ Function declarations are fully hoisted 🔹 Example console.log(a); // undefined var a = 10; console.log(b); // Error let b = 20; 💡 Understanding hoisting helps prevent unexpected bugs. Write predictable code → Prefer "let" and "const" ✔ #JavaScript #Hoisting #CleanCode #Developers

🗓️ Day 61/100 – Understanding the JavaScript Scope Chain Today I finally understood why sometimes variables work… and sometimes they suddenly don’t. The answer = Scope Chain At first I thought JavaScript just “searches everywhere” for a variable. But no — it actually follows a very specific path. JavaScript looks for variables in this order: 1️⃣ Current function scope 2️⃣ Parent function scope 3️⃣ Global scope It climbs upward step-by-step until it finds the variable. This is called the scope chain. --- Example idea: A function inside a function inside a function… The inner function can access outer variables But the outer function cannot access inner variables So access flows inside → outside Never outside → inside --- Big realization today 💡 Most bugs I faced earlier were not logic mistakes… They were scope mistakes. If you understand scope chain: • Closures make sense • Hoisting becomes clearer • Debugging becomes easier JavaScript stops feeling random — It starts feeling predictable. Slowly the language is revealing its rules, not magic. #100DaysOfCode #JavaScript #Scope #WebDevelopment #Frontend #LearningInPublic

🤔 Quick JavaScript quiz! What do you think this logs? console.log(x); var x = 10; If you said undefined, you’re right ✅ Welcome to JavaScript hoisting. Hoisting means JS moves declarations (not values) to the top of their scope before running your code. Now try this 👇 console.log(y); let y = 10; 💥 Error! let and const are hoisted too, but live in the Temporal Dead Zone until declared. 👉 Rule of thumb: Hoisting is real, but clean, top-down code saves you from bugs. What tripped you up more when you were learning JS — var or let? 👀 #JavaScript #Frontend #WebDev #LearningInPublic

JavaScript behavior that looks completely wrong: console.log([] + []); Output: "" Why? Because + triggers type coercion. Step 1: Both arrays are converted to primitive values. [].toString() → "" Step 2: Now it becomes: "" + "" Which equals: "" Now look at this: console.log([] + {}); Output: "[object Object]" Why? [].toString() → "" {}.toString() → "[object Object]" So it becomes: "" + "[object Object]" Understanding coercion rules prevents unpredictable bugs. JavaScript is simple. Its edge cases are not. #javascript #webdevelopment #programming #frontend #softwareengineering

🚀 A Subtle JavaScript Array Bug This looks harmless: const arr = [1, 2, 3]; const copy = arr; copy.push(4); console.log(arr); Output? [1, 2, 3, 4] Why did the original array change? Because arrays (like objects) are reference types in JavaScript. copy is not a new array. It points to the same memory location. This can create unexpected side effects in larger applications. ✅ Better approach: const arr = [1, 2, 3]; const copy = [...arr]; copy.push(4); console.log(arr); // [1, 2, 3] Now you’re working with a new reference. In JavaScript, copying data is not always copying values. Sometimes it’s copying references. Understanding this saves hours of debugging. What JS concept took you the longest to truly understand? #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

Adding event listeners to every element? There’s a smarter way in JavaScript. It’s called Event Delegation. Instead of attaching multiple event listeners to child elements, you attach one listener to the parent element. Why this works? Because of event bubbling. When an event happens, it moves up the DOM tree: Child → Parent → Document Example: document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); Now a single listener can handle all child element clicks. Benefits: • Better performance • Cleaner code • Works for dynamically added elements Small concepts like this make a big difference in real projects. Follow for more JavaScript concepts explained visually. #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

Why JavaScript doesn't crash when you call a function before defining it. 🧠 I recently dove deep into the "Execution Context" of JavaScript, and the concept of Hoisting finally clicked. If you’ve ever wondered why this code works: greet(); function greet() { console.log("Hello LinkedIn!"); } ...the answer lies in how the JS Engine treats your code before it even runs a single line. The Two-Phase Secret: Memory Creation Phase: Before the "Thread of Execution" starts, JavaScript scans your code and allocates memory for variables and functions. Functions are stored in their entirety in the Variable Environment. Variables (var) are stored as undefined. Code Execution Phase: Now, the engine runs the code line-by-line. Because the function is already sitting in the memory component, calling it on line 1 is no problem! The Key Takeaway: Hoisting isn't "moving code to the top" (that’s a common myth). It’s actually the result of the Memory Creation Phase setting aside space for your declarations before execution starts. Understanding the "how" behind the "what" makes debugging so much easier. #JavaScript #WebDevelopment #CodingTips #Hoisting #ProgrammingConcepts