Shallow Copy v/s Deep Copy
Tags: javascript, webdev, programming, beginners
Published: 2024-06-03 03:54:20



The main difference between a shallow copy and a deep copy in JavaScript lies in how they handle the copying of nested objects. Here’s a detailed explanation:

**Shallow Copy**
A shallow copy of an object is a new object that has the same top-level properties as the original object. However, if any of these properties are themselves objects, the shallow copy does not create a new instance of those nested objects. Instead, it copies the references to the original nested objects.

Characteristics:
* **Top-level properties**: A shallow copy duplicates the top-level properties of the original object.
* **Nested objects**: Any nested objects or arrays are not duplicated. Instead, their references are copied.

Methods to create a shallow copy:

1. **Using Object.assign**:

`const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 3;
console.log(original.b.c); // Output: 3 (reference is shared)`


2. **Using the spread operator (...)**:

`const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // Output: 3 (reference is shared)`

**Deep Copy**
A deep copy of an object is a new object that is a complete duplicate of the original object, including all nested objects. This means that any changes made to the deep copy do not affect the original object, and vice versa.

**Characteristics**:
* **Top-level properties**: A deep copy duplicates the top-level properties of the original object.
* **Nested objects**: Any nested objects or arrays are also duplicated, creating new instances of these objects rather than copying references.

Methods to create a deep copy:

1. Using JSON.parse(JSON.stringify(obj)) (simple cases):


`const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // Output: 2 (reference is not shared)`

**_Note_**: This method has limitations with functions, special objects like Date, and undefined properties.

2. **Using a recursive function**:

`function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
 
    if (Array.isArray(obj)) {
        const arrCopy = [];
        obj.forEach((item, index) => {
            arrCopy[index] = deepCopy(item);
        });
        return arrCopy;
    }
 
    const objCopy = {};
    Object.keys(obj).forEach((key) => {
        objCopy[key] = deepCopy(obj[key]);
    });
    return objCopy;
}
 
const original = { a: 1, b: { c: 2 } };
const deepCopy = deepCopy(original);
deepCopy.b.c = 3;
console.log(original.b.c); // Output: 2 (reference is not shared)`

**Summary**

* **Shallow Copy**:
    * Duplicates top-level properties.
    * Copies references to nested objects.
    * Changes to nested objects in the copy affect the original object.
    * Methods: **Object.assign**, **spread operator** (...).

* **Deep Copy**:
    * Duplicates all properties, including nested objects.
    * Creates new instances of nested objects.
    * Changes to nested objects in the copy do not affect the original object.
    * Methods: **JSON.parse(JSON.stringify(obj))** (for simple cases), **recursive functions **(for complex objects).