When JQuery extend is used on to merge two or more objects, into a single object. JQuery extends is also used in deep copy which means that it allows the original and the copied object to exist separately without affecting each other.
How does the extend() function work in jQuery?
This is an example to explain how extend() function work in JQuery:
var value1 = {
name: ‘John’,
surname: ‘Brown’,
age: 32,
}
var value2 = {
occupation: ‘teacher’
city: ‘London’
}
$extend(value1, value2);
In this example we have two objects containing data of an individual. With the use of the $extend function, the ‘value2’ object is merged into ‘value1’ object and the end result of this object will be the following:
{name:’John’, surname:’Brown’, age: 32, occupation:’teacher’, city: ‘London’ }
This function is very useful when the developers wish to gather all the information in a single object.
Another use of the extend() function in JQuery is shown in the example below. This time the deep extend is used:
var object1: {name:’John’, surname:’Brown’, age: 32}
var object2: {occupation:’teacher’, city: ‘London’}
var object3 = $.extend({}, object1, object2);
In this scenario we will be merging two objects (object1 and object2) into object3. Object3 will contain all the information of object1 and object2. Also this time object1 and object2 will not be modified and they will still keep the same exact information. End result of these object after using the extend() function is the following:
var object1: {name:’John’, surname:’Brown’, age: 32}
var object2: {occupation:’teacher’, city: ‘London’}
var object3: {name:’John’, surname:’Brown’, age: 32, occupation:’teacher’, city: ‘London’}
What is Deep extend?
In this section we will explain the deep extend function or also referred to as the deep cloning method in JQuery. This method performs a deep copy of some particular elements and their related elements including text nodes. This cloning method does not only mean ‘making a copy’ but it allows the original and the copied objects to exist separately without affecting each other.
How to implement extend in vanilla javascript?
The extend function can also be used in vanilla JavaScript. Here is an example:
var person1 = {
Name: ‘John’,
Surname: ‘Brown’,
Age: 32
}
var person2 = {
Name: ‘Anne’,
Surname: ‘White’
Age: 33
}
var client = extend(person1, person2);
The outcome of variable client will be as follows:
Client {Name: ‘Anne’, Surname: ‘White’, Age: 33}
In this example we notice the extend function used in Vanilla JavaScript. In the example person2 had the same fields of person1 so person2 overwrites the fields of person1.
How to implement deep extend in vanilla javascript?
As already explained above the deep extend function is used to merge two or more objects together, keeping the original objects unchanged. Differently than the extend function without the ‘deep’ as seen in the previous section this time we will study the deep extend function used in Vanilla JavaScript.
The syntax is this:
JQuery.extend([deep], target, object1, [,objectN])
- The ‘deep’ means that the merge becomes recursive
- ‘target’ is the object to extend. It is the object containing the end result of the merge.
- ‘object1’ is the object to be merged.
- ‘objectN’ another object to also be merged
JQuery extend vs object.assign vs spread operator
As we have seen from the various examples given in previous sections the extend function merges the objects together into one leaving the original object unaltered.
The object.assign() method copies all properties from one or more source objects to a target object and it returns the target object. The following is how its syntax looks like:
object .assign(target, …sources)
Where the ‘target’ is an object which includes what to apply the source properties to and it is returned after modification.
Where as the ‘source’ being the object with the properties that are to be applied
Here is an example how object.assign works:
var target = {name: ‘John’, surname: ‘brown’, age: 32};
var source = {name: ‘Anne’, surname: ‘White’, dob: ‘3rd April 1989’};
var endTarget = Object.assign(target, source);
The target and the end target variable will be:
{name: ‘Anne’, surname:’White’, age:32, dob: ‘3rd April 1989’ };
The spread operator is also another useful tool to use. Spread operator is most commonly used when working with arrays. Using the spread operator is very simple and it just concatenates the desired arrays in a single array with just a simple line of code. Also the spread operator can be used to copy below we will see both examples. Spread operator syntax look like this:
var variablename1 = […value];
Here is a real example to concatenate arrays using the spread operator:
var array1 = [1, 2, 3, 4, 5];
var array2 = [6, 7, 8, 9];
array1 = […array1, …array2];
The output of array1 is [1, 2, 3, 4, 5, 6, 7, 8, 9]
Here is an example of the spread operator used for copying:
var array1 = [1, 2, 3];
var array2 = […array1];
With this simple line of code array1’s values have been copied to array2. Having both arrays with the same values.
