"Understanding Copying in JavaScript: Reference vs Value"

#100DaysLearningChallenge with Saurabh Shukla Sir. 🎯 Day 19: Set in JavaScript — Ensuring Uniqueness and Efficiency 🔁✨ Yesterday, I worked with the Priority Queue, mastering how priorities influence data processing. Today, I explored another powerful built-in data structure — the Set — a simple yet efficient way to manage unique collections of values in JavaScript. 🧠 What’s a Set? A Set is a special type of collection that stores unique values, whether primitive types or object references. It automatically removes duplicates, making it a great tool for scenarios where uniqueness is essential. 🛠️ What I learned and implemented: ✅ Created and managed Sets to store unique data ✅ Added, deleted, and checked elements efficiently ✅ Explored key Set methods like add(), delete(), has(), and clear() ✅ Practiced converting between Arrays and Sets ✅ Used Sets to eliminate duplicates from arrays effortlessly 📂 Real-world use cases: ➡️ Removing duplicates from data collections ➡️ Managing unique user IDs or tokens ➡️ Tracking visited nodes in graph algorithms ➡️ Optimizing lookups and membership checks 👨💻 Sets may seem simple, but they play a crucial role in writing cleaner, faster, and more reliable code. 📒 Try creating your own examples — experiment with methods and combine Sets with other data structures for powerful results! 📹 Video reference (MySirG): https://lnkd.in/gfu-c8Tb 💻 Source Code (GitHub): https://lnkd.in/gStvbMtw 🚀 From managing priorities to maintaining uniqueness — every day, one concept stronger! #100DaysLearningChallenge #Day19 #Set #JavaScript #DataStructures #CleanCode #LearningInPublic #DevJourney #AlgoDaily #CodeSmart

🚀 Deep Clone an Object in JavaScript (the right way!) Most of us have tried this at least once: const clone = JSON.parse(JSON.stringify(obj)); …and then realized it breaks when the object has functions, Dates, Maps, or undefined values 😬 Let’s fix that 👇 ❌ The Problem with JSON.parse(JSON.stringify()) >It’s quick, but it: >Removes functions >Converts Dates into strings >Skips undefined, Infinity, and NaN >Fails for Map, Set, or circular references ✅ Option 1: Use structuredClone() (Modern & Fast) Available in most modern browsers and Node.js (v17+). It can handle Dates, Maps, Sets, and even circular references — no errors, no data loss. const deepCopy = structuredClone(originalObject); Simple, native, and reliable 💪 ✅ Option 2: Write Your Own Recursive Deep Clone Useful for older environments or if you want to understand the logic behind cloning. 💡 Pro Tip: If you’re working with complex or nested data structures, always prefer structuredClone(). It’s the modern, built-in, and safest way to deep clone objects in JavaScript. 🔥 Found this useful? 👉 Follow me for more JavaScript deep dives made simple — one post at a time. #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #LearnJavaScript #Programming #DeveloperCommunity #WebDev #ES6 #JSDeveloper #JavaScriptTips #JavaScriptObjects #JavaScriptClone #JavaScriptCloneObject

𝐄𝐯𝐞𝐫 𝐰𝐨𝐧𝐝𝐞𝐫𝐞𝐝 𝐰𝐡𝐞𝐫𝐞 𝐲𝐨𝐮𝐫 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐥𝐢𝐯𝐞? Let’s make it super simple. Imagine your brain has two spaces — a tiny desk for quick tasks and a big cupboard for storing bulky stuff. That’s exactly how JavaScript manages memory 👇 🧠 𝕊𝕥𝕒𝕔𝕜 𝕄𝕖𝕞𝕠𝕣𝕪 = The Desk This is where small, quick items go — numbers, strings, booleans. It’s fast, neat, and clears up right after you’re done. 𝚕𝚎𝚝 𝚗𝚊𝚖𝚎 = "𝙰𝚗𝚊𝚜"; 𝚕𝚎𝚝 𝚊𝚐𝚎 = 𝟸𝟼; Both variables fit nicely on the stack. 📦 ℍ𝕖𝕒𝕡 𝕄𝕖𝕞𝕠𝕣𝕪 = The Cupboard This is for bigger and more complex things — objects, arrays, functions. It takes more space and time to access. 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛 = { 𝚗𝚊𝚖𝚎: "𝙰𝚗𝚊𝚜", 𝚊𝚐𝚎: 𝟸𝟼 }; The object is stored in the heap, but a reference to it sits in the stack. ⚖️ In short: Stack → fast, organized, for simple data Heap → flexible, powerful, for dynamic data Understanding this helps you write cleaner code, avoid memory leaks, and truly know what happens “under the hood.” #JavaScript #CodingTips #WebDevelopment #LearnInPublic #Frontend #AnasKhan

