4waytechnologies
Enquiry Form

AngularJS 8: copy() vs extend()

While using any language you often, come across a situation where you want to copy one object into another. 

As being a major part of MEAN, AngularJS supports two different types of method for copying the objects or arrays – 

  1. angular.copy()
  2. angular.extend()

MEAN Stack Developers support and use both of these methods according to their needs.

Before, going further and explaining the two methods and their differences, let’s understand deep and shallow copying

What is Deep Copy? 

In deep coying, copying occurs recursively, first constructing a new object then recursively populating it with copies. In this, copying of all fields takes place first and then making copies of dynamically allocated memory pointed to by the fields. Unlike shallow copy, deep copy doesn’t make changes made in one objects to reflect back in another object. 

Diagramatic Representation

What is Shallow Copy? 

    Shallow copying is field by field copy of an object i.e bit-wise copying. All the fields of an object copy in the same sequence to another object. If a field value is a reference to an object(for example a memory address) it copies the reference and if field value is primitive type it copies the value. 

As you have understood the meaning and difference between deep and shallow copying let’s discuss the method used for both type of copying. 

Diagramatic Representation

Methods used – 

  1. Deep Copying is done by angular.copy()

   Prototype – angular.copy(source, destination);

  1. Whereas, Shallow Copying is achieved by angular.extend()

    Prototype – angular.extend(destination, source);

angular.copy() vs angular.extend()

angular.copy()

angular.copy() is used to copy attributes from one object to another, just to have a duplicate of the original object, the changes made in original or duplicate object won’t be reflected back. That is, the original and the duplicate data both will be safe. This method is useful when you want to keep both the old state and the new state of any object or an array.

Example –   

var EmployeeDetails_Original = { Name: = ‘Adam’, Age: = 23, Profession: = ‘Designer’, Obj:{'key' :' value'}};
var EmployeeDetails_Duplicate = {};
angular.copy( EmployeeDetails_Original, EmployeeDetails_Duplicate );
console.log(EmployeeDetails_Duplicate);

OUTPUT : – 

{Name : 'Adam', Age : 23, Profession: ‘Designer’, Obj :{'key' : 'value'}} 

If you run the statement “EmployeeDetails_Original.Obj== EmployeeDetails_Duplicate.Obj” it’ll give you the false result. 

The main motive of MEAN Stack Developers to use this method is to keep the original data safe.

angular.extend()

angular.extend() is used to make a shallow copy of the object. If we copy the attributes using this method the changes made in the copied object or array will be reflected in the original or vice versa. You can specify multiple source_objects. If you want to keep the attributes of the original object, you can do that by passing an empty object as the target. This method is useful in many cases where you want to change the parent object as well as the copied object. It is mostly used during the Web Application Development where the changes made should be reflected back on the customer’s site. 

Example –   

var EmployeeDetails_Original = { Name: = ‘Adam’, Age: = 23, Profession: = ‘Designer’,  Obj : {} };
var EmployeeEdDetails_Original = { Schooling: = ‘Harvard-Westlake School’, University: = ‘University of Cambridge’ };
var EmployeeDetails_Duplicate = {};
angular.extend( EmployeeDetails_Duplicate, EmployeeDetails_Original, EmployeeEdDetails_Original);
console.log(EmployeeDetails_Duplicate);

OUTPUT : – 

{Name : ‘Adam’, Age : 23, Profession: ‘Designer’,Schooling: = ‘Harvard-Westlake School’, University: = ‘University of Cambridge’, Obj: Object}

If you run the statement “EmployeeDetails_Original.Obj == EmployeeDetails_Duplicate.Obj” it’ll give you the true result because both points to the same reference of an object. 

NOTE: angular.copy() is bit slower than angular.extend(). 

Conclusion

angular.extend() and angular.copy() solves the purpose of copying the data in somewhat the same manner, the only difference lies with the referenced object. So, now you can decide wisely which method to use when depending upon your requirements. 

Leave a Comment

Your email address will not be published. Required fields are marked *

Close Bitnami banner
Bitnami