Javascript Concept of Shallow and Deep Copy

Javascript is weird technology. So many features are available to make things easier, but at the same time, we might get lost in the process. In this context, I am especially focusing on the javascript object.

Javascript Object

One of the features of Javascript is, it provides a mutable object whose properties can be modified. There can be many use cases but can expect unexpected behavior if not handled with care.

So this blog is here to help you with the issue that might occur while copying objects on Js. It is not the problem, but need to be clear about shallow copy and deep copy to avoid it.

Shallow Copy

Shallow copy is the concept of copying an object's structure but not its value. This means the legit object and the clone share the same reference in the memory space, causing to change in the property of a copied object with a change in the original one.

const originalObj = {
  name: "Manish",
  height: 5.8
};

const copyObj = Object.assign({}, original);
originalObj.name='Copy Manish';
console.log(copyObj.name)
//output will be Copy Manish

The Object.assign() method creates a shallow copy for an originalObj and assigns it to copyObj. The change in originalObj properties will be reflected in copyObj.

Deep Copy

This is the concept of copying an object structure along with its properties. The change in the original object will not impact the copied object. Both objects will have separate memory space allocations despite having the same properties and values.

There are a few ways to deep copy in javascript. Among them use of JSON.parse() with JSON.stringfy() and the built-in method structuredClone()

JSON.parse() with JSON.stringfy()

With this approach first, an object is converted to a JSON string and then re-parse into an object.

const originalObj = {
  name: "Manish",
  height: 5.8
};
originalObj.name='Copy Manish';
const copyObj = JSON.parse(JSON.stringify(originalObj));
console.log(copyObj.name)
//output will be Manish

Here JSON.stringfy() converts the originalObj to JSON string, then after parsed to Object with JSON.parse();

StructuredClone()

The method is a built-in feature of javascript that helps make a copy of an object with its properties and values.

const originalObj = {
  name: "Manish",
  height: 5.8
};

const copyObj = structuredClone(originalObject);

console.log(copyObj); // { name: "Manish", height: 30 }

Reference

https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy
https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy

Conclusion

Shallow and deep copy are two major concepts in JavaScript. Shallow copy is used to copy the object's properties, while deep copy can be used to copy all of the object's properties along with its values. With an understanding of the differences between shallow and deep copy, you can avoid unexpected behavior in js code.

I hope this information was helpful 😊. Please feel free to ask me any other questions you may have. I am always happy to help 🤗.

JoBins Engineering