Why and when to use angular copy Deep Copy

Question

I ve been saving all the data received from services direct to local variable  controller  or scope  What I suppose would be considered a shallow copy  is that correct   Example   DataService callFunction    then function response       scope example   response data        Recently I was told to use angular copy in order to create a deep copy    scope example   angular copy response data     However  the deep copy information seems to be working in the same way when used by my Angular application  Are there specific benefits to using a deep copy  angular copy  and can you please explain them to me

User · Answer

I am just sharing my experience here  I used angular copy   for comparing two objects properties  I was working on a number of inputs without form element  I was wondering how to compare two objects properties and based on result I have to enable and disable the save button  So I used as below   I assigned an original server object user values to my dummy object to say userCopy and used watch to check changes to the user object   My server API which gets me data from the server   var req         method   GET       url   user profile     id      headers     Content-Type    application x-www-form-urlencoded       http req  success function data         scope user   data       scope userCopy   angular copy  scope user        scope btnSts true     error function data         ionicLoading hide           initially my save button is disabled because objects are same  once something    changes I am activating save button   scope btnSts   true   scope  watch  user   function newVal  oldVal        console log  scope userCopy name        if   scope userCopy name      scope user name     scope userCopy email      scope user email            console log  Changed             scope btnSts   false        else           console log  Unchanged             scope btnSts   true               true     I am not sure but comparing two objects was really headache for me always but with angular copy   it went smoothly

User · Answer

When using angular copy  instead of updating the reference  a new object is created and assigned to the destination if a destination is provided   But there s more  There s this cool thing that happens after a deep copy    Say you have a factory service which has methods which updates factory variables    angular module  test   factory  TestService    function          var o             shallow   0 1      initial value for demonstration          deep   0 2     initial value for demonstration              o shallowCopy   function              o shallow    1 2 3            o deepCopy   function              angular copy  4 5 6   o deep             return o         and a controller which uses this service   angular module  test   controller  Ctrl     TestService   function  TestService         var shallow   TestService shallow       var deep   TestService deep        console log      Printing initial values         console log shallow        console log deep         TestService shallowCopy         TestService deepCopy          console log      Printing values after service method execution         console log shallow        console log deep         console log      Printing service variables directly         console log TestService shallow        console log TestService deep          When the above program is run the output will be as follows       Printing initial values  0 1   0 2       Printing values after service method execution  0 1   4 5 6       Printing service variables directly  1 2 3   4 5 6    Thus the cool thing about using angular copy is that  the references of the destination are reflected with the change of values  without having to re-assign the values manually  again

User · Answer

In that case  you don t need to use angular copy     Explanation       represents a reference whereas angular copy   creates a new object as a deep copy  Using   would mean that changing a property of response data would change the corresponding property of  scope example or vice versa  Using angular copy   the two objects would remain seperate and changes would not reflect on each other

User · Answer

I would say angular copy source   in your situation is unnecessary if later on you do not use is it without a destination angular copy source   destination         If a destination is provided  all of its elements  for arrays    or properties  for objects  are deleted and then all   elements properties from the source are copied to it    https   docs angularjs org api ng function angular copy

User · Answer

Javascript passes variables by reference  this means that   var i       var j   i  i push  1      Now because of by reference part i is  1   and j is  1  as well  even though only i was changed  This is because when we say j   i javascript doesn t copy the i variable and assign it to j but references i variable through j   Angular copy lets us lose this reference  which means   var i       var j   angular copy  i    i push  1      Now i here equals to  1   while j still equals to       There are situations when such kind of copy functionality is very handy

User · Answer

Use angular copy when assigning value of object or array to another variable and that object value should not be changed   Without deep copy or using angular copy  changing value of property or adding any new property update all object referencing that same object    x000D   x000D  var app   angular module  copyExample        x000D  app controller  ExampleController      scope   x000D    function  scope    x000D       scope printToConsole   function     x000D         scope main     x000D          first   first   x000D          second   second  x000D           x000D   x000D         scope child   angular copy  scope main   x000D        console log  Main object      x000D        console log  scope main   x000D        console log  Child object with angular copy      x000D        console log  scope child   x000D   x000D         scope child first    last   x000D        console log  New Child object     x000D        console log  scope child   x000D        console log  Main object after child change and using angular copy      x000D        console log  scope main   x000D        console log  Assing main object without copy and updating child    x000D   x000D         scope child    scope main  x000D         scope child first    last   x000D        console log  Main object after update     x000D        console log  scope main   x000D        console log  Child object after update     x000D        console log  scope child   x000D        x000D      x000D      x000D   x000D     Basic object assigning example x000D   x000D  var main     x000D    first   first   x000D    second   second  x000D     x000D  var one   main     same as main x000D  var two   main     same as main x000D   x000D  console log  main      JSON stringify main       All object are same x000D  console log  one      JSON stringify one       All object are same x000D  console log  two      JSON stringify two       All object are same x000D   x000D  two     x000D    three   three  x000D        two changed but one and main remains same x000D  console log  main      JSON stringify main       one and main are same x000D  console log  one      JSON stringify one       one and main are same x000D  console log  two      JSON stringify two       two is changed x000D   x000D  two   main     same as main x000D   x000D  two first    last      change value of object s property so changed value of all object property  x000D   x000D  console log  main      JSON stringify main       All object are same with new value x000D  console log  one      JSON stringify one       All object are same with new value x000D  console log  two      JSON stringify two       All object are same with new value x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  copyExample  ng-controller  ExampleController  gt  x000D     lt button ng-click  printToConsole    gt Explain lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I know its already answered  still i am just trying to make it simple  So angular copy data  you can use in case where you want to modify change your received object by keeping its original values unmodified unchanged    For example  suppose i have made api call and got my originalObj  now i want to change the values of api originalObj for some case but i want the original values too so what i can do is  i can make a copy of my api originalObj in duplicateObj and modify duplicateObj this way my originalObj values will not change  In simple words duplicateObj modification will not reflect in originalObj unlike how js obj behave      scope originalObj               fname  sudarshan               country  India                     scope duplicateObj angular copy  scope originalObj           console log  ----------originalObj--------------            console log  scope originalObj           console log  -----------duplicateObj---------------            console log  scope duplicateObj             scope duplicateObj fname  SUD            scope duplicateObj country  USA           console log  ---------After update-------           console log  ----------originalObj--------------            console log  scope originalObj           console log  -----------duplicateObj---------------            console log  scope duplicateObj     Result is like          ----------originalObj-------------- manageProfileController js 1183  fname   sudarshan   country   India   manageProfileController js 1184 -----------duplicateObj--------------- manageProfileController js 1185  fname   sudarshan   country   India   manageProfileController js 1189 ---------After update------- manageProfileController js 1190 ----------originalObj-------------- manageProfileController js 1191  fname   sudarshan   country   India   manageProfileController js 1192 -----------duplicateObj--------------- manageProfileController js 1193  fname   SUD   country   USA

[javascript] Why and when to use angular.copy? (Deep Copy)

Examples related to javascript

Examples related to angularjs

Examples related to deep-copy

Examples related to shallow-copy