JavaScript Hoisting: Let Const Var Declarations Explained

🚀 JavaScript Hoisting — what it actually means (with a simple mental model) Most people say: “Variables and functions are moved to the top". Even the educators on youtube (some of them) are teaching that and even I remember answering that in my first interview call. That’s not wrong… but it’s also not the full picture. Then Priya what’s really happening? JavaScript doesn’t “move” your code. Instead, during execution, it runs in two phases: 1️⃣ Creation Phase Memory is allocated Variables → initialised as undefined Functions → fully stored in memory 2️⃣ Execution Phase Code runs line by line Values are assigned 🎨 Think of it like this: Before running your code, JavaScript prepares a “memory box” 📦 Creation Phase: a → undefined sayHi → function() { ... } Execution Phase: console.log(a) → undefined a = 10 🔍 Example 1 (var) console.log(a); // undefined var a = 10; 👉 Why? Because JS already did: var a = undefined; ⚡ Example 2 (function) sayHi(); // Works! function sayHi() { console.log("Hello"); } 👉 Functions are fully hoisted with their definition. 🚫 Example 3 (let / const) console.log(a); // ❌ ReferenceError let a = 10; 👉 They are hoisted too… But stuck in the Temporal Dead Zone (TDZ) until initialised. 🧩 Simple rule to remember: var → hoisted + undefined function → hoisted completely let/const → hoisted but unusable before declaration 💬 Ever seen undefined and wondered why? 👉 That’s hoisting working behind the scenes. #javascript #webdevelopment #frontend #reactjs #programming #100DaysOfCode

Ever faced a moment in JavaScript where something just didn’t make sense? 😅 I was debugging a small issue and saw this: 1 + "2" → "12" "5" - 2 → 3 [] == ![] → true At first, I thought I messed up somewhere… but nope — it was type coercion doing its thing. Basically, JavaScript tries to be “helpful” by converting values automatically. Sometimes it helps… sometimes it confuses you even more. Here are a few examples I explored 👇 • 1 + "2" → "12" (number becomes string) • "10" - 5 → 5 (string becomes number) • true + 1 → 2 • false + 1 → 1 • null + 1 → 1 • undefined + 1 → NaN • [] + [] → "" • [] + {} → "[object Object]" • {} + [] → 0 (weird one 👀) • [] == false → true • "0" == false → true • null == undefined → true • null === undefined → false What I learned from this 👇 → If there’s a string, + usually concatenates → Other operators (-, *, /) convert to number → == can trick you, === is safer Now whenever I see weird JS behavior… my first thought is: “Is type coercion involved?” 😄 #javascript #webdevelopment #coding #frontend #learning

Day 3: Hoisting — The JavaScript "Magic" That Isn't Magic at All! 🎩✨ Today, I tackled one of the most famous (and often misunderstood) concepts in JavaScript: Hoisting. If you've ever wondered why you can call a function before you even define it in your code, you've witnessed Hoisting in action! 🤔 What is Hoisting? Hoisting is a mechanism where variables and function declarations are moved to the top of their containing scope during the Memory Allocation Phase, before the code even starts executing. 🔍 Under the Hood (The Execution Context) Remember the "Big Box" (Execution Context) from Day 1? Here is what happens during the Memory Phase: Variables (var): JS allocates memory for variables and initializes them with a special value: undefined. Functions: JS stores the entire function body in memory. This is why: Calling a function at Line 1 works perfectly! ✅ Accessing a var at Line 1 returns undefined instead of an error! ⚠️ 💻 The Browser Demo (The Call Stack) Watching this live in the Sources tab of Chrome DevTools was a game-changer. Seeing the Global scope populate with variables before the first line of code executed made everything click. 💡 Interview Tip: When asked "What is Hoisting?", don't just say "it moves code to the top." Better Answer: "Hoisting is the process where the JS Engine allocates memory for variables and functions during the Creation Phase of the Execution Context. This allows us to access functions and variables even before they are initialized in the code, though var will return undefined until the execution reaches its assignment." Next up: Diving into how let and const handle hoisting differently (The Temporal Dead Zone!). Are you a var, let, or const person? Let's discuss below! 👇 #JavaScript #WebDevelopment #Hoisting #NamasteJavaScript #CodingInterviews #FrontendEngineer #ProgrammingLogic #JSFundamentals

