How JavaScript Proxies Simplify Object Logic

😩 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

What is an Object? In JavaScript, an object is a data type that stores key-value pairs. Objects are used to store related information together. Why Use Objects? Organize Data: Store multiple pieces of information together. Dynamic Access: Access values using their keys. Complex Data Structures: Can store arrays, other objects, etc. Reusable Code: Easy to use in multiple functions or processes. #javascript #react #webdesign #webDeveloping

Is JS pass by value or reference ? What we generally think ? Primitives are passed by value; objects are passed by reference. The most shared example to validate this claim is const changeObj = (obj) => { obj.key1 = "value2"; console.log(obj.key1); // value2 }; const obj = { key1: "value1" }; console.log(obj.key1); // value1 changeObj(obj); console.log(obj.key1); // value2 Asking: what is pass by reference ? True References are Aliases. They actually share the same address. If you know a bit of C++, then you can understand this easily. #include <iostream> void swap(int& a, int& b) { int temp = a; a = b; b = temp; } int main() { int x = 5; int y = 6; // The values of x and y actually swap here. x = 6, y = 5 swap(x, y); } What javascript object references are ? JS object references are pointers. The variable points to object in memory. But if you try to reassign that variable inside a function to point to a completely new object? The original variable doesn't care. It still points to the original object. You can modify properties through the reference ✅ But you can't reassign the original variable ❌ Sources: 1. https://lnkd.in/gE7Zasm3 2. https://lnkd.in/ghvff7ED #javascript #til

🔥 JS Loops Demystified: for vs for…in vs for…of If you’ve ever wondered which loop to use in JavaScript, you’re not alone. Choosing the wrong one can cause subtle bugs! Here’s a quick guide: 1️⃣ Classic for loop – The old reliable const arr = [10, 20, 30]; for (let i = 0; i < arr.length; i++) {  console.log(arr[i]); } Use when you need index access, or want full control over iteration. 2️⃣ for…in loop – Iterate over keys (property names) const arr = [10, 20, 30]; for (let key in arr) {  console.log(key); // 0, 1, 2 } Works on objects too. ⚠️ Can be dangerous for arrays — also loops over inherited properties. 3️⃣ for…of loop – Iterate over values const arr = [10, 20, 30]; for (let value of arr) {  console.log(value); // 10, 20, 30 } Perfect for arrays, strings, maps, sets. Safe, clean, and readable. 💡 Pro tip: Use for when you need the index. Use for…of for values (most array iterations). Avoid for…in on arrays — reserve it for objects. Small choice, huge impact on readability and bug prevention. #JavaScript #CodingTips #WebDevelopment #FrontendDev #CleanCode #JSProTips #ForOfVsForIn

🔍 𝗛𝗼𝘄 `𝗪𝗲𝗮𝗸𝗠𝗮𝗽` 𝗮𝗻𝗱 `𝗪𝗲𝗮𝗸𝗦𝗲𝘁` 𝗛𝗲𝗹𝗽 𝗣𝗿𝗲𝘃𝗲𝗻𝘁 𝗠𝗲𝗺𝗼𝗿𝘆 𝗟𝗲𝗮𝗸𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Memory leaks can sneak up on any developer—even the most vigilant. Fortunately, JavaScript’s `WeakMap` and `WeakSet` offer powerful tools to manage object lifecycles and avoid lingering references. In this article, you’ll learn: ✅ What sets `WeakMap` and `WeakSet` apart from `Map` and `Set` ✅ How these weak-referenced structures let garbage collector clean up unused objects ✅ Practical patterns: caching objects safely, managing metadata, and building memory-safe data structures 👉 𝗥𝗲𝗮𝗱 𝘁𝗵𝗲 𝗳𝘂𝗹𝗹 𝗴𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲: https://lnkd.in/diZEe_k9 When your app runs longer, or handles complex object graphs, these tools are game-changers. #JavaScript #WebDevelopment #MemoryManagement #Performance #WeakMap #WeakSet #CodingTips

Why 0.1 + 0.2 0.3 in JavaScript: The Truth About Floating-Point Numbers Why 0.1 + 0.2 ≠ 0.3 in JavaScript If you’ve ever typed this into your console: 0.1 + 0.2 === 0.3 // false console.log(0.1 + 0.2) // 0.30000000000000004 …and felt confused, you’re not alone. This tiny difference has confused developers for years, but once you understand floating-point numbers, it all makes sense. JavaScript stores every number (except BigInt) as a 64-bit IEEE 754 floating-point value. That means numbers are represented in binary, not decimal. And here’s the problem: Some decimal numbers simply can’t be represented exactly in binary form. For example: 1/3 is an infinite repeating decimal in base 10: 0.333333... Similarly, 0.1 is an infinite repeating fraction in base 2 (binary). JavaScript can’t store infinite digits, so it rounds the value slightly. That’s why when you add 0.1 + 0.2, you get 0.30000000000000004. Every floating-point number is stored as three parts: Sign bit (positive or negative) Exponent (how large or small the number is) Mantissa (the precis https://lnkd.in/gTu_5jpP

Ever felt your codebase becoming a tangled mess of conditional logic, trying to manage a series of complex user actions or background tasks? I certainly have. Early in my career, I’d often find myself directly calling functions all over the place, making it a nightmare to add features like undo/redo or even just to test specific operations. That’s where the 𝗖𝗼𝗺𝗺𝗮𝗻𝗱 𝗣𝗮𝘁𝘁𝗲𝗿𝗻 came into play for me, especially in JavaScript. It’s a game-changer for decoupling the 'what' from the 'how'. Instead of directly executing an action, you encapsulate it as an object. This allows the sender to issue requests without knowing anything about the receiver. I've found three major wins with this pattern: 1. 𝗖𝗹𝗲𝗮𝗻𝗲𝗿 𝗖𝗼𝗱𝗲: It drastically simplifies your client code, making it more readable and maintainable by abstracting complex operations. 2. 𝗨𝗻𝗱𝗼/𝗥𝗲𝗱𝗼: Implementing history and rollback features becomes surprisingly straightforward, as each command object can store its own state and an 'unexecute' method. 3. 𝗧𝗲𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Each command becomes a self-contained unit, making isolated testing a breeze. I've put together a small, practical JavaScript code example to illustrate how simple yet powerful this can be – linking it in the comments below. It's a pattern that truly empowers you to build more robust and flexible applications. How do you approach managing complex actions or operational workflows in your JavaScript projects? Have you used the Command Pattern, or do you have other favorite strategies? Let’s discuss! 👇 #JavaScript #DesignPatterns #SoftwareArchitecture #WebDevelopment #CleanCode

Ever felt like your object creation logic was scattered across your codebase, making updates a nightmare? I certainly have. It’s a common pitfall, especially in larger JavaScript applications where you're instantiating similar objects with slightly different configurations. One pattern that consistently saves me from this headache is the 𝗙𝗮𝗰𝘁𝗼𝗿𝘆 𝗣𝗮𝘁𝘁𝗲𝗿𝗻. It’s not about over-engineering; it’s about intelligent delegation. Instead of calling `new` everywhere, you centralize the creation process into a single function or method. This approach brilliantly leverages JavaScript’s nature, where a simple function can act as your "factory." What I love about it is its simplicity and immense 𝗳𝗹𝗲𝘅𝗶𝗯𝗶𝗹𝗶𝘁𝘆. Need to change how an object is initialized, or even switch the underlying implementation? You update it in one place, and the ripple effect is contained. It significantly boosts 𝗺𝗮𝗶𝗻𝘁𝗮𝗶𝗻𝗮𝗯𝗶𝗹𝗶𝘁𝘆 and reduces the chance of introducing bugs. I once refactored a legacy system where user objects were created differently depending on context. Introducing a `createUser` factory function dramatically simplified the entire module's evolution. It becomes incredibly powerful when dealing with varying object types based on input, or when object initialization involves complex setup. I’ve included a simple example to illustrate how easily you can implement this concept. How do you handle complex object creation in your JavaScript projects? Have you found a different pattern more effective, or perhaps a scenario where Factory was a lifesaver? Share your insights below! 👇 #JavaScript #DesignPatterns #SoftwareEngineering #WebDevelopment #Frontend

🤔 Have you heard about the “𝗠𝗼𝗱𝘂𝗹𝗲 𝗣𝗮𝘁𝘁𝗲𝗿𝗻” in JavaScript? I was once asked this in an interview - and honestly, I went completely blank 😅 I had never heard of it before. Later, I realized it’s nothing new - it’s just 𝗰𝗹𝗼𝘀𝘂𝗿𝗲𝘀 + 𝗲𝗻𝗰𝗮𝗽𝘀𝘂𝗹𝗮𝘁𝗶𝗼𝗻 wrapped in a fancy term! Here’s what the Module Pattern actually means 👇 𝘐𝘵’𝘴 𝘢 𝘥𝘦𝘴𝘪𝘨𝘯 𝘱𝘢𝘵𝘵𝘦𝘳𝘯 𝘶𝘴𝘦𝘥 𝘵𝘰 𝘦𝘯𝘤𝘢𝘱𝘴𝘶𝘭𝘢𝘵𝘦 𝘤𝘰𝘥𝘦, 𝘬𝘦𝘦𝘱𝘪𝘯𝘨 𝘷𝘢𝘳𝘪𝘢𝘣𝘭𝘦𝘴 & 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯𝘴 𝘱𝘳𝘪𝘷𝘢𝘵𝘦 𝘸𝘩𝘪𝘭𝘦 𝘦𝘹𝘱𝘰𝘴𝘪𝘯𝘨 𝘰𝘯𝘭𝘺 𝘸𝘩𝘢𝘵’𝘴 𝘯𝘦𝘤𝘦𝘴𝘴𝘢𝘳𝘺. 🔹Below adding the counter example how we can achieve this : const CounterModule = (function(){  // Private variable  let _count = 0;     // Private function  function _log(){   console.log('Current count:', _count);  }     // public function (return an object)  return{   increment: function(){    _count++;    _log();   },       decrement: function(){    _count--;    _log();   },       reset: function(){    _count=0;    _log();   }  }; })(); CounterModule.increment(); // Current count: 1 CounterModule.increment(); // Current count: 2 CounterModule.decrement(); // Current count: 1 CounterModule.reset(); // Current count: 0 console.log(CounterModule.count); // undefined (private) ✅ Key points:    count and log() are private — not accessible outside.    Only increment, decrement, and reset are public. ⚡ Why it’s useful: ✔ Encapsulation of logic ✔ Avoids global namespace issues ✔ Exposes only what’s needed ✔ Improves maintainability