Deep Copy vs Shallow Copy in JS.

Deep Copy vs Shallow Copy in JS.

Table of contents

Deep copy and shallow copy are the most important javascript concept while learning. So deep copy and shallow copy are related to cloning (copy) the data types.

The behavior of deep copy and shallow copy depends on the type of data type. In JS there are two types of data types i.e. Primitive and non-primitive data types.

  1. Primitive Data Types:

    • undefined
    • Boolean
    • number
    • string
    • Symbol

    ( Note: Primitive data types are immutable and always create a deep copy.)

  2. Non-primitive:

    • Object
    • Functions
    • Class

Now let's start with the main concept.

deep_vs_shallow_copy.png

Deep Copy:

Deep copy is also identified by pass by Value when you make a copy of variable into another variable by using the assignment operator, at that time all the values(object, arrays) along with the reference address of an original variable is copied into another variable. At last, both variables refer to different referenced values. So when you make any change in a new variable it won't mutate the original variable.

( Note: Primitive data types are immutable and always create a deep copy.)

//Example:1 on primitive data type
let originalValue=10; //primitive data type
let copiedValue=originalValue;

console.log(originalValue);  //10
console.log(copiedValue);  //10

//Now just mutate the copiedValue it always shows the deep copy.

 copiedValue=20;


console.log(originalValue); //10
console.log(copiedValue);  //20 deep copy only chanages copiedValue.

Shallow Copy:

Shallow copy is also identified by pass by reference when you make a copy of the original variable into another variable(copied) by using the assignment operator(=), that time only the reference address of original variable is copied into another variable instead of original values. So at last both variables refer to the same value. So when you make any changes in The new variable will also mutate or change the original variable.

 let originalValue={
        name:"jethalal",
        age:  55
        }

let copiedValue=originalValue;

console.log(originalValue); //{name:"jethalal",age:55}
console.log(copiedValue);//{name:"jethalal",age:55}
//initially the data will be same

 copiedValue.name="babita";

// shallow copy effect on both the objects.

console.log(originalValue); // {name:"babita",age:55}
console.log(copiedValue);//{name:"babita",age:55}

What if we have to create deep copy for non-primitive data types, there are some methods we are going to explain now :

  1. JSON.Stringify
 let originalValue={
        name:"jethalal",
        age:  55
 }
let copiedValue=JSON.parse(JSON.stringify(originalValue))

console.log(originalValue); //{name:"jethalal",age:55}
console.log(copiedValue);//{name:"jethalal",age:55}

//for now it will show the same output now let's assign the
 new value for copiedValue.

copiedValue.name="babita",

console.log(originalValue); //{name:"jethalal",age:55}
console.log(copiedValue);//{name:"babita",age:55}

//yes it shows deep copy now

is it works the same for the function inside the object let's try ?

let originalValue={
        name:"jethalal",
        age:  55,
        getName:function(){
            return this.name
        }
 }

let copiedValue=JSON.parse(JSON.stringify(originalValue));

console.log(originalValue);
//{name:"jethalal",age:55,getName}

console.log(copiedValue); 
//{name:"jethalal",age:55,}

copiedValue.name="babita";

console.log(copiedValue);//{name:"jethalal",age:55}
console.log(originalValue);//{name:"jethalal",age:55,getName}

//so function not showing in the copiedValue

( Note: JSON.stringify does partial deep copy when we have a function it won't reflect in the copied object.)

2.Object.assign({},)

  • ( Note: Object.assign does partial deep copy when we have nested object.)*
let originalValue={
        name:"jethalal",
        age:  55,
        getName:function(){
            return this.name
        }
        address:{
                        city:"delhi",
                        country:"India"
                      }
   }

let copiedValue=Object.assign({},originalValue);

console.log(originalValue);
//{name: 'jethalal', age: 55, address: {…}, getName: ƒ}
  address: {city: 'delhi', country: 'India'}
  age: 55
  getName: ƒ ()
  name: "jethalal",

console.log(copiedValue); 
//{name: 'jethalal', age: 55, address: {…}, getName: ƒ}
  address: {city: 'delhi', country: 'India'}
  age: 55
  getName: ƒ ()
  name: "jethalal",

 //lets change the city and name.

copiedValue.name="babita";
copiedValue.address.city="parbhani";

console.log(copiedValue);
//{name: 'babita', age: 55, address: {…}, getName: ƒ}
address: {city: 'parbhani', country: 'India'}
age: 55
getName: ƒ ()
name: "babita"


console.log(originalValue);
//{name: 'jethalal', age: 55, address: {…}, getName: ƒ}
address: {city: 'parbhani', country: 'India'}
age: 55
getName: ƒ ()
name: "jethalal"

//no change in name but there is a change in the city (Delhi->parbhani),
//so Object. assign does partial deep copy.

Conclusion

This is a small blog where I covered almost all concepts related to deep and shallow copy if you read this blog carefully you will never get stuck around how deep and shallow copy works and the most important part is to open your compiler and try all of these conditions then and then only you will understand it forever.

References

mdnJS

YouTube