🚀 **Understanding JavaScript Variables Like a Pro (var vs let vs const)** If you're working with JavaScript, choosing the right keyword — `var`, `let`, or `const` — is more important than you think. Here’s a simple breakdown 👇 🔸 **var** * Function scoped * Can be re-declared * Can be re-assigned * Hoisted with `undefined` 👉 Mostly avoided in modern JavaScript due to unexpected behavior. --- 🔹 **let** * Block scoped * Cannot be re-declared in same scope * Can be re-assigned * Hoisted but in Temporal Dead Zone (TDZ) 👉 Best for variables that will change. --- 🔒 **const** * Block scoped * Cannot be re-declared * Cannot be re-assigned * Must be initialized at declaration 👉 Best for constants and safer code. --- 💡 **Pro Tip:** Always prefer `const` by default → use `let` when needed → avoid `var`. --- 📊 The attached diagram explains: * Scope hierarchy (Global → Function → Block) * Memory behavior * Key differences visually --- 🔥 Mastering these fundamentals helps you: ✔ Write cleaner code ✔ Avoid bugs ✔ Crack interviews easily --- #JavaScript #WebDevelopment #Frontend #Coding #Programming #Developers #LearnToCode #Tech #SoftwareEngineering #NodeJs #Json

Why I don't chain everything in JavaScript anymore Method chaining in JavaScript looks elegant at first glance. But over time, I realized it often comes with hidden costs. Long chains can: • Reduce readability • Hide unnecessary computations • Make debugging harder When everything happens in a single line, understanding what exactly went wrong becomes a challenge. Instead, I started breaking logic into small, named steps: // ❌ Harder to read & debug const result = users .filter(u => u.active) .map(u => u.profile) .filter(p => p.age > 18) .sort((a, b) => a.age - b.age); // ✅ Easier to read & maintain const activeUsers = users.filter(u => u.active); const profiles = activeUsers.map(u => u.profile); const adults = profiles.filter(p => p.age > 18); const result = adults.sort((a, b) => a.age - b.age); A simple rule I follow now: • 1–2 chain steps → 👍 totally fine • 3–4 steps → 🤔 think twice • 5+ steps → 🚩 break it down Cleaner code isn’t about writing less — it’s about making it easier to understand. What’s your take on method chaining? #javascript #webdevelopment #cleancode #frontend #programming

Stop writing JavaScript like it’s still 2015. 🛑 The language has evolved significantly, but many developers are still stuck using clunky, outdated patterns that make code harder to read and maintain. If you want to write cleaner, more professional JS today, start doing these 3 things: **1. Embrace Optional Chaining (`?.`)** Stop nesting `if` statements or using long logical `&&` chains to check if a property exists. Use `user?.profile?.name` instead. It’s cleaner, safer, and prevents those dreaded "cannot read property of undefined" errors. **2. Master the Power of Destructuring** Don't repeat yourself. Instead of calling `props.user.name` and `props.user.email` five times, extract them upfront: `const { name, email } = user;`. It makes your code more readable and your intent much clearer. **3. Use Template Literals for Strings** Stop fighting with single quotes and `+` signs. Use backticks (`` ` ``) to inject variables directly into your strings. It handles multi-line strings effortlessly and makes your code look significantly more modern. JavaScript moves fast—make sure your coding habits are moving with it. What’s one JS feature you can’t live without? Let’s chat in the comments! 👇 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Frontend #Programming

