Akshat Uppal’s Post

🤯 𝐓𝐡𝐞 𝐕𝐚𝐫𝐢𝐚𝐛𝐥𝐞 𝐕𝐢𝐛𝐞 𝐂𝐡𝐞𝐜𝐤: 𝒗𝒂𝒓 𝐯𝐬. 𝒍𝒆𝒕 𝐯𝐬. 𝒄𝒐𝒏𝒔𝒕 If you've ever felt like your JavaScript variables were causing trouble, you might be right! Choosing the wrong declaration keyword can lead to bugs, leaks, and general chaos. Here is the quick, no-nonsense guide to who these three are and when to use them: 1. 𝒗𝒂𝒓(𝐓𝐡𝐞 𝐓𝐫𝐨𝐮𝐛𝐥𝐞𝐦𝐚𝐤𝐞𝐫) 🚫 𝐒𝐜𝐨𝐩𝐞: 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧-𝐬𝐜𝐨𝐩𝐞𝐝  (it leaks out of loops and blocks). 𝐑𝐞-𝐚𝐬𝐬𝐢𝐠𝐧𝐦𝐞𝐧𝐭: Allowed. 𝐓𝐡𝐞 𝐋𝐞𝐬𝐬𝐨𝐧: A legacy keyword. 𝐃𝐨𝐧'𝐭 𝐮𝐬𝐞 𝐢𝐭 in modern code. 2. 𝒍𝒆𝒕 (𝐓𝐡𝐞 𝐅𝐥𝐞𝐱𝐢𝐛𝐥𝐞 𝐎𝐧𝐞) 📝 𝐒𝐜𝐨𝐩𝐞: 𝐁𝐥𝐨𝐜𝐤-𝐬𝐜𝐨𝐩𝐞𝐝 ({ } are its boundaries). 𝐑𝐞-𝐚𝐬𝐬𝐢𝐠𝐧𝐦𝐞𝐧𝐭: Allowed (you can change the value). 𝐓𝐡𝐞 𝐋𝐞𝐬𝐬𝐨𝐧: Use it for variables where the value 𝐧𝐞𝐞𝐝𝐬 𝐭𝐨 𝐜𝐡𝐚𝐧𝐠𝐞 (like a counter in a loop or a score). 3. 𝒄𝒐𝒏𝒔𝒕  (𝐓𝐡𝐞 𝐃𝐞𝐟𝐚𝐮𝐥𝐭 𝐂𝐡𝐨𝐢𝐜𝐞) ✅ 𝐒𝐜𝐨𝐩𝐞: 𝐁𝐥𝐨𝐜𝐤-𝐬𝐜𝐨𝐩𝐞𝐝. 𝐑𝐞-𝐚𝐬𝐬𝐢𝐠𝐧𝐦𝐞𝐧𝐭: 𝐍𝐨𝐭 𝐚𝐥𝐥𝐨𝐰𝐞𝐝 (the binding is permanent, though object properties can still change). 𝐓𝐡𝐞 𝐋𝐞𝐬𝐬𝐨𝐧: This should be your 𝐝𝐞𝐟𝐚𝐮𝐥𝐭 𝐜𝐡𝐨𝐢𝐜𝐞 for almost everything. Use it unless you know the value will be updated. 𝐓𝐡𝐞 𝐆𝐨𝐥𝐝𝐞𝐧 𝐑𝐮𝐥𝐞: Start with const. If you get an error because you need to update the variable later, and only then, switch to let. Save yourself the debugging headache! What percentage of the time do you find yourself using const? I'm aiming for 90% plus! #JavaScript #WebDevTips #CodingBestPractices #FrontEndDevelopment #constletvar

