This post explains the difference between shallow copy and deep copy in javascript.

Shallow Copy



Shallow copy means copy only the reference.

        
            var original = {"prop1" : "Prop1", "prop2" : "prop2"};
            console.log(JSON.stringify(original)); 
            // {"prop1" : "Prop1", "prop2" : "prop2"}

            var shallowCopy = original;
            console.log(JSON.stringify(shallowCopy)); 
            // {"prop1" : "Prop1", "prop2" : "prop2"}

            shallowCopy.prop1 = "ChangedProp1";
        
            console.log(JSON.stringify(original));    
            // {"prop1" : "ChangedProp1", "prop2" : "prop2"}
            console.log(JSON.stringify(shallowCopy)); 
            // {"prop1" : "ChangedProp1", "prop2" : "prop2"}        
        
    

Shallow Copy in Javascript.

Notes:

  • In shallow copy, original and copied object shares the same properties.
  • Shallow copy only copies the object reference.
  • In Shallow copy, Change in copied object reflects in original object and vice versa.
  • Arrays and Object in Javascript performs the Shallow copy by default.

Deep Copy



Deep copy means copy the object properties recursively into the new object. We are going to use $.extend method from jQuery to perform deep copy in javascript objct.

$.extend(deepCopy, target, object1, [objectN] )

  • To perform deeop copy, indicate first argument as true.
  • target to copy everything into.
  • target1 … targetn to copy from.
        
            var original = {"prop1" : "Prop1", "prop2" : "prop2"};
            console.log(JSON.stringify(original)); 
            // {"prop1" : "Prop1", "prop2" : "prop2"}

            var deepCopy = $.extend(true, {}, original);
            console.log(JSON.stringify(deepCopy)); 
            // {"prop1" : "Prop1", "prop2" : "prop2"}

            deepCopy.prop1 = "ChangedProp1";
        
            console.log(JSON.stringify(original));    
            // {"prop1" : "Prop1", "prop2" : "prop2"}
            console.log(JSON.stringify(deepCopy)); 
            // {"prop1" : "ChangedProp1", "prop2" : "prop2"}
        
    

Deep Copy

Notes:

  • In deep copy, original and copied object do not share properties.
  • Deep copy copies the object properties recursively.
  • In deep copy, Change in copied object does not reflect in original object and vice versa.
  • All primitive data types in javascript performs deep copy by default. Boolean, Null, Undefined, Number, String etc… are Primitive data types in javascript.

References

jQuery Extend.