JavaScript Map Keys Compared by Reference

Reversing a string in JavaScript can be done in more than one way. I revisited this problem today and tried three approaches, each with a different mindset: // 1. Using built-in methods const reverse1 = (str) => str.split("").reverse().join(""); // 2. Using a loop (more control) function reverse2(str) {  let result = "";  for (let i = str.length - 1; i >= 0; i--) {   result += str[i];  }  return result; } // 3. Using reduce (functional style) const reverse3 = (str) =>  str.split("").reduce((acc, char) => char + acc, ""); console.log(reverse1("hello")); //"olleh" console.log(reverse2("hello")); //"olleh" console.log(reverse3("hello")); //"olleh" Methods I used: • Built-in methods → concise and readable • Loop → full control and clarity • reduce → functional and expressive This reminded me that in real projects, how you think about a problem matters as much as the answer itself. Still learning, still building, still showing up. #JavaScript #FrontendDevelopment #LearningInPublic #JuniorDeveloper

𝗪𝗲𝗹𝗰𝗼𝗺𝗲 𝘁𝗼 𝗗𝗮𝘆 𝟵 Have you ever updated one variable… and another one changed automatically? 𝙋𝙖𝙪𝙨𝙚 𝙛𝙤𝙧 𝙖 𝙨𝙚𝙘𝙤𝙣𝙙 — 𝙬𝙤𝙪𝙡𝙙 𝙮𝙤𝙪 𝙚𝙭𝙥𝙚𝙘𝙩 𝙩𝙝𝙞𝙨 𝙘𝙤𝙙𝙚 𝙩𝙤 𝙢𝙪𝙩𝙖𝙩𝙚 𝙗𝙤𝙩𝙝 𝙫𝙖𝙡𝙪𝙚𝙨? { 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛𝟷 = { 𝚗𝚊𝚖𝚎: "𝙰𝚕𝚎𝚡" }; 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛𝟸 = 𝚞𝚜𝚎𝚛𝟷; 𝚞𝚜𝚎𝚛𝟸．𝚗𝚊𝚖𝚎 = "𝙹𝚘𝚑𝚗"; 𝚌𝚘𝚗𝚜𝚘𝚕𝚎．𝚕𝚘𝚐(𝚞𝚜𝚎𝚛𝟷．𝚗𝚊𝚖𝚎); // "𝙹𝚘𝚑𝚗" } Why did user1 change? Because: • Both variables point to the same memory address • No copy was created • Only the reference was shared 𝘛𝘩𝘪𝘴 𝘪𝘴 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵’𝘴 𝘝𝘢𝘭𝘶𝘦 𝘷𝘴 𝘙𝘦𝘧𝘦𝘳𝘦𝘯𝘤𝘦 𝘣𝘦𝘩𝘢𝘷𝘪𝘰𝘳 — 𝘢𝘯𝘥 𝘪𝘵’𝘴 𝘥𝘦𝘦𝘱𝘭𝘺 𝘵𝘪𝘦𝘥 𝘵𝘰 𝘮𝘦𝘮𝘰𝘳𝘺. 𝙏𝙝𝙚 𝙈𝙚𝙣𝙩𝙖𝙡 𝙈𝙤𝙙𝙚𝙡 (𝙈𝙚𝙢𝙤𝙧𝙮 𝙁𝙞𝙧𝙨𝙩) JavaScript mainly uses two memory areas: -> Stack Memory • Stores primitive values • Fixed size • Fast access -> Heap Memory • Stores objects, arrays, functions • Dynamic size • Accessed via references 𝙒𝙝𝙚𝙣 𝙥𝙖𝙨𝙨𝙚𝙙 𝙗𝙮 𝙫𝙖𝙡𝙪𝙚: A copy of the actual value is passed. Primitives (number, string, boolean, null, undefined, symbol) are always passed by value. 𝙒𝙝𝙚𝙣 𝙥𝙖𝙨𝙨𝙚𝙙 𝙗𝙮 𝙧𝙚𝙛𝙚𝙧𝙚𝙣𝙘𝙚: A memory address (reference) is passed, not the object itself. Objects & arrays live in heap memory. #JavaScript #JSFundamentals #MemoryManagement #FrontendDevelopment #ReactJS #BugFixing #InterviewPrep #LearningInPublic

Day 67 of me reading random and basic but important dev topicsss..... Today I read about the Advanced JavaScript Range Properties & Methods..... Yesterday, I looked at the fundamentals of creating a Range in the DOM. Today, I explored the properties and convenience methods that make traversing and building these ranges highly efficient. When integrating raw DOM logic into frameworks like React, knowing these native shortcuts saves us from writing manual, bug-prone offset calculations. Core Range Properties: When we inspect a Range object, it gives us crucial contextual data: * startContainer / startOffset: The exact node and position where the range begins. * endContainer / endOffset: The node and position where the range ends. * collapsed: A boolean. true if the start and end are at the exact same point (think of a blinking text cursor with no characters highlighted). * commonAncestorContainer: The deepest parent element that fully wraps the entire range. (Incredibly useful for validating if a user's selection is contained within a specific UI component!). Pro Methods (Skip the math!): Instead of calculating exact indexes with setStart and setEnd, you can leverage semantic methods: * setStartBefore(node) / setStartAfter(node): Drops the boundary right outside a target node. * selectNode(node): Creates a range that encompasses the entire node, including its outer HTML tags. * selectNodeContents(node): Selects only the inside of the node......perfect for instantly capturing all the text inside a <div> or <p>. * collapse(toStart): Instantly shrinks the range to just its starting or ending cursor point. Keep Learning!!!!!! #JavaScript #WebDevelopment #DOM #FrontendDev

𝐂++ 𝐚𝐧𝐝 𝐉𝐚𝐯𝐚 𝐝𝐞𝐯𝐬 𝐠𝐞𝐭 𝐛𝐮𝐢𝐥𝐭-𝐢𝐧 𝐜𝐨𝐩𝐲 𝐜𝐨𝐧𝐬𝐭𝐫𝐮𝐜𝐭𝐨𝐫𝐬. 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐝𝐞𝐯𝐬 𝐠𝐞𝐭 𝐭𝐫𝐮𝐬𝐭 𝐢𝐬𝐬𝐮𝐞𝐬. 🚩 Let’s talk about constructors—the factory blueprints for our objects. In JavaScript, setting up a constructor is pretty straightforward. You have your 𝐍𝐨𝐧-𝐏𝐚𝐫𝐚𝐦𝐞𝐭𝐞𝐫𝐢𝐳𝐞𝐝 constructors (handing out default values like participation trophies) and your 𝐏𝐚𝐫𝐚𝐦𝐞𝐭𝐞𝐫𝐢𝐳𝐞𝐝 constructors (passing in actual, useful data). But then you try to clone an object. JavaScript looks at you, shrugs, and says, "Figure it out yourself." Unlike other languages, JS doesn't have a built-in copy constructor. If you lazily type `const newObj = oldObj;`, you didn't create a copy. You just created a new reference to the exact same memory location. The moment you change `newObj`, you mutate `oldObj`, your UI breaks, your tests fail, and your PM is asking why the dashboard is upside down. To truly copy an instance of a class, you have to build your own `copy()` method to explicitly return a `new` instance with the cloned data. Stop trusting the assignment operator (`=`). It is lying to you. 𝐂𝐨𝐧𝐟𝐞𝐬𝐬𝐢𝐨𝐧 𝐭𝐢𝐦𝐞: 𝐇𝐨𝐰 𝐦𝐚𝐧𝐲 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧 𝐛𝐮𝐠𝐬 𝐡𝐚𝐯𝐞 𝐲𝐨𝐮 𝐜𝐚𝐮𝐬𝐞𝐝 𝐛𝐲 𝐚𝐜𝐜𝐢𝐝𝐞𝐧𝐭𝐚𝐥𝐥𝐲 𝐦𝐮𝐭𝐚𝐭𝐢𝐧𝐠 𝐚 𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞𝐝 𝐨𝐛𝐣𝐞𝐜𝐭 𝐢𝐧𝐬𝐭𝐞𝐚𝐝 𝐨𝐟 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐜𝐨𝐩𝐲𝐢𝐧𝐠 𝐢𝐭? 𝐋𝐞𝐭'𝐬 𝐡𝐞𝐚𝐫 𝐭𝐡𝐞 𝐡𝐨𝐫𝐫𝐨𝐫 𝐬𝐭𝐨𝐫𝐢𝐞𝐬 𝐢𝐧 𝐭𝐡𝐞 𝐜𝐨𝐦𝐦𝐞𝐧𝐭𝐬. 👇 #JavaScript #WebDevelopment #SoftwareEngineering #MERNStack #CodingHumor #DeveloperLife #TechTips #Programming

𝗪𝗵𝗲𝗿𝗲 𝗱𝗼𝗲𝘀 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗹𝗶𝘃𝗲? 🗺️ Hi everyone! I just published Part 3 of my JavaScript deep-dive series on Medium! After looking at the engine and hoisting, we’re now moving into the "geography" of our code: 𝗦𝗰𝗼𝗽𝗲 𝗮𝗻𝗱 𝘁𝗵𝗲 𝗦𝗰𝗼𝗽𝗲 𝗖𝗵𝗮𝗶𝗻. If you've ever been confused by a variable "leaking" out of a loop, or wondered why you can't access a variable inside a function, this one is for you. 𝗜𝗻 𝘁𝗵𝗶𝘀 𝗽𝗮𝗿𝘁, 𝗜 𝗰𝗼𝘃𝗲𝗿:  • 𝗧𝗵𝗲 4 𝗠𝗮𝗶𝗻 𝗦𝗰𝗼𝗽𝗲𝘀: Global, Function, Block, and the often-ignored Module scope. • 𝗜𝗺𝗽𝗹𝗶𝗰𝗶𝘁 𝗚𝗹𝗼𝗯𝗮𝗹𝘀: Why "forgetting" to declare a variable can pollute your entire app.  • 𝗧𝗵𝗲 𝗦𝗵𝗮𝗱𝗼𝘄𝗶𝗻𝗴 𝗘𝗳𝗳𝗲𝗰𝘁: What happens when inner and outer variables have the same name.  • 𝗧𝗵𝗲 𝗦𝗰𝗼𝗽𝗲 𝗖𝗵𝗮𝗶𝗻: How the engine "climbs the ladder" to find your data.  • 𝗦𝗲𝗰𝗿𝗲𝘁 𝗦𝗰𝗼𝗽𝗲𝘀: Exploring the hidden scopes of Parameters and Named Function Expressions. Mastering scope is the key to writing clean, bug-free, and memory-efficient code. Read the full article here : https://lnkd.in/dCyyNdMh 🔗 𝗡𝗲𝘅𝘁 𝘀𝘁𝗼𝗽 𝗼𝗻 𝘁𝗵𝗲 𝘁𝗼𝘂𝗿: The wild world of 𝗖𝗼𝗲𝗿𝗰𝗶𝗼𝗻. Stay tuned! #JavaScript #WebDevelopment #Scope #SoftwareEngineering #TechCommunity #Medium #ProgrammingTips

🌙 Evening Post — Function Reference vs Function Call (Very Important!) This morning’s code was: function show() { return "Hello"; } console.log(show); console.log(show()); 💡 Correct Output : [ Function : show ] Hello (Exact formatting may vary by browser, but the meaning is the same.) 🧠 Simple Explanation : 🔹 Line 1: console.log(show); Here, we are NOT calling the function. show refers to the function itself JavaScript prints the function definition This is called a function reference So the output shows something like: [ Function : show ] 👉 You’re telling JS: “Show me the function, not run it.” 🔹 Line 2: console.log(show()); Now the function IS called. show(); // returns "Hello" So this becomes: console.log("Hello"); ✔ Output: Hello 🎯 Key Takeaways : show → function reference (no execution) show() → function execution Functions in JS are values, just like numbers or strings You can pass functions around without calling them 📌 This difference is very important in: callbacks event handlers React props higher-order functions 💬 Your Turn Did you already know this difference? 😄 Comment “Clear now ✅” or “Didn’t notice this before 🤯” #JavaScript #LearnJS #FrontendDevelopment #CodingInterview #Functions #TechWithVeera #WebDevelopment

👯♂️ "I changed the copy, why did the original update too?!" 😱 If you’ve ever screamed this at your monitor, you’ve fallen into the Shallow Copy Trap. 🪤 In JavaScript, objects and arrays are reference types. When you copy them, it matters how you do it. 1️⃣ The Shallow Copy (The "Surface" Clone) Methods like the spread operator [...] or Object.assign() only copy the first layer of data. - If your object has nested objects inside (like user.address.city), the copy points to the same memory location as the original. - Result: You change the copy's address, and the original user's address changes too. Bugs everywhere. 🐛 2️⃣ The Deep Copy (The "True" Clone) This creates a completely independent duplicate, including all nested levels. - The Old Way: JSON.parse(JSON.stringify(obj)) (Hack, but works for simple data). - The Modern Way: structuredClone(obj) (Native, fast, and handles dates/maps correctly). 🚀 Next time you are updating state in React or manipulating complex data, ask yourself: Do I need a clone, or do I need a twin? What is your go-to method for deep cloning these days? structuredClone or Lodash? 👇 #JavaScript #WebDevelopment #CodingTips #Frontend #ReactJS #SoftwareEngineering #Programming

🌙 Evening Post — Why This if Block Always Runs This morning’s code was: let a = []; if (a) { console.log("Yes"); } else { console.log("No"); } 💡 Correct Output Yes This surprises many people 😄 Let’s understand why step by step. 🧠 Simple Explanation : 🔹 Key Rule in JavaScript 👉 In JavaScript, all objects are truthy. And: [] // is an object Even though the array is empty, it still exists in memory. So JavaScript treats it as: true 🔹 What happens in the if condition? if (a) Here: a is [] [] is truthy So the if block runs 👇 console.log("Yes"); That’s why the output is: Yes ❗ Common Mistake Beginners Make Many people think: Empty array [] → falsy ❌ Empty object {} → falsy ❌ But actually: [] → truthy ✅ {} → truthy ✅ Only these are falsy in JS: false 0 "" (empty string) null undefined NaN 🎯 Key Takeaways : Empty arrays are truthy Empty objects are truthy Truthy/falsy is about type, not size This question appears often in interviews 📌 If you want to check if an array is empty, do this instead: a.length === 0 💬 Your Turn Did you expect "Yes" or "No"? 😄 Comment “Got confused 😅” or “Clear now ✅” #JavaScript #LearnJS #FrontendDevelopment #CodingInterview #Basics #TechWithVeera #WebDevelopment

🚀Done with yesterday's Live class of Object oriented JS by Hitesh Choudhary, Piyush Garg🚀 🔹learned how the 'this' keyword works -normal fn have this but arrow fn don't have -but in nested function normal fn don't have and arrow fn have 'this' -Typeof 'this' is 'object' 🔹Now u may have heared so many times that 'this' poinst to the global object but this is wrong ❌ actually when ever someone ask's u that where does 'this' points first ask them back that where are u runnging 'this' as if u run it in browser then it will point to 'Window object'✔️ or if u run it in node then it will point to 'empty object {}'✔️ 🔹We don't get the reference of the variable in the Detached method 🔹Call => when we need to change the value of 'this' by our own 🔹apply => same as call but we can pass array here 🔹bind => same as call and bind but here we get the reference of the fn that we can use anywhere in the code 🔹New keyword => follow 4 steps -create a brand new empty object -every function has a prototype. Even the object itself also has prototype we LINK both of them together -now comes “this”, whoever calls it will bind with caller reference. bind “this” to new object - automatically the newly created object is returned by the Constructor Explicit return of object #JS #OOPS #new #call #apply #Bind #THIS #LEarnInPublic