Understanding Deep Copy vs Shallow Copy in JavaScript ?

JavaScript developers often encounter situations where they need to create copies of objects. However, not all copies are created equal. Two common approaches to copying objects are shallow copy and deep copy, each with its own set of implications. In this article, we’ll delve into the differences between deep copy and shallow copy in JavaScript, providing examples to illustrate their behavior.

Shallow Copy

A shallow copy creates a new object and copies the values of the original object’s properties. However, when it comes to nested objects, a shallow copy only copies references to those objects, not the objects themselves. This means changes to nested objects in the copy will affect the original object and vice versa.

Let’s look at an example using the spread operator for shallow copy:

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// Using spread operator for shallow copy
const shallowCopy = { ...originalObject };

// Modify a property in the shallow copy
shallowCopy.address.city = 'San Francisco';

// Changes are reflected in the original object
console.log(originalObject.address.city); // Output: San Francisco

In this example, modifying the city in the shallowCopy object also alters the original object's address property.

Deep Copy

A deep copy, on the other hand, creates a new object and recursively copies all nested objects within the original object. Consequently, changes to nested objects in the copy won’t affect the original object, and vice versa.

Here’s an example using JSON.stringify and JSON.parse for deep copy:

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// Using JSON.stringify and JSON.parse for deep copy
const deepCopy = JSON.parse(JSON.stringify(originalObject));

// Modify a property in the deep copy
deepCopy.address.city = 'Los Angeles';

// Changes in the deep copy do not affect the original object
console.log(originalObject.address.city); // Output: New York

Unlike the shallow copy example, modifying the deepCopy object does not impact the original object.

Considerations and Limitations

While the examples provided showcase the basic concepts of shallow and deep copies, it’s essential to be aware of their limitations. The JSON approach for deep copy may not handle objects with functions, undefined, or circular references well.

For more robust deep copying in JavaScript, developers often turn to specialized libraries like lodash, which provides a cloneDeep function designed to handle various edge cases.

In conclusion, understanding the distinctions between deep copy and shallow copy is crucial for managing data in JavaScript applications. Depending on the use case, developers can choose the appropriate copying mechanism to ensure their code behaves as expected.