Deep Copy vs Shallow Copy in JavaScript

In JavaScript, understanding the difference between deep copy and shallow copy is crucial for managing and manipulating objects and arrays effectively. When copying data structures, it is essential to know whether changes to the original data will affect the copy, and vice versa. This article delves into the concepts of deep and shallow copying, explains the differences, and provides examples to illustrate their behavior in JavaScript.

Shallow Copy

A shallow copy of an object or array is a copy whose properties or elements are references to the same objects as those in the original. This means that if the original object or array contains nested objects, only the references to these objects are copied, not the objects themselves. Consequently, changes to the nested objects in the copied structure will reflect in the original structure and vice versa.

Examples of Shallow Copy

Using Object.assign

let original = { a: 1, b: { c: 2 } };
let copy = Object.assign({}, original);
copy.b.c = 3;
console.log(original.b.c); // Output: 3
console.log(copy.b.c); // Output: 3

In this example, Object.assign creates a shallow copy of the original object. Changing the nested property c in the copied object copy also affects the original object original.

Using Spread Operator

let original = { a: 1, b: { c: 2 } };
let copy = { ...original };
copy.b.c = 3;
console.log(original.b.c); // Output: 3
console.log(copy.b.c); // Output: 3

Similarly, using the spread operator (…) creates a shallow copy of original. Modifying the nested property in copy reflects in original.

Deep Copy

A deep copy, on the other hand, involves creating a new copy of the original object or array along with all the nested objects and arrays. This ensures that the new structure is entirely independent of the original. Changes made to the deep copy do not affect the original object, and vice versa.

Examples of Deep Copy

Using JSON.parse and JSON.stringify

let original = { a: 1, b: { c: 2 } };
let copy = JSON.parse(JSON.stringify(original));
copy.b.c = 3;
console.log(original.b.c); // Output: 2
console.log(copy.b.c); // Output: 3

By converting the object to a JSON string and then parsing it back into an object, a deep copy is created. Changes to copy do not affect original.

Custom Deep Copy Function

For more complex objects, a custom deep copy function can be implemented:

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

let original = { a: 1, b: { c: 2 } };
let copy = deepCopy(original);
copy.b.c = 3;
console.log(original.b.c); // Output: 2
console.log(copy.b.c); // Output: 3

This function recursively copies all properties and nested objects, ensuring a true deep copy.

Understanding the difference between deep copy and shallow copy in JavaScript is essential for effective data manipulation and avoiding unintended side effects. A shallow copy only duplicates the top-level properties, leaving nested objects as references to the original. In contrast, a deep copy creates a completely independent copy of the entire structure, including all nested objects and arrays. Choosing the appropriate copying method depends on the specific requirements of your application and whether you need independent copies or can work with references to the original data.

---

Deep Copy vs Shallow Copy in JavaScript was originally published in CarlosRojasDev on Medium, where people are continuing the conversation by highlighting and responding to this story.