🚀 JavaScript String Optimization You Probably Didn’t Know When you build strings in a loop like this: let bigString = ""; for (let i = 0; i < 1000; i++) { bigString += "chunk" + i; } It looks expensive… but surprisingly, it’s not (at first). 👉 JavaScript engines are smart. Instead of immediately creating a new string every time, they use something called a ConsString (concatenated string) — a lazy structure that avoids copying data. ⚡ This means: String building stays fast and memory-efficient No actual concatenation happens yet But here’s the catch… 💥 The moment you try to access the string (like bigString[0]), JavaScript materializes it — flattening everything into a real string, which can be expensive. 📌 Key Insight: Building strings → cheap Accessing/manipulating them → can trigger hidden cost 💡 Takeaway: Performance isn’t just about what you write — it’s about when the engine does the heavy work. #JavaScript #WebPerformance #CleanCode #Programming #FrontendDevelopment #DevTips #reactjs #webdevelopment

- One JavaScript Concept That Made Sense to Me For a while now, I had been using `var`, `let`, and `const`… without fully grasping the distinction between them. It seemed fine – until it wasn’t. Here’s what finally made sense 👇 👉 **Scope and immutability trump syntax** Here’s my approach: • `const` is the default • `let` is used for reassignment • `var` is never used Why? Because predictable code means less debugging. For instance: Using `const` guarantees variables don’t get altered unpredictably, making debugging and maintaining code much simpler. This little tweak helped me: ✔️ Create better code ✔️ Eliminate accidental bugs ✔️ Code more clearly Great JS developers don’t just code; they know how it works under the hood. 💬 What’s one JavaScript concept that you struggled with initially, but it eventually changed your coding practice? #JavaScript #Frontend #WebDevelopment #JSBasics #CleanCode #CodeQuality #Programming #SoftwareEngineering #CodingTips #DeveloperExperience #LearnInPublic #BuildInPublic #JSDeveloper #FrontendDev #BestPractices #CodeBetter #JavaScript #FrontendDevelopment #WebDevelopment #JSBasics #CleanCode #CodeQuality #Programming #SoftwareEngineering #CodingTips #DeveloperJourney #LearnInPublic #BuildInPublic #JSDeveloper #FrontendDev #BestPractices #CodeBetter

💡 Short Circuiting in JavaScript — Explained Simply In JavaScript, I came across a powerful concept called Short Circuiting. 👉 In simple words: JavaScript stops checking further values as soon as the result is decided. 🔹 OR (||) Operator It returns the first TRUE (truthy) value it finds. Example: console.log(false || "Javascript"); ✔️ Output: "Javascript" Another example: console.log(false || 10 || 7 || 15); ✔️ Output: 10 👉 Why? Because JavaScript finds 10 (true value) and stops checking further values 🔹 My Practice Code 👨💻 console.log("Short circuit in OR operator"); console.log(false || "Javascript"); console.log(false || "OR Operator"); console.log(false || 3); console.log(false || 10 || 7 || 15 || 20); // short circuit in OR operator console.log(false || "Javascript - client side scripting language" || "HTML - structure of web page" || "CSS - Cascading Style Sheet" || "Bootstrap - Framework of CSS"); 🔹 Recap: ✔️ JavaScript returns the first truthy value ✔️ It does not check remaining values once result is found ✔️ This makes code faster and efficient 📌 In simple words: Short Circuiting = JavaScript stops early when result is found #JavaScript #WebDevelopment #Coding #Learning #Frontend #100DaysOfCode

Just wrote a blog on the "new" keyword in JS Under the hood, new follows a precise process: • Creates a new empty object • Links it to the constructor’s prototype • Binds this to that object • Executes the constructor function • Returns the final instance If you're learning JavaScript or revisiting fundamentals, this will sharpen your understanding 👇 https://lnkd.in/gEitS7KJ #JavaScript #WebDevelopment #Frontend #Programming #Coding #LearnInPublic #Developers #SoftwareEngineering