Add guide and examples for shallow vs deep copy in JS

Introduced a markdown guide explaining the differences between shallow and deep copy in JavaScript, including definitions, methods, and visual diagrams. Added a JavaScript file with practical code examples demonstrating shallow and deep copy techniques, their effects, and a custom deep copy function.

Author: adityaSrivastava29

DeepCopyVSShallowCopy/shallow-deep-copy.md

@@ -0,0 +1,136 @@
+# Shallow Copy vs Deep Copy in JavaScript
+
+Understanding how JavaScript handles data updating is crucial when working with objects and arrays. This guide explains the differences between Shallow Copy and Deep Copy.
+
+## Primitive vs Reference Types
+
+Before diving into copying, it's important to remember:
+*   **Primitive types** (string, number, boolean, etc.) are passed by **value**.
+*   **Reference types** (objects, arrays) are passed by **reference**.
+
+## Shallow Copy
+
+A **shallow copy** creates a new object, but it does not create copies of nested objects. Instead, it copies the *references* to those nested objects.
+
+NOTE : A shallow copy duplicates the outer container while preserving references to all nested objects, causing shared mutable state across copies.
+
+### Definition
+*   Top-level properties are copied by value (if primitive).
+*   Nested objects/arrays are copied by reference.
+*   **Consequence**: Modifying a nested object in the copy **changes the original**.
+
+### How to create a Shallow Copy
+1.  `Object.assign()`
+2.  Spread Operator `[...]` or `{...}`
+
+### Example
+
+```javascript
+let original = {
+  name: "Aditya",
+  social: {
+    twitter: "@aditya"
+  }
+};
+
+let shallowCopy = { ...original };
+
+shallowCopy.name = "Ashok"; // Does NOT affect original (Top-level primitive)
+shallowCopy.social.twitter = "@newHandle"; // AFFECTS original (Nested reference)
+
+console.log(original.name); // "Aditya"
+console.log(original.social.twitter); // "@newHandle" - CHANGED!
+```
+
+### Visual Representation
+
+```mermaid
+graph LR
+    subgraph Memory
+        Obj1[Object: {name: "Aditya"}]
+        Obj2[Object: {name: "Ashok"}]
+        Nested[Shared Nested Object: {twitter: "@newHandle"}]
+    end
+
+    Original[Original Var] --> Obj1
+    Copy[Shallow Copy Var] --> Obj2
+
+    Obj1 -- reference --> Nested
+    Obj2 -- reference --> Nested
+
+    style Nested fill:#f9f,stroke:#333
+```
+
+> [!WARNING]
+> Use shallow copies only when your object structure is flat (no nested objects) or when you specifically want shared state for nested items.
+
+---
+
+## Deep Copy
+
+A **deep copy** creates a completely independent clone of the original object, including all nested objects.
+NOTE : Deep copy recreates the entire object graph with no shared references, requiring recursive traversal and new allocations for every nested structure.
+
+### Definition
+*   recursively copies all properties.
+*   New memory references are created for every nested object.
+*   **Consequence**: Modifying the copy **never affects the original**.
+
+### How to create a Deep Copy
+1.  `JSON.parse(JSON.stringify(obj))` (Simple, but has limitations: no functions, symbols, or undefined).
+2.  `structuredClone(obj)` (Modern standard).
+3.  Lodash `_.cloneDeep(obj)` (External library).
+4.  Recursive custom function.
+
+### Example
+
+```javascript
+let original = {
+  name: "Aditya",
+  social: {
+    twitter: "@aditya"
+  }
+};
+
+let deepCopy = JSON.parse(JSON.stringify(original));
+
+deepCopy.social.twitter = "@deepNew";
+
+console.log(original.social.twitter); // "@aditya" - Unchanged!
+console.log(deepCopy.social.twitter); // "@deepNew"
+```
+
+### Visual Representation
+
+```mermaid
+graph LR
+    subgraph Memory
+        Obj1[Original Object]
+        Nested1[Nested Object 1]
+        
+        Obj2[Deep Copied Object]
+        Nested2[Nested Object 2]
+    end
+
+    Original[Original Var] --> Obj1
+    Obj1 -- reference --> Nested1
+
+    Copy[Deep Copy Var] --> Obj2
+    Obj2 -- reference --> Nested2
+
+    style Obj1 fill:#bef,stroke:#333
+    style Obj2 fill:#bef,stroke:#333
+    style Nested1 fill:#bfb,stroke:#333
+    style Nested2 fill:#bfb,stroke:#333
+```
+
+### Comparison Summary
+
+| Feature | Shallow Copy | Deep Copy |
+| :--- | :--- | :--- |
+| **Top-level properties** | Copied | Copied |
+| **Nested Objects** | Shared Reference | Independent Copy |
+| **Memory Usage** | Low | High |
+| **Speed** | Fast | Slow |
+| **Methods** | `Object.assign`, spread | `JSON.parse/stringify`, `structuredClone` |
+

