{"id":11719,"date":"2014-02-06T22:11:41","date_gmt":"2014-02-06T16:41:41","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=11719"},"modified":"2017-08-03T14:09:28","modified_gmt":"2017-08-03T08:39:28","slug":"angularjs-copy-vs-extend","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angularjs-copy-vs-extend\/","title":{"rendered":"AngularJS : copy vs extend"},"content":{"rendered":"

While using\u00a0AngularJS<\/a>, you will usually come across this\u00a0situation when you want to copy one object to another object.<\/p>\n

In such case you will have only two solutions: angular.copy() or angular.extend().<\/p>\n

Lets see how these solutions work.<\/p>\n

1. angular.copy(source, destination)<\/strong> : It creates a deep copy<\/strong> of source object or array and assign it to destination where ‘destination’ is optional. By writing deep copy, I\u00a0mean that a new copy of the referred object is made.<\/p>\n

For example:<\/p>\n

[js]
\nvar mySource = {‘name’ : ‘sakshi’, ‘age’ : ’24’, ‘obj’ :{‘key’:’value’}}
\nvar myDest = {}
\nangular.copy(mySource, myDest);
\nconsole.log(myDest);
\n[\/js]<\/p>\n

Output: {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}<\/code><\/p>\n

If you check mySource.obj === myDest.obj<\/code>, this will give a false result because both points to different objects. This is called deep copying.<\/p>\n

2. angular.extend(destination, src1, src2 …) <\/strong>: It creates a shallow copy<\/strong> of one or more sources provided and assign them to destination.<\/p>\n

For example:<\/p>\n

[js]
\nvar mySource1 = {‘name’ : ‘neha’, ‘age’ : ’26’, obj2 : {}}
\nvar mySource2 = {‘course’ : ‘MCA’}
\nvar myDest = {}
\nangular.extend(myDest, mySource1,mySource2)
\nconsole.log(myDest);
\n[\/js]<\/p>\n

Output: {name: \"neha\", age: \"26\", course: \"MCA\", obj2: Object}<\/code><\/p>\n

Now if you check mySource1.obj2 === myDest.obj2<\/code>, it will give a true result because both points to same reference of an object. This is called shallow copying.<\/p>\n

NOTE<\/strong>: One thing to keep in mind is that angular.copy() is slower than angular.extend()<\/p>\n

You can now use both these solutions and find out which one you like to use in the future.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n