JavaScript Variable Scopes: var, let, and const

JavaScript Problem 🧩 #10 – slice() vs splice() They look similar, but they behave very differently. This is a common source of bugs in JavaScript, especially when working with arrays in real projects. ❌ No loops ❌ No unnecessary logic ✅ Understanding Problem 👇

JavaScript TDZ — Where are var, let, and const stored? 🧠 When JS runs, it creates an Execution Context ⚙️ with two memory areas: 1️⃣ Global Object Environment 🌍 → var variables go here → attached to the global object (like window in browsers) → auto-initialized with undefined ✅ 2️⃣ Script / Lexical Environment 📦 → let and const go here → block-scoped memory space → memory reserved but not initialized 🚫 (TDZ ⏳) That’s why: var before declaration → undefined let/const before declaration → error ⛔ JS separates them to enforce block scope and reduce bugs 🛡️ #JavaScript #JSCore #ExecutionContext

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐫𝐞𝐯𝐢𝐬𝐢𝐭𝐞𝐝 𝐚 𝐜𝐨𝐫𝐞 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐜𝐨𝐧𝐜𝐞𝐩𝐭 𝐭𝐡𝐚𝐭 𝐪𝐮𝐢𝐞𝐭𝐥𝐲 𝐚𝐟𝐟𝐞𝐜𝐭𝐬 𝐜𝐨𝐝𝐞 𝐪𝐮𝐚𝐥𝐢𝐭𝐲: 𝒗𝒂𝒓 𝒗𝒔 𝒍𝒆𝒕 𝒗𝒔 𝒄𝒐𝒏𝒔𝒕 👇 var x = 10; // function-scoped let y = 20; // block-scoped const z = 30; // block-scoped & cannot be reassigned Key differences that matter in real projects: > "var" is function-scoped and can lead to unexpected bugs due to hoisting. > "let" provides block scope, making control flow safer. > "const" enforces immutability of the reference, improving readability. Modern JavaScript favors const by default, uses let when reassignment is required and avoids var in most cases. Back to fundamentals — with a modern JS lens. Any insights or suggestions are welcome🙂 #DAY6 #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #dailyChallenge

🗓️ 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

💡 Hoisting happens before code execution. ❓ Why are function declarations hoisted but arrow functions are not? In JavaScript, hoisting means the JS engine moves declarations to the top of the file before running the code. ✅ Function declarations are fully hoisted. That means both the function name and its body are stored in memory during the creation phase. So you can call a function declaration even before writing it in the code. ❌ Arrow functions are not hoisted the same way because they are treated like variables. If an arrow function is assigned to const or let, only the variable name is hoisted—not its value. Until the code reaches that line, the arrow function doesn’t exist yet. 👉 So if you try to call an arrow function before it’s defined, JavaScript throws an error. #engineer #webdevelopment #javascript #mernstackdeveloper #fullstackdeveloper #learnwithisnaan

💡 Sunday Dev Tip: JavaScript Array Methods Stop writing loops. Use array methods instead! ❌ Traditional Loop: let doubled = []; for (let i = 0; i < numbers.length; i++) { doubled.push(numbers[i] * 2); } ✅ Modern Approach: const doubled = numbers.map(n => n * 2); Master These Methods: → .map() - Transform each element → .filter() - Keep elements that match → .reduce() - Calculate single value → .find() - Get first match → .some() / .every() - Test conditions Your code becomes: ✅ More readable ✅ Less error-prone ✅ Easier to maintain ✅ More functional Which array method do you use most? 💬 #JavaScript #CleanCode #WebDevelopment #CodingTips #ES6

Just caught a classic JavaScript mistake that had me scratching my head for a second! 🤦🏾♂️ I was setting up form validation with `blur` event listeners, and my validation functions were running immediately on page load instead of waiting for the user to leave the field. The culprit? I forgot to remove the parentheses when passing functions to event listeners When you include the parentheses `()`, JavaScript calls the function immediately and passes its return value to the event listener (which is usually `undefined`). Without the parentheses, you're passing a reference to the function itself, which gets called later when the event fires. It's a subtle difference, but it completely changes the behavior. The function reference waits for the event; the function call happens right away. A quick fix this time,thankfully. Easily done. #JavaScript #WebDevelopment #LearningInPublic

📌 JavaScript concat() Method – Explained Simply The concat() method in JavaScript is used to merge two or more arrays or strings and return a new combined result — without modifying the original data. 👉 Key Characteristics 🔹 Does not mutate the original array or string 🔹 Returns a new array or string 🔹 Preserves the order of elements 🔹 Can accept multiple arguments 👉 Why use concat()? 🔹 Ideal when you want to combine data safely 🔹 Helps maintain immutability, which is important in React and modern JavaScript 🔹 Makes code cleaner and more readable For arrays, concat() is often preferred over push() when you don’t want to change the original array. 🔁 Immutability leads to predictable and bug-free code. #JavaScript #WebDevelopment #Frontend #JSMethods #CleanCode #Learning

𝗧𝗵𝗲 𝗨𝗹𝗧𝗶𝗺𝗮𝗧𝗲 𝗚𝗨𝗶𝗱𝗲 𝗧𝗼 𝗝𝗮𝗩𝗮𝗦𝗰𝗿𝗶𝗽𝗧 𝗔𝗦𝗬𝗡𝗖 𝗔𝗪𝗔𝗜𝗧 𝗣𝗥𝗢𝗠𝗜𝗦𝗘𝗦 You want to know how JavaScript can do many things at once without freezing the browser. It uses Promises, async/await, and the Event Loop. Here's what you need to know: - Synchronous code runs line by line - Asynchronous code runs in the background - Promises represent a value you don't have yet - Async/await is syntax sugar for Promises - The Event Loop decides what runs next Key points: - Async/await pauses only the async function, not the entire program - The Event Loop keeps JavaScript moving - Microtasks (Promises, await) run before macrotasks (timers, events) - Always check for errors and handle them Example: ``` is not allowed, so here is a simple example console.log("Start"); setTimeout(() => console.log("Done"), 3000); console.log("End"); ``` Output: Start End Done JavaScript doesn't pause for setTimeout. It schedules the callback to run later. Source: https://lnkd.in/gda9qwdj

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