Going back to basics 🌱 Where Javascript stores Your data "Stack" vs "Heap Memory" ? have you ever wondered where your values are actually stored ? JavaScript manages memory in two main places - 1. "Stack Memory" Used for primitive values (like numbers, strings, booleans) and function calls. It is small but super fast. 2. "Heap Memory" Used for objects, arrays, and functions (reference types). It is larger and used for dynamic data that can grow or shrink. When Javascript executes the code, the "Stack" holds the variable name directly, while user stores only a reference (a pointer) to the object, and that object actually lives in the "Heap". So when you pass "user" around, you are really passing a "reference" to the data in the "heap" not the data itself. #JavaScript #Frontend

🚀 JavaScript Revision Series — Day 2 Today I revised one of the most important concepts in JavaScript: Primitive vs Reference Data Types — the reason why kabhi kabhi code “unexpected” behave karta hai 😅 🟡 Primitive Data Types (String, Number, Boolean, Null, Undefined, Symbol, BigInt) 📌 They always pass copies, so original value safe. 🔵 Reference Data Types (Arrays, Objects, Functions) 📌 They pass reference, so ek me change = dono me change. Example: arr2 = arr1; arr2.pop(); 👉 Dono arrays change 😭 --- 😄 Little JavaScript Moment Real life: 5 + 1 = 6 JavaScript: "5" + 1 = "51" Why? Because JS said: > “+? Oh, you want string mode!” 😂 But "5" - 1 = 4, kyun? > “Subtraction? Number mode on!” --- 🔍 Extra Concepts Covered ✔ typeof ✔ == vs === ✔ Type conversion basics --- 🔗 Daily Practice Repo: https://lnkd.in/ejQk84Zg Learning step by step, and enjoying the process! 💻✨ #JavaScript #JavaScriptBasics #LearningJourney #WebDevelopment #FrontendDevelopment #CodingJourney #MERNStack #MernStackLearner #ConsistencyIsKey #Saylani #SMIT #DeveloperCommunity

JavaScript for 15 Days – Day 3: Data Types Every value in JavaScript has a data type, it tells the program what kind of data we’re working with. Today, you'll explore the difference between primitive and non-primitive data types, and how JavaScript uses them to store and process information. Primitive types: String, Number, Boolean, Null, Undefined, Symbol, BigInt Non-primitive types: Object, Array, Function Example 👇 let name = "Moussa"; // String let age = 27; // Number let skills = ["JS", "HTML", "CSS"]; // Array 💡 Lesson learned: Understanding data types makes debugging easier and helps you write cleaner, more reliable code. #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearnToCode #15DaysJS #DevPerDay

🟦 Day 182 of #200DaysOfCode Today, I explored one of the most important concepts in JavaScript data handling — ✨ Deep Cloning a Nested Object Manually. In JavaScript, objects are stored by reference. So if you simply assign or shallow copy an object, any nested changes will still affect the original one. To truly create an independent copy, we need a deep clone — where every nested level is recreated. 🔍 What I built: A custom deepClone() function that: ✔ Loops through every key in the object ✔ Checks if a value is another object ✔ Uses recursion to clone deeply nested structures ✔ Returns a completely separate copy Why this matters? Deep cloning is essential when working with: • React state management • Redux reducers • Complex forms • API response manipulation • Saving snapshots of data without mutation 🧠 Key Takeaways: • Understanding reference vs value is crucial in JS • Recursion is a powerful tool for traversing deep structures • Manual deep cloning builds strong mental models of how objects behave • These fundamentals help you write safer, more predictable code This was one of those exercises where a simple concept reveals a deeper layer of how JavaScript actually works behind the scenes. Master the basics → scale effortlessly into advanced topics. #JavaScript #182DaysOfCode #LearnInPublic #DeepClone #Recursion #ProblemSolving #WebDevelopment #LogicBuilding #CodingChallenge #DeveloperMindset #ObjectsInJS

Understanding Type Conversion in JavaScript" After learning about Data Types, today I explored Type Conversion — the process of changing one data type to another in JavaScript. It helps when we need to handle user inputs, calculations, or string operations properly. 💡 There are two types 👇 1️⃣ Implicit Conversion (Type Coercion) – JavaScript automatically converts the type console.log('5' + 2); // "52" (number converted to string) console.log('5' - 2); // 3 (string converted to number) 2️⃣ Explicit Conversion (Manual Conversion) – done by the developer let str = "100"; let num = Number(str); console.log(num); // 100 (converted to number) let value = 50; let text = String(value); console.log(text); // "50" (converted to string) Type conversion helps make code more reliable and avoids unexpected results. 🚀 #JavaScript #WebDevelopment #TypeConversion #LearnToCode #FrontendDevelopment #CodingJourney #ProgrammingBasics #100DaysOfCode #TechLearning #DeveloperCommunity

