DEV Community

Edward Luu
Edward Luu

Posted on

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.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
monaye profile image
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.

Collapse
 
edwardluu profile image
Edward Luu

Could you share the detail of this?

Collapse
 
iliashterevgit profile image
Info Comment hidden by post author - thread only accessible via permalink
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.

Some comments have been hidden by the post's author - find out more