What is shallow copy and deep copy of an object?

Understanding the concepts of shallow copy and deep copy is crucial when working with objects in JavaScript, especially when dealing with complex data structures. These two methods of copying objects differ significantly in how they handle nested objects and references. Let's delve into the definitions, practical examples, best practices, and common mistakes associated with shallow and deep copies.

Definitions

A shallow copy of an object is a new object that is a copy of the original object, but it only copies the first level of properties. If the original object contains nested objects, the shallow copy will reference those nested objects instead of creating new instances. This means that changes made to nested objects in the shallow copy will also reflect in the original object.

In contrast, a deep copy creates a new object and recursively copies all properties and nested objects from the original object. This means that the deep copy is entirely independent of the original object, and changes made to the deep copy will not affect the original object.

Practical Examples

Shallow Copy Example

const original = {
    name: 'Alice',
    age: 30,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const shallowCopy = { ...original }; // Using spread operator

shallowCopy.name = 'Bob';
shallowCopy.address.city = 'New Wonderland';

console.log(original.name); // Alice
console.log(original.address.city); // New Wonderland

In the example above, the `name` property was changed in the `shallowCopy`, but the `original` object remained unaffected. However, when we modified the `city` property of the `address` object in the `shallowCopy`, it also changed in the `original` object because both objects reference the same nested `address` object.

Deep Copy Example

const original = {
    name: 'Alice',
    age: 30,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const deepCopy = JSON.parse(JSON.stringify(original)); // Using JSON methods

deepCopy.name = 'Bob';
deepCopy.address.city = 'New Wonderland';

console.log(original.name); // Alice
console.log(original.address.city); // Wonderland

In this deep copy example, we used `JSON.parse(JSON.stringify(original))` to create a completely independent copy of the `original` object. Changes made to the `deepCopy` do not affect the `original` object at all, demonstrating the independence of deep copies.

Best Practices

• Use shallow copies when you are certain that the object does not contain nested objects or when you want to maintain references to the same nested objects.
• For objects with nested structures, prefer deep copies to avoid unintended side effects from shared references.
• Consider using libraries like Lodash, which provide utility functions such as `_.cloneDeep()` for deep copying objects, offering a more robust solution than the JSON method.
• Be cautious with circular references when using JSON methods for deep copying, as they will throw an error.

Common Mistakes

• Assuming that a shallow copy creates a completely independent object, leading to bugs when modifying nested properties.
• Using the JSON method for deep copying without considering the limitations, such as loss of functions, undefined values, and circular references.
• Not recognizing the performance implications of deep copying large objects, which can lead to performance bottlenecks in applications.

In conclusion, understanding the differences between shallow and deep copies is essential for effective object manipulation in JavaScript. By using the appropriate method based on the structure of your objects and the desired outcome, you can avoid common pitfalls and write more reliable code.