Understanding Deep Copy and Shallow Copy in Javascript

Shallow copy

Shallow copies duplicate as little as possible. A shallow copy of a collection is a copy of the collection structure, not the elements. With a shallow copy, two collections now share the individual elements.

Deep copy

Deep copies duplicate everything. A deep copy of a collection is two collections with all of the elements in the original collection duplicated.

Primitive data types

When you create these values, they are tightly coupled with the variable they are assigned to. They only exist once. That means you do not really have to worry about copying primitive data types in JavaScript. When you make a copy, it will be a real copy.
Let’s see an example:

let a = 5;
let b = a;
b = 6;

console.log(a); // 5
console.log(b); // 6

Reference data types

Technically, arrays are also objects, so they behave in the same way. I will go through both of them in detail later.

Here it gets more interesting. These values are actually stored just once when instantiated, and assigning a variable just creates a pointer (reference) to that value.

With Object

Create an object a with property test with value test1 and then copy b = a and then change value test in object b.Let see example:

Shallow copy

const a = 5;

const b = a;

b.test = 'test2'; //Shallow copy

console.log(a); // test 2
console.log(b); // test 2

Deep copy

const a = { test: 'test1' }

//you can use spread or Object.assign() method for clone an object

const b = {...a}; // or const b = Object.assign({},a);

b.test = 'test2'; // Deep copy

console.log(a); // test 1
console.log(b); // test 2

Making deep copies without thinking

const a = { test: 'test1' }
const b = JSON.parse(JSON.stringify(a));
b.test = 'test2';

console.log(a); // test 1
console.log(b); // test 2

With Arrays

Copying arrays is just as common as copying objects.You can use some ways for deep copy are Spread Operator,Array Functions, Nested Array.
Let see an example below:

const a = [1,2,3]
let b = [...a] // Spread Operator
let b = a.map(item => item) // Array Functions
let b = a.slice(0) // Array Functions

let b = JSON.parse(JSON.stringify(a)) // Nested Array

Conclusion

In the end, you know should use the copy with reference data types for some case you want to copy an object or array split with original and some ways how to make a deep copy.

Thanks for reading.Please share your experiences,questions and feedback below!

Reference

https://www.freecodecamp.org/news/copying-stuff-in-javascript-how-to-differentiate-between-deep-and-shallow-copies-b6d8c1ef09cd/
https://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy

Comments

[Monaye Win]

People confuse that spreader do a deeply nested copy. Need to be aware that both spreader and obj.assign doesn't do nested deep copy.

[Edward Luu]

Could you share the detail of this?

[ilia-shterev-git]

I think that what he/she means is that that both spreader and obj.assign do level 1 clone. So if the object to be cloned contains other objects they will be cloned by ref or shallow copy. So later if you want to change that nested objects like:
myClonedObj.myNestedObj.somePropertyOfTheNestedObj = someNewVal;
then all other object nesting that object will have it changed.