Understanding Deep Copy and Shallow Copy in JavaScript

Photo by Gabriel Heinzer on Unsplash

Introduction: Due to its strength and flexibility, JavaScript offers a number of methods for cloning objects and arrays. Deep copy and shallow copy are two techniques that are frequently utilised. Knowing how these two methods differ from one another is essential for avoiding unforeseen problems and preserving data integrity in your JavaScript code. We will discuss the ideas behind deep copy and shallow copy, how they work in JavaScript, and when to apply each method in this blog post.

Shallow Copy: A new object or array is produced via shallow copying that has references to the original components. In other words, the duplicated object uses the same references as the original object. A change to one will have an impact on the other. The spread operator, Array.slice(), and Object.assign() are just a handful of the shallow copy mechanisms offered by JavaScript.

Spread Operator: The spread operator is a concise way to shallow copy an array or object in JavaScript. Let’s consider an example:

const originalArr = [1, 2, 3];
const shallowCopyArr = [...originalArr];

console.log(shallowCopyArr); // Output: [1, 2, 3]

In this case, shallowCopyArr references the same elements as originalArr. If we modify one array, the other will also reflect the changes.

Array.slice(): The slice() method creates a shallow copy of an array by extracting a portion of it. Here's an example:

const originalArr = [1, 2, 3];
const shallowCopyArr = originalArr.slice();

console.log(shallowCopyArr); // Output: [1, 2, 3]

Similar to the spread operator, any modifications made to originalArr or shallowCopyArr will affect both arrays.

Object.assign(): When it comes to objects, Object.assign() can be used to create a shallow copy. It copies the values of all enumerable properties from one or more source objects to a target object:

const originalObj = { name: 'John', age: 25 };
const shallowCopyObj = Object.assign({}, originalObj);

console.log(shallowCopyObj); // Output: { name: 'John', age: 25 }

As with arrays, modifying properties in either the originalObj or shallowCopyObj will result in changes to both objects.

Deep Copy: A completely separate copy of an object or array is produced by deep copying. A change to one has no impact on the other. Although a deep copy method is not built into JavaScript, there are a number of ways to accomplish this.

JSON.parse() and JSON.stringify(): One popular method to perform deep copying is by utilizing JSON.parse() and JSON.stringify() methods:

const originalArray = [1, 2, 3];
const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

console.log(deepCopyArray); // Output: [1, 2, 3]

We obtain a deep copy by first parsing the original array back into an object and then converting it to a string. However, keep in mind that this method has drawbacks and fails when dealing with objects that include functions, undefined values, or circular references.

Third-party Libraries: Alternatively, you can use third-party libraries like Lodash or Underscore.js, which provide convenient deep copy functions:

const originalObject = { name: 'John', age: 25 };
const deepCopyObject = _.cloneDeep(originalObject); // Using Lodash

console.log(deepCopyObject); // Output: { name: 'John', age: 25 }

These libraries offer comprehensive deep copy methods that handle complex object structures and ensure a truly independent copy.

Happy Learning!