Shallow Copy vs Deep Copy JS & Reference Part-3🚀

his post is continuation of the last post.

In last post we were discussing What is Reference and done with assign by reference. Now we discuss further.

Table of content

1 Primitive Data type
2 Non-primitive data type
3 What is Reference
4 Shallow copy
5 Deep Copy

What is Shallow Copy?

Shallow copy is creating new copy of an array to the variable. The goal is to just copy the values of an array assign to the new variable which make it a new array rather pointing to the same memory. It is crucial in crud operations because they are immutable.

See the example below.

const student = {
  name: 'Sid',
  class: 'KG',
  subject: 'JS',
  marks: '100'
}
console.log(student);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
*/

const studentCopy = {...student}
console.log(studentCopy);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
*/

studentCopy.name = 'Alic'
console.log('student -> ',student,'studentCopy =>', studentCopy)
/* student->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
*/

What is Deep Copy?

Deep copy is when you copy a nested array/object to another object. Like object has object in it. See Below

const student = {
  name: 'Sid',
  class: 'KG',
  subject: 'JS',
  marks: '100',
  address:{
    street: '29b',
    city: 'honkong'
  }
}
console.log(student);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "honkong"
*/

const studentCopy = {...student}
console.log(studentCopy)
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "honkong"
*/

studentCopy.name = 'Peter'
console.log('student -> ',student,'studentCopy =>', studentCopy)

/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy ->
name:"Peter"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"
*/

studentCopy.address.city = 'New York'
console.log('student -> ',student,'studentCopy =>', studentCopy)

/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"
*/

There's nothing new in above three outputs.Nested object✅, Copy of nested object✅. Change the property of copy object will not affect the other ✅. But as soon as you hit the forth block of code , you head gonna 🤯.

The question is why this behavior?
In nested objects the copy is created for parent object nested objects are assign by reference. You can change the value of parent object and get two different array but if you change the value of nested array you'll see the parent array's value also change. So the question arises...

How to resolve the deep copy issue ?

Use JSON.parse() and JSON.stringifty()

See code below

const studentCopy2 = (JSON.parse(JSON.stringify(student)));
studentCopy2.address.city = 'Warsaw';
console.log('student -> ',student,'studentCopy =>', studentCopy,'studentCopy2 =>', studentCopy2)

/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy2 ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "Warsaw"
*/

Source
stackoverflow

medium

medium

dev.to

Thanks to @amanse
End.