🧠 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗦𝘁𝗮𝗰𝗸 & 𝗛𝗲𝗮𝗽 𝗠𝗲𝗺𝗼𝗿𝘆 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝗠𝗮𝗱𝗲 𝗦𝗶𝗺𝗽𝗹𝗲!) When your JavaScript code runs, data is stored and managed in two main areas: 👉 𝗦𝘁𝗮𝗰𝗸 𝗠𝗲𝗺𝗼𝗿𝘆 👉 𝗛𝗲𝗮𝗽 𝗠𝗲𝗺𝗼𝗿𝘆 But what are they? And why should you care as a developer? Let’s break it down 👇 ⚡ 𝗦𝘁𝗮𝗰𝗸 𝗠𝗲𝗺𝗼𝗿𝘆: Fast & Organized - 𝗦𝘁𝗮𝗰𝗸 is like a pile of plates 🍽️ - you add or remove items from the top, one at a time. It stores 𝗽𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝗮𝗹𝘂𝗲𝘀 like numbers, strings, and booleans, as well as function calls. When a function finishes, its data is automatically removed - quick and efficient! 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: If you copy a primitive value (let a = 10; let b = a; b = 20;), they are stored separately. Changing 𝗯 𝘄𝗼𝗻’𝘁 𝗮𝗳𝗳𝗲𝗰𝘁 𝗮 because each has its own copy in the stack. 🧩 𝗛𝗲𝗮𝗽 𝗠𝗲𝗺𝗼𝗿𝘆: Flexible but Slower - 𝗛𝗲𝗮𝗽 is like a storage room 🏠 - lots of space, but less organized. It stores 𝗻𝗼𝗻-𝗽𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝗮𝗹𝘂𝗲𝘀 such as objects, arrays, and functions. When you assign one object to another (let user2 = user1;), both point to the same location in heap memory. 𝗦𝗼 𝗰𝗵𝗮𝗻𝗴𝗶𝗻𝗴 𝗼𝗻𝗲 𝗮𝗳𝗳𝗲𝗰𝘁𝘀 𝘁𝗵𝗲 𝗼𝘁𝗵𝗲𝗿 - because they share the same reference. 🧠 𝗛𝗼𝘄 𝗦𝘁𝗮𝗰𝗸 & 𝗛𝗲𝗮𝗽 𝗪𝗼𝗿𝗸 𝗧𝗼𝗴𝗲𝘁𝗵𝗲𝗿 When you create a variable:  • The stack stores the variable name and reference.  • The heap stores the actual object or data. 𝗦𝘁𝗮𝗰𝗸 is for order and control, 𝗵𝗲𝗮𝗽 is for flexibility and storage. 📌 𝗜𝗻 𝗦𝗶𝗺𝗽𝗹𝗲 𝗧𝗲𝗿𝗺𝘀: 𝗦𝘁𝗮𝗰𝗸 → Fast, small, stores primitive values 𝗛𝗲𝗮𝗽 → Large, shared, stores objects and arrays 🍽️ Stack = neatly arranged plates 🏠 Heap = messy storage room #JavaScript #StackAndHeap #ProgrammingTips

🔥 Day 33 of #100DaysLearningChallenge 🧠 Topic: How to Handle JSON Files in JavaScript (Node.js) 📘 Overview Today, I learned how to read and access data from a JSON file using JavaScript in Node.js. JSON (JavaScript Object Notation) is one of the most common formats for storing and exchanging data — and knowing how to handle it in JS is super useful! 📂 What the JSON File Contains: ✅ Simple values → strings, numbers, booleans ✅ Nested objects → e.g. a client object with multiple properties ✅ Arrays → lists of numbers or strings ✅ Arrays of objects → e.g. a score array containing multiple records ⚙️ How It Works 1️⃣ Loading the JSON File We can use require() in Node.js to import the JSON file. It automatically parses it and returns a JavaScript object. ✔️ typeof data → returns "object" 2️⃣ Iterating Through the Data We loop through each property using for...in. Depending on the type of data, we handle it differently: Simple values (string, number, boolean): print key-value pairs Arrays: If it contains numbers → print each number If it contains objects → use a nested loop to access each property Nested objects: loop through their internal keys and values 💡 Key Concepts Learned 🔹 Type Checking: typeof helps detect if a value is a primitive or object 🔹 Array Detection: instanceof Array distinguishes arrays from objects 🔹 Nested Loops: Used for deep data traversal 🔹 Error Handling: Always good to wrap in try-catch for safety 🧩 Expected Output Example: name - Rohan age - 34 is_active - true id - A101 username - rohan123 30 40 25 60 f1 - 23 f2 - 25 f3 - 27 ... This method allows reading all data — even deeply nested structures — easily! 🙏 Special Thanks to Saurabh Shukla Sir for explaining everything so clearly and practically. 💻 My Code: https://lnkd.in/d4TnHZGj) #100DaysLearningChallenge #JavaScript #NodeJS #JSON #WebDevelopment #Backend #Programming #DataHandling #CodingJourney