DeepCopyVSShallowCopy/shallowCopy-deepCopy.js

@@ -0,0 +1,117 @@
+let a = {
+  name: "Aditya",
+  age: 25,
+};
+
+let b = a;
+b.name = "Ashok";
+// console.log(a);
+// console.log(b);
+let c = {
+  name: "Sweta",
+  age: 25,
+};
+let d = Object.assign(c);
+
+d.name = "mamta";
+
+// console.log(c);
+// console.log(d);
+
+let profile = {
+  name: "Aditya",
+  age: 25,
+  gender: "male",
+  social: {
+    facebook : 'cooldude',
+    twitter : 'aditya',
+    followersCount : {
+      fb_count : 100,
+      twitter_count : 200
+    }
+
+  }
+};
+
+let newProfile = {...profile}; // using spread operator , it Creates a Shallow copy - only the top level structure
+//  when we use spread operator it only copies the first level properties, and nested objects are still referenced.
+
+newProfile.age = 30
+console.log(profile);
+console.log(newProfile)
+
+newProfile.social.facebook = 'changedDude';
+newProfile.social.followersCount.fb_count = 2000000;
+
+console.log(profile.social.facebook)
+
+console.log(newProfile.social.facebook);
+
+
+console.log(profile.social.followersCount.fb_count); //2000000 because both are referring to same object in memory
+
+
+console.log(newProfile.social.followersCount.fb_count); //2000000 because both are referring to same object in memory
+
+/* 
+* A shallow copy duplicates only the top-level structure of a data object.
+* All nested objects, arrays, functions, and reference types are not duplicated.
+* Instead, their memory references are copied.
+
+
+* A shallow copy duplicates the outer container while preserving references to all nested objects, causing shared mutable state across copies.
+*/
+
+// Deep Copy
+let deepCopiedProfile = JSON.parse(JSON.stringify(profile)); // Creates a Deep copy but it has limitations - only works with JSON serializable data types   
+ /* 
+ * JSON.stringify() converts the object into a JSON string, effectively breaking all references to nested objects.
+ * JSON.parse() then takes that string and constructs a new object from it, resulting in a completely independent copy of the original object.  
+*/
+
+deepCopiedProfile.age = 35;
+deepCopiedProfile.social.twitter = 'newTwitterHandle';
+deepCopiedProfile.social.followersCount.twitter_count = 500000;
+
+console.log(deepCopiedProfile.social.followersCount.twitter_count); //500000 - deep copy has its own copy
+console.log(profile.social.twitter); // 'aditya' - original remains unchanged
+console.log(deepCopiedProfile.social.twitter); // 'newTwitterHandle' - deep copy has its own copy
+
+
+function deepCopy(value) {
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+
+  const result = Array.isArray(value) ? [] : {};
+
+  for (const key in value) {
+    if (Object.hasOwn(value, key)) {
+      result[key] = deepCopy(value[key]);
+    }
+  }
+
+  return result;
+}
+
+
+console.log('deep copy:', deepCopy(profile));
+
+/* 
+* Deep copy recreates the entire object graph with no shared references, requiring recursive traversal and new allocations for every nested structure.
+
+
+* A deep copy duplicates not only the top-level structure of a data object but also all nested objects, arrays, functions, and reference types.
+* Each level of the data structure is recursively copied, resulting in a completely independent clone of the original object.
+
+
+* typeof returns strings
+
+* Valid outputs:
+ * "object", "function", "string", "number", "boolean", "undefined", "symbol", "bigint"
+
+*/
+
+/* 
+* A deep copy creates entirely independent objects at all levels of the data structure, ensuring no shared references between the original and the copy.
+*/

index.md

@@ -5,6 +5,7 @@
 - [loops](loops/loops.md)
 - [String](string/string.md)
 - [Arrays](Arrays/array.md)
+- [Deep Copy vs Shallow Copy](DeepCopyVSShallowCopy/shallow-deep-copy.md)
 - [Sets](map-set/set.md)
 - [JavaScript Regular Expression](string/regex.md)
 - [Functions](functions/functions.md)