🚀 Ever wondered why a for loop with var logs 3,3,3 — but the same loop with let logs 0,1,2? It’s not magic — it’s JavaScript’s scoping and binding behavior at play 👇 🧩 The Classic Mystery for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } // Output: 3, 3, 3 for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } // Output: 0, 1, 2 💡 The Hidden Truth var is function-scoped, so it creates one single binding for the entire loop. ➜ All 3 callbacks share the same i. ➜ By the time they run, i = 3. let is block-scoped — and in a for loop, JavaScript creates a fresh binding per iteration. ➜ Each callback remembers its own copy of i. ➜ So it prints 0, 1, 2. ⚙️ Behind the Scenes You can imagine it like this: 🧠 var → One shared box 🧳 🧠 let → A new box every iteration 📦 When the async setTimeout runs later, all var callbacks open the same box (value = 3), while each let callback opens its own box (0, 1, 2). ✅ What You Should Use In modern JavaScript: 🔹 Always prefer let or const over var. They give cleaner scoping, fewer bugs, and predictable async behavior. 💬 Have you ever debugged this “3,3,3” issue before? Drop your story or how you solved it ⬇️ #JavaScript #WebDevelopment #Coding #JSDeepDive #Frontend #Developers #LearnInPublic

😩 I changed one object... and everything else broke. Classic JavaScript moment. You think you’ve copied an object — but you’ve only cloned the surface. Here’s what happened to me recently 👇 const user = { name: "John", address: { city: "Berlin" } }; const clone = { ...user }; clone.address.city = "Paris"; console.log(user.address.city); // 😱 "Paris" Wait — what?! I just wanted a copy… not to move the entire family. 🧠 What’s going on? The spread operator { ...obj } or Object.assign() only makes a shallow copy. That means nested objects or arrays still share references with the original. So when you mutate one, the other changes too. ✅ The Fix If you need a deep copy, you have a few safe options: // 1️⃣ Simple & built-in (modern JS) const deepClone = structuredClone(user); // 2️⃣ Old-school workaround const deepClone = JSON.parse(JSON.stringify(user)); // 3️⃣ For complex cases (like Dates, Maps, etc.) import _ from "lodash"; const deepClone = _.cloneDeep(user); Now user and deepClone are fully independent. 💡 Takeaway > A shallow copy copies values. A deep copy copies the entire structure. Know which one you need — or your state bugs will come back to haunt you. 👻 🗣️ Your Turn Have you ever been burned by this shallow copy issue? What’s your go-to method for safe cloning? #JavaScript #WebDevelopment #CodingTips #FrontendDevelopment #CleanCode #ProgrammingBugs #ES6 #CodeSmarter #DevCommunity

💛 𝗗𝗮𝘆 𝟮 — 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀, 𝗦𝗰𝗼𝗽𝗲, 𝗮𝗻𝗱 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 Today, I revisited one of the most confusing yet powerful concepts in JavaScript — 𝗵𝗼𝗶𝘀𝘁𝗶𝗻𝗴 and 𝘀𝗰𝗼𝗽𝗶𝗻𝗴. 🧠 💡 𝗖𝗼𝗻𝗰𝗲𝗽𝘁: JavaScript moves all declarations to the top of their scope during compilation — this is known as hoisting. However, the behavior differs based on whether you use var, let, const, or functions. 💻 𝗖𝗼𝗱𝗲 𝗦𝗻𝗶𝗽𝗽𝗲𝘁: console.log(a); // undefined (hoisted) var a = 10; console.log(b); // ❌ ReferenceError (in TDZ) let b = 20; sayHello(); // ✅ Works — function declarations are hoisted function sayHello() { console.log("Hello from a hoisted function!"); } // ❌ Error: sayHi is not a function sayHi(); var sayHi = function () { console.log("Hi from function expression!"); }; 🧩 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻: 0. var is hoisted and initialized with undefined. 1. let and const are hoisted but stay uninitialized in the temporal dead zone (TDZ). 2. Function declarations are fully hoisted, so you can call them before defining. 3. Function expressions (especially when assigned to var) behave like variables — hoisted but not initialized. 📈 𝗦𝗰𝗼𝗽𝗲 𝗪𝗶𝘀𝗱𝗼𝗺: var → function scope let & const → block scope Functions → create their own local scope 🔥 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Understanding how JavaScript creates and executes contexts will help you debug faster and think more like the JS engine itself. #JavaScript #100DaysOfCode #Hoisting #Scope #Functions #FrontendDevelopment #LearningEveryday

