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, AngularJSsupports 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.
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
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
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()
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 –
1
2
3
4
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 : –
1
{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 Custom web Application Development where the changes made should be reflected back on
Example –
1
var EmployeeDetails_Original = { Name: = ‘Adam’, Age: = 23, Profession: = ‘Designer’, Obj : {} };1
var EmployeeEdDetails_Original = { Schooling: = ‘Harvard-Westlake School’, University: = ‘University of Cambridge’ };1
var EmployeeDetails_Duplicate = {};1
angular.extend( EmployeeDetails_Duplicate, EmployeeDetails_Original, EmployeeEdDetails_Original);1
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() 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.
A freelancing blogs and e-books writer who keeps you up with the trending technologies and user guides. A blogger who is currently a post-graduate living in United Kingdom and trying to make her niche as a Data Scientist. Before taking a deep dive into the "Data-World", she got a Bachelor's Technology degree in Computer Science and has always dreamed of writing as a kid which inspired her to write wonderful content with the right amount of technical terms to make it easy for the beginners and as well full-fledged developers to grasp a hold onto the computer technologies.
