December 17, 2022

Tutorials

Deep Copying Objects in JavaScript

When working with objects in JavaScript, it’s important to understand the difference between a shallow copy and a deep copy. A shallow copy of an object only copies the top-level properties of the object, whereas a deep copy creates a completely independent copy of the object and all its nested objects, which is also known as object cloning.

We usually shallow copy objects using methods like spreading:

const obj = {
   name: 'john',
   age: '24'
}

const copyObj = {...obj};

This is okay for an object that has only one level and it’s not nested but if the object was nested this method would copy only the top level properties. so we have to use deep copying in that case.

Here are a few methods you can use to create a deep copy of an object in JavaScript:

Method 1: JSON.parse() and JSON.stringify()

One of the simplest ways to create a deep copy of an object is to use the JSON.stringify() and JSON.parse() methods. The JSON.stringify() method converts a JavaScript object to a JSON string, and the JSON.parse() method converts a JSON string to a JavaScript object.

Here’s an example of how to use these methods to create a deep copy of an object:

let originalObject = {
  name: 'John',
  address: {
    city: 'New York',
    state: 'NY'
  },
  hobbies: ['reading', 'cooking']
};

let deepCopy = JSON.parse(JSON.stringify(originalObject));

This method is quick and easy, but it does have a few limitations. For example, it won’t work for objects that contain functions or circular references.

Method 2: Recursion

Another way to create a deep copy of an object is to use recursion. This involves creating a new object and iterating over the properties of the original object, copying each property and its value to the new object. If the value is an object, you can use recursion to create a deep copy of that object as well.

Here’s an example of how to use recursion to create a deep copy of an object:

function deepCopy(obj) {
  let copy = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      copy[key] = deepCopy(obj[key]);
    } else {
      copy[key] = obj[key];
    }
  }

  return copy;
}

let originalObject = {
  name: 'John',
  address: {
    city: 'New York',
    state: 'NY'
  },
  hobbies: ['reading', 'cooking']
};

let copy = deepCopy(originalObject);

This method is more versatile than the JSON.parse() and JSON.stringify() method, as it can handle objects with functions and circular references. However, it may be more time-consuming to implement, especially for large objects with many nested objects.

Method 3: lodash.cloneDeep()

If you’re using the lodash library, you can use the _.cloneDeep() method to create a deep copy of an object. This method uses recursion to create a deep copy of the object and all its nested objects.

In conclusion, there are a few different methods you can use to create a deep copy of an object in JavaScript. However if you have properties in the object that can’t be converted to json, recursion is the best method.