Deep Copy vs. Shallow Copy in JavaScript

Welcome! Understanding the difference between deep and shallow copies in JavaScript is crucial for avoiding unexpected behaviour in your programs, especially when working with objects and arrays. This guide will break down the concepts, illustrate them with examples, and show you how to choose the right copying method for your needs.

What is a Shallow Copy?

A shallow copy creates a new object, but it populates this new object with references to the elements of the original object. This means that if the original object contains other objects or arrays, the shallow copy will share those same nested objects and arrays. Modifying a nested object in the shallow copy will also modify it in the original object, and vice-versa.

Example:

let originalObject = {
  name: "John Doe",
  address: {
    street: "123 Main St",
    city: "Anytown"
  }
};

let shallowCopy = { ...originalObject }; // Using the spread operator for a shallow copy

shallowCopy.name = "Jane Doe";
shallowCopy.address.city = "New City";

console.log(originalObject); // Output: { name: "Jane Doe", address: { street: "123 Main St", city: "New City" } }
console.log(shallowCopy);  // Output: { name: "Jane Doe", address: { street: "123 Main St", city: "New City" } }

As you can see, changing the name property in shallowCopy only affects shallowCopy. However, changing the nested address.city property affects both originalObject and shallowCopy because they share the same address object.

What is a Deep Copy?

A deep copy creates a completely independent copy of the original object. This means that all nested objects and arrays are also copied recursively, resulting in two entirely separate data structures. Modifying one copy will not affect the other.

There are several ways to achieve a deep copy in JavaScript:

1. Using JSON.parse(JSON.stringify(object)): This method is simple but has limitations. It only works for objects that can be serialized into JSON (no functions, dates, or circular references).

   let originalObject = {
     name: "John Doe",
     address: {
       street: "123 Main St",
       city: "Anytown"
     }
   };
   
   let deepCopy = JSON.parse(JSON.stringify(originalObject));
   
   deepCopy.name = "Jane Doe";
   deepCopy.address.city = "New City";
   
   console.log(originalObject); // Output: { name: "John Doe", address: { street: "123 Main St", city: "Anytown" } }
   console.log(deepCopy);      // Output: { name: "Jane Doe", address: { street: "123 Main St", city: "New City" } }
   

2. Using structuredClone(): This newer method (available in modern browsers) handles a wider range of data types, including functions and dates, and avoids the limitations of JSON.parse/stringify.

   let originalObject = {
     name: "John Doe",
     address: {
       street: "123 Main St",
       city: "Anytown"
     }
   };
   
   let deepCopy = structuredClone(originalObject);
   
   deepCopy.name = "Jane Doe";
   deepCopy.address.city = "New City";
   
   console.log(originalObject); // Output: { name: "John Doe", address: { street: "123 Main St", city: "Anytown" } }
   console.log(deepCopy);      // Output: { name: "Jane Doe", address: { street: "123 Main St", city: "New City" } }
   

3. Recursive Deep Copy (for complex scenarios): For very complex objects or when you need fine-grained control, you might need to implement a recursive function to create a deep copy. This is more advanced and is generally only necessary in specific situations.

When to Use Which?

• Shallow Copy: Use when you need a new object but don’t mind sharing nested objects or arrays. This is generally faster and less memory-intensive.
• Deep Copy: Use when you need a completely independent copy of the original object, ensuring that modifications to one copy don’t affect the other. This is necessary when you need to modify nested objects without affecting the original.

Summary

Understanding the distinction between shallow and deep copies is essential for writing robust and predictable JavaScript code. Choose the appropriate method based on your specific needs, considering the trade-offs between performance and data independence. structuredClone() is generally preferred for its broader compatibility and ability to handle more complex data structures, while JSON.parse(JSON.stringify()) offers a simpler solution for simpler objects. Remember to consider the limitations of each method.