JS Property Accessors: Performance & Real-World Use Cases

𝗪𝗵𝗲𝗿𝗲 𝗱𝗼𝗲𝘀 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗹𝗶𝘃𝗲? 🗺️ 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 — Explanation & Answer ✅ Why This Map Has Two Entries This morning’s code was: const map = new Map(); map.set({}, "first"); map.set({}, "second"); console.log(map.size); 💡 Correct Output 2 Yes — two entries, not one 😄 Here’s why 👇 🧠 Simple Explanation : 🔹 Objects are compared by reference, not by value Even though both keys look like {}: {} !== {} Each {} creates a new object in memory. So JavaScript sees this as: Key 1 → one object reference Key 2 → another object reference They are completely different keys. 🔹 How Map works Map allows any type as a key Keys are matched by reference Different object references → different entries So: map.size // 2 🎯 Key Takeaways : Map keys are compared by reference {} and {} are never the same key Objects are not value-equal by default This behavior is different from plain objects 📌 To use the same key, you must reuse the same reference: const key = {}; map.set(key, "first"); map.set(key, "second"); 💬 Your Turn Did you expect the size to be 1 or 2? 😄 Comment “Got it wrong 😅” or “Knew this 👍” #JavaScript #LearnJS #FrontendDevelopment #CodingInterview #Maps #TechWithVeera #WebDevelopment

🚀 JavaScript Tip: Say Goodbye to "Try-Catch Hell" in 2026! If your code looks like a nested pyramid of try-catch blocks just to handle a simple API call, you’re doing it the old way. The Safe Assignment Operator (?=) is officially changing how we handle errors. It treats errors as data, not as exceptions that crash your flow. ❌ THE OLD WAY (Messy & Nested): let user; try { const response = await fetch("https://lnkd.in/gEfuSwaq"); user = await response.json(); } catch (error) { console.error("Failed to fetch user:", error); } ✅ THE 2026 WAY (Clean & Linear): const [error, user] ?= await fetch("https://lnkd.in/gEfuSwaq").then(res => res.json()); if (error) return console.error("Failed:", error); console.log(user); Why developers are switching: • No more deep nesting or "let" variables defined outside blocks. • Logic remains top-to-bottom and easy to read. • It feels like Go or Rust, bringing "Error as Value" to the JS ecosystem. Are you still using traditional try-catch for everything, or have you moved to safe assignments yet? Let’s discuss in the comments! 👇 #JavaScript #WebDev #Coding #SoftwareEngineering #CleanCode #Programming #ReactJS #TechTrends

📘 Day 69: JavaScript Loops (for & while) 🔹 Loops in JavaScript • Loops are used to repeat a block of code multiple times • Helpful for continuous iteration and data processing • <br> is often used with document.writeln() to print on new lines 🔸 For Loop 💡 Structure: for(start; condition; step) • Executes code while the condition is true • Order in JS: 1️⃣ Initialize → 2️⃣ Check condition → 3️⃣ Print → 4️⃣ Increment Example: for(let i=0;i<10;i++) prints 0–9 🔸 Start, Stop, Step • i=0 → start • i<10 → stop condition • i+=2 or i+=3 → step (skip values) • Useful for controlling iteration speed 🔸 For…of Loop • Used to print values from: ✅ Arrays ✅ Sets ✅ Maps Example: for(let i of array) → prints elements one by one 🔸 For…in Loop • Used mainly for Objects • Prints keys (indexes/properties) To print key + value: object[key] Example output: Name : John 🔸 While Loop • Runs while condition is true • Manual increment is required Example: while(i<=10) 🔸 Step in While Loop • Controlled using i+=2, i+=3, etc. • Helps skip numbers and reduce iterations ✨ Today’s focus was mastering iteration techniques in JavaScript — a core skill for handling arrays, objects, and dynamic data efficiently. #JavaScript #Day69 #WebDevelopment #JSLoops #ForLoop #WhileLoop #CodingJourney #FrontendDevelopment #LearnJavaScript #ProgrammingBasics #DeveloperJourney

I’ve seen a frontend app break in production… because someone updated a library that wrapped three lines of JavaScript. That moment changes you. Somewhere along the way, we started treating libraries as solutions instead of trade-offs. Need debouncing? Need state? Need formatting, sorting, or validation? Before npm install, it’s worth asking: Is this actually complex… or just unfamiliar? Libraries aren’t evil. But every dependency: • Increases bundle size • Adds upgrade risk • Introduces bugs you didn’t write and can’t easily debug I wrote about how to tell when a library is genuinely doing heavy lifting — and when it’s just hiding simple logic behind an import. 👉 Read it here: https://lnkd.in/e5epbx6a #FrontendDevelopment #JavaScript #WebDev #SoftwareEngineering #CleanCode #DevLife #Programming

