How to Deep Copy JavaScript Objects

Reading Time: 2 minutes

There are times when we need to deep copy Javascript objects. Here, we will explore on the various reasons and methods to deep copy javascript objects.

If shallow copy is enough to satisfy the needs, we recommend using them as it will make the code simpler.

Reason to Deep Copy

Through the years of development, we may have a lot of reasons why we are not able to use the existing data object and need to copy or clone for other usage. Here are the list of the more common ones.

• Unable to modify existing data due to framework restriction
• Existing object value needs to be use elsewhere
• Need to store as temporary history records

Methods to Deep Copy JavaScript Objects

• JSON stringify and parse
• MDN structuredClone
• NPM deepcopy library
• NPM lodash library

Let’s go through all of them in more details.

JSON stringify and parse

As simply as it may sound, the default stringify and parse method available to JSON object can be use to clone your basic API respond or common data objects.

There is no need for external libraries to be installed. However, we will only be able to use this on plain JSON objects.

const originalData = {
  animals: [
    { name: 'dog' },
    { name: 'cat' }
  ]
};

const clonedData = JSON.parse(JSON.stringify(originalData));

MDN structuredClone

structuredClone is another method that does not require any external libraries and support more complex types to be copied. Some of the types include File, Map, Set, Array, String and more info in the supported type section in the official documentation.

In addition, structuredClone also allow you to specify transferable object option to transfer from the original object to the cloned object

Let’s look at the example of how to use it.

const originalData = { name: "MDN" };
originalData.itself = originalData;

const clonedData = structuredClone(original);

More illustration on structuredClone in their official documentation.

NPM deepcopy library

We can install deepcopy library via npm i -s deepcopy and import to use it. Usage is very simple as illustrated below.

However, do take note that there are some datatype that will only perform shallow clone.

import * as deepcopy from 'deepcopy';

const originalData = {
  animals: [
    { name: 'dog' },
    { name: 'cat' }
  ]
};
 
const clonedData = deepcopy(originalData);
 
originalData.animals = null;
 
console.log(src);   
console.log(clonedData);

// Data printed will be:
// { animals: null }
// { animals: [ { name: 'dog' }, { name: 'cat' } ]

NPM lodash library

We can install lodash library via npm i -s lodash and import to our source code. Lodash is a utility library widely known and used with its readily function that is build with performance.

const _ = require('lodash');

const originalData = {
  animals: [
    { name: 'dog' },
    { name: 'cat' }
  ]
};
 
const clonedData = _.clonedeep(originalObject);

A more direct implementation clonedeep library is available with npm i lodash.clonedeep.

const cloneDeep = require('lodash.clonedeep');

const originalData = {
  animals: [
    { name: 'dog' },
    { name: 'cat' }
  ]
};
 
const clonedData = cloneDeep(originalData);

Conclusion

We have seen that there are a few methods and libraries out there that can help us with deep copying objects without the need to worry if anything is missed out.

Thus, if you only have plain data objects or basic data type to copy, structuredClone can be of good choice since it does not require external library. Otherwise, can consider using deepcopy or lodash library if other data types are used.