Shallow Copy v/s Deep Copy

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)

1. 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.

1. 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).