JavaScript Array Fill() Gotcha: Why You Got Copy-Paste Chaos

🧠 Why does let create a new closure in every loop iteration in JavaScript? Ever wondered why this works perfectly 👇 for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Output: 0, 1, 2 …but this doesn’t 👇 for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Output: 3, 3, 3 That’s not “compiler magic” — it’s actually defined in the ECMAScript specification itself. 📜 --- 📘 ECMA Definition From ECMA-262 §13.7.4.8 – Runtime Semantics: ForBodyEvaluation: > If the loop variable is declared with let or const, a new LexicalEnvironment is created for each iteration. The variable is copied (rebound) from the previous environment and used to evaluate the loop body in this new environment. --- 🔍 What This Means Every time the loop runs: JavaScript creates a new environment record (a fresh closure). The loop variable (i) is independent for that iteration. Each callback “remembers” its own copy of i. So effectively: var → single shared binding across all iterations. let / const → new closure per iteration. --- ✅ In short: let is not just about block scoping — it’s about creating predictable closures inside loops by design. #JavaScript #ECMAScript #Closures #Frontend #WebDevelopment #CodingTips #LearnInPublic

💡 JavaScript Tip: The Magical length Property of Arrays 😎 Most developers know that array.length gives the number of elements… But do you know how powerful (and tricky) it actually is? Let’s explore 👇 --- 🔹 1. Length is not read-only const arr = [1, 2, 3, 4]; arr.length = 2; console.log(arr); // [1, 2] 👉 Setting length truncates the array! All elements beyond the new length are removed. --- 🔹 2. You can also extend the array const arr = [1, 2]; arr.length = 5; console.log(arr); // [1, 2, <3 empty items>] 👉 Empty slots are created (they’re not undefined, they’re missing). --- 🔹 3. Length doesn’t always mean “last index + 1” const arr = []; arr[5] = 42; console.log(arr.length); // 6 👉 Sparse arrays have holes — indexes 0 to 4 don’t exist, but length still counts the last index + 1. --- 🔹 4. Deleting items doesn’t reduce length const arr = [10, 20, 30]; delete arr[1]; console.log(arr.length); // 3 console.log(arr); // [10, <1 empty item>, 30] 👉 The hole remains — length ignores deletions! --- ⚡ Quick Recap: Operation Effect on length push() / unshift() Increases pop() / shift() Decreases delete arr[i] No change arr.length = n Trims or extends --- 💭 Takeaway: length is not just a property — it’s a controller of your array’s shape and size. Handle it carefully to avoid silent bugs! --- #JavaScript #WebDevelopment #Frontend #CodingTips #JSArrays

Reflection & Object Composition in Modern JavaScript In JavaScript, objects don’t just store values — they can look at themselves and manipulate their own properties. That’s the power of Reflection. Reflection enables patterns like Object Composition, a clean, modern alternative to long prototype chains. Reflection in Action const john = { firstname: "John", lastname: "Doe" }; for (let prop in john) { if (john.hasOwnProperty(prop)) { console.log(prop + ": " + john[prop]); } } Output: firstname: John lastname: Doe Object Composition — the ES6+ Way Instead of relying on libraries like Lodash or Underscore, modern JS gives us built-ins: 1️⃣ Object.assign() Object.assign(john, { address: "123 Main St" }, { getFirstName() { return this.firstname; } }); 2️⃣ Spread Operator (ES2018) const extendedJohn = { ...john, address: "123 Main St", getFirstName() { return this.firstname; } }; Object.assign() → Mutates the object Spread { ...obj } → Creates a new one Why It Matters No external libraries needed Clean, readable syntax Full control over mutation or immutability 100% native and widely supported Takeaway: With ES6+, Object.assign() and the spread operator { ...obj } give you all the power of extend, natively — Reflection + Composition, the modern way. #JavaScript #ES6 #FrontendDevelopment #WebDevelopment #CleanCode #ProgrammingTips #React #TypeScript

