Enquiry Form

AngularJS 8: Copy () vs Extend ()

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 methods 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

Table of Contents
1. What is Deep Copy?
2. What is Shallow Copy?
3. What are the Methods Used?
4. angular.copy() vs angular.extend()
5. Conclusion

What is Deep Copy?

In deep copying, 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 object to reflect back in another object. 

Diagrammatic Representation

AngularJS Deep Copy

What is Shallow Copy?

Shallow copying is a 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 the field value is a 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 types of copying. 

Diagrammatic Representation

AngularJS Shallow Copy

What are the Methods Used?

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

Prototype – angular.copy(source, destination);

  • Shallow Copying is achieved by angular.extend(). 

Prototype – angular.extend(destination, source);

angular.copy() vs angular.extend()


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 the 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 );


{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() 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 Custom 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);


{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(). 


angular.extend() and angular.copy() solve 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. For more AngularJS related issues, you can contact 4 Way Technologies, which is a leading AngularJS Development Company across the globe.

1 thought on “AngularJS 8: Copy () vs Extend ()”

  1. Great Explanation.
    Always there is a confusion between these two functions. But you have clear all the confusion. Thanks for sharing such information.

Leave a Comment

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

Close Bitnami banner