💡 Finding the Middle of a Linked List — The Clean JavaScript Way When working with linked lists, one of the classic questions is: “How do you find the middle node?” The obvious solution is to: 1️⃣ Traverse once to count all nodes. 2️⃣ Traverse again to reach the middle. That works — but it’s not optimal. 🚀 Here’s the elegant two-pointer technique in JavaScript: function findMiddle(head) { let slow = head; let fast = head; while (fast !== null && fast.next !== null) { slow = slow.next; fast = fast.next.next; } return slow; // middle node } ✨ The idea: fast moves twice as fast as slow. When fast hits the end, slow is right in the middle. One pass. Clean logic. No extra space. This trick isn’t just useful for linked lists — it’s a great reminder that thinking in pointers often leads to the most elegant algorithms. #JavaScript #DataStructures #Algorithms #CodingTips #LinkedList #ProblemSolving #TechLearning

🚀 5 Quick Facts About Arrays in JavaScript 1️⃣ Dynamic & Flexible – You can store numbers, strings, or even objects in the same array. 🧩 const arr = [1, "two", true]; 2️⃣ Technically Objects – typeof [] returns "object", not "array". ✅ Use Array.isArray(arr) to be sure. 3️⃣ Built for Efficiency – Use map(), filter(), and reduce() to write clean, functional code. 4️⃣ Spread Operator Power – Combine or clone arrays effortlessly. ⚙️ const merged = [...arr1, ...arr2]; 5️⃣ Zero-Indexed – The first element starts at index 0. 📍 arr[0] gives the first item. Arrays are more powerful than they look — master them, and your JS code will be cleaner, faster, and smarter 💡 #JavaScript #WebDevelopment #CodingTips #Arrays #DeveloperLife

💛 𝗗𝗮𝘆 𝟯 — 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 Today’s focus was one of the most powerful and favorite topics in JavaScript — 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 🔁 💡 𝗖𝗼𝗻𝗰𝗲𝗽𝘁: A closure gives a function access to its outer scope even after the outer function has finished execution. This enables data encapsulation, function factories, and state preservation. 💻 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝟭 — 𝗕𝗮𝘀𝗶𝗰 𝗖𝗹𝗼𝘀𝘂𝗿𝗲: function outer() {  let count = 0;  return function inner() {   count++;   console.log("Count:", count);  }; } const counter = outer(); counter(); // Count: 1 counter(); // Count: 2 🧠 Here, inner() remembers the variable count from outer() even after it’s done — that’s closure in action! 💻 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝟮 — 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗨𝘀𝗲: Closures power concepts like private variables: function createUser(name) {  return {   getName: function () {    return name;   },  }; } const user = createUser("Ravi"); console.log(user.getName()); // Ravi 🧠 𝗞𝗲𝘆 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴𝘀: ✅ Inner functions retain references to outer scope variables. ✅ Closures are the backbone of callbacks, event handlers, and functional programming. ✅ Used in frameworks like React (hooks rely on closure principles). 🔥 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Closures aren’t magic — they’re just functions remembering where they came from. #JavaScript #Closures #Functions #FrontendDevelopment #100DaysOfCode #LearningEveryday

Most of the time, when someone asks how the JS Engine executes code, we simply say: “JavaScript is interpreted line by line.” Then we start explaining Call Stack, Execution Context, and Memory Heap — and that’s true… But do you know what’s really happening behind the scenes? 👀 Modern JS engines like V8 (Chrome), SpiderMonkey (Firefox), Chakra (Edge), and JavaScriptCore (Safari) are doing insane hidden optimizations to make JS run almost as fast as compiled C++! ⚡ 🧩 1️⃣ Modern Function Execution Structure (Activation Record / Call Frame) 🚀 2️⃣ Hidden Optimizations You (Probably) Didn’t Know About: 🔥 Inline Caching (IC) 🧱 Hidden Classes ⚡ Function Inlining (Very Advanced) 🕶️ Lazy Parsing 💨 Escape Analysis 🔁 Deoptimization 🏗️ JIT Compilation Pipeline (V8) All happening while your app is running! 🚀 ⚡ In Short: JavaScript isn’t just “interpreted.” It’s interpreted + optimized + compiled + deoptimized — all dynamically, in milliseconds. Next time someone asks “How does the JS engine execute code?”, don’t stop at “Call Stack” and “Execution Context.” Say this 👇 “Modern JS engines like V8 use JIT compilation, inline caching, hidden classes, escape analysis, and deoptimization to execute JavaScript at near-native speed 💪.” #JavaScript #V8Engine #WebPerformance #Frontend #NodeJS #Coding #HappyCoding #WebDevelopment