💡 var, let, and const — The Three Musketeers of JavaScript ⚔️ If you’ve ever felt confused about when to use var, let, or const… you’re not alone. Even JavaScript sometimes forgets 😅 Let’s break it down like friends who share the same coffee machine ☕👇 ⸻ 🧓 var — The Old Guy from 1995 “I’ve seen things… global scope, function scope… chaos.” var name = "John"; if (true) { var name = "Doe"; console.log(name); // Doe } console.log(name); // Doe 😬 🧠 var doesn’t care about blocks. It’s function-scoped, gets hoisted, and often causes unexpected overwrites. 👉 Use only if you’re writing code for Internet Explorer 6 (please don’t 😂). ⸻ 🧑💻 let — The Responsible Adult “I respect boundaries.” let fruit = "Apple"; if (true) { let fruit = "Mango"; console.log(fruit); // Mango } console.log(fruit); // Apple ✅ 🧠 let is block-scoped and doesn’t get initialized until it’s declared. Perfect for values that will change later. ⸻ 🧘♀️ const — The Calm Monk “Once decided, I never change.” const pi = 3.14; // pi = 3.14159 ❌ Error 🧠 const is also block-scoped, but you can’t reassign it. (However, you can still mutate objects 👇) const person = { name: "John" }; person.name = "Doe"; // ✅ Allowed ⸻ 💬 My rule of thumb: 🧠 Use const by default → switch to let when you have to change it → forget var exists. ⸻ ✨ What’s your most funny or painful var moment? Drop it below 👇 #JavaScript #WebDevelopment #Frontend #CodingHumor #ReactJS

💡 Have you ever wondered why these two JavaScript loops behave differently? for (let i = 0; i < 10; i++) {  setTimeout(() => console.log(i), 0); } for (var i = 0; i < 10; i++) {  setTimeout(() => console.log(i), 0); } It’s because of the default behavior of how let and var work in JavaScript. If you’re familiar with JavaScript, you may know that let is block-scoped, while var is function/global-scoped. In the case of let, since it’s block-scoped, it creates a new variable i and assigns a value to it during each iteration. So, each i points to a different memory location — kind of like a house with multiple rooms, and each room contains its own variable called i. That’s why it logs 0 to 9 after the wait is over. But in the case of var, since it’s function/global-scoped, the variable is created only once and points to the same memory location. So it logs 10 ten times. It’s similar to writing: var i; for (i = 0; i < 10; i++) {  setTimeout(() => console.log(i), 0); } #Javascript #Frontend

I Thought I Knew JavaScript… Until I Compared Two Objects 😅 🚀 Today I learned something that seems simple at first — but it completely changed how I think about JavaScript objects! In JavaScript, objects, arrays, and functions are compared by reference, not by value. That means: const obj1 = { a: 1, b: 2 } const obj2 = { a: 1, b: 2 } console.log(obj1 === obj2); // false Even though they look identical, they’re actually stored in different memory locations. Each time you write { a:1, b:2 }, you’re creating a new object in memory. However, if you assign one object to another variable: const obj1 = { a:1, b:2 }; const obj2 = obj1; console.log(obj1 === obj2); // true Now both variables reference the same memory address — so a change in one reflects in the other. Understanding this subtle difference between reference and value comparison helped me better grasp how caching, memoization, and equality checks work under the hood in JS. Takeaway: Objects are shared by reference, but compared by memory address. #JavaScript #WebDevelopment #Learning #CodingJourney #TechInsights

🚀 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

 You think you know React... until you have to clean up a third-party script. I had a major "Aha!" moment building my Financial dashboard project, and it's a perfect example of how React's declarative world meets imperative, real-world JavaScript. The Problem: I'm integrating TradingView's embeddable widgets, which aren't React components. This requires manually creating <script> tags and injecting them into a div using a useEffect hook. The Naive Approach: Just create the script in useEffect and let React unmount the div when it's done. Simple, right? Wrong. This creates massive memory leaks. The third-party script (the "tenant") running inside my div (the "house") has its own background processes: setIntervals, WebSockets, and global event listeners. When React unmounts the div (demolishes the house), it doesn't tell the tenant to clean up. The "ghost" tenant lives on, still fetching data and consuming memory. The Solution & The "Aha!" Moments: 1. The "Stale Ref" Problem: My first attempt at a cleanup function failed because ref.current is null when the cleanup runs! The Fix: You have to snapshot the ref's value inside the effect: const node = ref.current;. The cleanup function's closure then remembers this node, even after ref.current is nullified. 2. The "Tenant Eviction" Model: This was the real lightbulb moment. Why clean the div with node.innerHTML = "" if React is removing it anyway? The Fix: The cleanup is not for React. It's a signal for the third-party script. Setting innerHTML = "" is like "evicting the tenant." The script is built to detect this, triggering its own internal destroy() logic—clearing its timers, closing its connections, and actually preventing the memory leak. Takeaway: React manages its own lifecycle, but we are 100% responsible for the lifecycle of any imperative, non-React code we introduce. This dive was a powerful lesson in JavaScript closures, React's lifecycle, and robust memory management. #reactjs #javascript #webdevelopment #frontend #MERNstack #reacthooks #memorymanagement #learning #coding

🔗 JavaScript Polyfill for bind() — Deep Dive Ever wondered how bind() actually works under the hood? Let’s build our own polyfill for Function.prototype.bind() 👇 💡 What does bind() do? It returns a new function with a permanently bound this value (and optional preset arguments). --- 🧠 Native Example const person = { name: 'Prince' }; function greet(greeting) { console.log(`${greeting}, ${this.name}!`); } const sayHello = greet.bind(person, 'Hello'); sayHello(); // Hello, Prince! --- 🧩 Polyfill Implementation if (!Function.prototype.myBind) { Function.prototype.myBind = function (context, ...args1) { if (typeof this !== 'function') { throw new TypeError('Bind must be called on a function'); } const fn = this; return function (...args2) { return fn.apply(context, [...args1, ...args2]); }; }; } ✅ Works like bind() — preserves this and supports partial arguments! --- ⚙️ Example Usage const user = { name: 'Prince' }; function sayHi(time) { console.log(`Hi ${this.name}, good ${time}!`); } const morningGreet = sayHi.myBind(user, 'morning'); morningGreet(); // Hi Prince, good morning! --- 🚀 Key Takeaways bind() returns a new function, doesn’t call immediately. Helps fix this context in callbacks and event handlers. Polyfilling boosts your understanding of function internals. --- #JavaScript #WebDevelopment #Frontend #Coding #LearnInPublic #Polyfill #JSDeepDive #100DaysOfCode

⚛️ That moment when I just wanted to access an element... and React said “NO re-rendering allowed!” 😂 I was building a simple input box and needed to focus it when a button was clicked. Naturally, I thought: “Easy! I’ll use useState().” So I did something like this 👇 ❌ Before: function InputFocus() { const [input, setInput] = useState(null); const handleClick = () => { input.focus(); }; return ( <> <input ref={setInput} /> <button onClick={handleClick}>Focus</button> </> ); } And then React said: “Wait... you’re updating state just to get a DOM element?” 😩 That’s when I discovered useRef() — my quiet, reliable hook friend that doesn’t trigger re-renders. 🧘♂️ ✅ After using useRef(): function InputFocus() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} /> <button onClick={handleClick}>Focus</button> </> ); } 💡 Lesson learned: useRef() stores a mutable value that survives re-renders. Perfect for accessing DOM elements or saving values without causing updates. No unnecessary renders. No chaos. Just pure focus. 🎯 React hooks each have their own “superpower” — and useRef() is the stealthy one! 🦸♀️ #ReactJS #useRef #ReactHooks #FrontendDeveloper #MERNStack #WebDevelopment #LearningByDoing #JavaScript #ReactTips #CodingJourney