🚀 Back with Part 3! The technical deep dive series continues and we only have one more to go. We've all faced this scenario: You build a perfect Button component. Then, a requirement comes in to make it a link. Panic sets in. You can't wrap a <button> in an <a>. So you copy-paste the styles and create a <LinkButton />. Now you have duplicate code and Technical Debt. In this article, I tackle how to solve this using React Polymorphism. Instead of just syntax, I explore: 🦎 An Analogy: Using a Chameleon to explain how one component can change its skin based on the environment. 🏗️ Visualizing the Architecture: Rigid Blocks vs. Adaptive Systems. 🛡️ TypeScript Generics: How to use the as prop with strict type safety. ⚡ Developer Experience: Why libraries like MUI and Radix are built this way. This is the third step in my journey documenting insights on Software Architecture and Clean Code, especially with TypeScript and React. If you want to stop duplicating code and start building scalable Design Systems, this read is for you. Have you implemented Polymorphic components in your projects yet? Let’s discuss below! #TypeScript #React #CleanCode #SoftwareEngineering #WebDevelopment #Frontend #DesignSystems

Objects in JavaScript are like containers that store related data together. Think of them as a digital filing cabinet where everything about one thing lives in one place. 🎯 What is an Object? An object is a collection of key-value pairs. Instead of having 10 separate variables, you group them logically. Without objects: let userName = "Sarah" let userAge = 28 let userCity = "NYC" With objects: let user = { name: "Sarah", age: 28, city: "NYC" } See how much cleaner that is? 💡 Why Use Objects? → Organization: Keep related data together → Scalability: Easy to add new properties → Readability: Code makes more sense → Reusability: Pass one object instead of multiple variables 🔧 Essential Object Methods You Need to Know: Object.keys() - Get all property names let user = {name: "John", age: 30} Object.keys(user) // ["name", "age"] Object.values() - Get all values Object.values(user) // ["John", 30] Object.entries() - Get key-value pairs Object.entries(user) // [["name", "John"], ["age", 30]] Object.assign() - Copy or merge objects let newUser = Object.assign({}, user, {city: "LA"}) Object.freeze() - Make object immutable Object.freeze(user) // Can't modify anymore Object.seal() - Allow edits but no new properties Object.seal(user) // Can change values, can't add new keys hasOwnProperty() - Check if property exists user.hasOwnProperty("name") // true 🎁 Pro Tip: Use objects whenever you have data that belongs together. If you're passing more than 2-3 parameters to a function, consider using an object instead. Objects are the foundation of JavaScript. Master them and everything else becomes easier. What's your favorite object method? Drop it in the comments! #JavaScript #WebDevelopment #Coding #Programming #WebDev #LearnToCode #SoftwareDevelopment #CodeNewbie #100DaysOfCode

𝗩𝗗𝗢𝗠-𝗹𝗲𝘀𝘀 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵𝗲𝘀 𝗧𝗼 𝗥𝗲𝗮𝗰𝘁𝗶𝗳𝗲 𝗨𝗜 React, Svelte, and SolidJS solve the same problem: keeping the DOM in sync with application state. They take different approaches: - React diffs Virtual DOM trees at runtime - Svelte compiles reactive updates at build time - SolidJS tracks fine-grained dependencies at runtime Each approach has tradeoffs. Understanding them helps you choose the right tool. DOM mutations aren't slow. What's slow is the browser work that follows. The goal is to minimize unnecessary DOM operations while keeping the UI in sync with state. React describes what the UI should look like and figures out the minimal DOM updates needed. When state changes: - React calls the component function again - A new Virtual DOM tree is created - React diffs the new tree against the previous one - Only the changed parts are applied to the real DOM Benefits of React: - Large ecosystem and community - Predictable mental model - Mature tooling Drawbacks of React: - Overhead from diffing - Runtime includes the reconciler and scheduler Svelte shifts work from runtime to build time. The compiler analyzes your code and generates vanilla JavaScript that updates the DOM directly. Benefits of Svelte: - Smallest runtime footprint - No diffing overhead - Less boilerplate Drawbacks of Svelte: - Uses custom syntax - Smaller ecosystem SolidJS looks like React but works differently. Components run once, not on every update. Benefits of SolidJS: - Near-Svelte performance with React-like syntax - No diffing overhead - Fine-grained control over what updates Drawbacks of SolidJS: - Signals are functions - Smaller ecosystem Choose a framework based on your actual constraints, not benchmark results. All three frameworks produce working applications. The differences are in developer experience, performance characteristics, and ecosystem maturity. Source: https://lnkd.in/gAJDBYtV

👯♂️ "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