Updated April 13, 2023
Introduction to jQuery extend
The jQuery extend() method used to merge the contents of two or more objects into the first object. The jQuery extend() method is a built-in method. Sometimes we need to merge the contents of two or more objects into single object or target object itself, so jQuery provides extend() method for this purpose, always the first object is the target object here.
Syntax:
jQuery.extend( [ deep ], target, object1 [, object N ] );Parameters:
- deep – This is an optional Boolean type parameter, that specifies the merge to become recursive for true value. It does not support false value.
- target – This is the first object which is to be extend by extending the new properties from the one or more additional passed objects.
- Object 1 – This is an additional object whose properties are to be extend into the first object.
- Object N – This is an Nth additional object whose properties are to be extend into the first object.
- Return value – The return value of this method is an extended or merged object.
Note: The null or undefined parameters are ignore in the extend() method. If only one parameter is passed to the extend() method then the target object is omitted and the jQuery object itself consider as the target, by which we can add the new functions to the jQuery namespace. Now as we know that the first parameter or the target object is modify and return by extend() method, but if we do not want to modify the original object, then we can pass the empty object as the target object for example as “$.extend({}, dict1, dict2)”.
Working of the jQuery extend() Method
The extend() method accepts two or more objects as parameters, the accepted objects are merge first based on the properties they have, and then the merge result store into the first object. The extend() method always take the first object as the target object.
Examples for the jQuery extend() Method
Example of jQuery extend() method for merging object2 into object1. Next, we write the HTML code to understand the jQuery extend() method more clearly with the following example, where the extend() method is used to merging Marks2 into Marks1, as below –
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery extend() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h3 id = "m1" style = "color: red" > <b> The Marks1 is : </b> </h3>
<h3 id = "m2" style = "color: red"> <b> The Marks2 is : </b> </h3>
<h3 id = "m3" style = "color: green"> <b> The merged marks2 into marks1 is : </b> </h3>
<script>
var marks1 = {
Maths: { S1 : 89, S2: 47, S3:90 },
Social: { S1 : 78, S2: 56, S3:75 },
Science: { S1 : 60, S2: 50, S3:77}
};
var marks2 = {
Science: { S1 : 60, S2: 47, S3:78 },
English: { S1 : 66, S2: 68, S3:89 }
};
$( "#m1" ).append( JSON.stringify( marks1 ));
$( "#m2" ).append( JSON.stringify( marks2 ));
//merge marks2 into marks1
$.extend( marks1, marks2 );
// if JSON.stringify not available in IE<8
$( "#m3" ).append( JSON.stringify( marks1 ));
</script>
</body>
</html>Output:
As in the above program, the two objects Marks1 and Marks2 are created for subjects with some students marks in their respective subjects. Next in the program both of the marks are merge and store into the marks1 by using the extend() method and we can see in the output that for the same student of a common subject the marks are updated from the additional object that is marks2.
Example of jQuery extend() method for merging object2 into object1 recursively and merging object1 and object2 without modifying the object1 –
Next, we write the HTML code to understand the jQuery extend() method, where the extend() method is used to merging Marks2 into Marks1 recursively and without modifying the marks1, as below –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery extend() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<button id= "btn1"> Merging Two Objects Recursively </button>
<button id= "btn2"> Merging Two Objects merge Without Modifying Any Object </button>
<h3 id = "m1" style = "color: red" > <b> The Marks1 is : </b> </h3>
<h3 id = "m2" style = "color: red"> <b> The Marks2 is : </b> </h3>
<h3 id = "m3" style = "color: green"> <b> The merged marks2 into marks1 is : </b></b></b></h3>
<h3 id = "m4" style = "color: blue" > <b> And Now Marks1 is : </b> </h3>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var marks1 = {
Maths: { S1 : 89, S3:90 },
Social: { S1 : 78, S2: 56, S3:75 },
Science: { S1 : 60, S3:77}
};
var marks2 = {
Science: { S1 : 60, S2: 47, s4: 67 },
English: { S1 : 66, S3:89 }
};
$( "#m1" ).append( JSON.stringify( marks1 ));
$( "#m2" ).append( JSON.stringify( marks2 ));
//merge marks2 into marks1
$.extend( true, marks1, marks2 );
// if JSON.stringify not available in IE<8
$( "#m3" ).append( JSON.stringify( marks1 ));
$( "#m4" ).append( JSON.stringify( marks1 ));
});
});
</script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
var marks1 = {
Maths: { S1 : 89, S2: 47, S3:90 },
Social: { S1 : 78, S2: 56, S3:75 },
Science: { S1 : 60, S2: 50, S3:77}
};
var marks2 = {
Science: { S1 : 60, S2: 47, S3:78 },
English: { S1 : 66, S2: 68, S3:89 }
};
$( "#m1" ).append( JSON.stringify( marks1 ));
$( "#m2" ).append( JSON.stringify( marks2 ));
//merge marks2 into marks1
$.extend( {}, marks1, marks2 );
// if JSON.stringify not available in IE<8
$( "#m3" ).append( JSON.stringify( marks1 ));
$( "#m4" ).append( JSON.stringify( marks1 ));
});
});
</script>
</body>
</html>Output:
Once we click on the “Merging Two Objects Recursively” button, the output is:
Refresh and click on the “Merging Two Objects merge Without Modifying Any Object” button, the output is :
As in the above program, the two objects Marks1 and Marks2 are created for subjects with some students marks in their respective subjects. Next in the program Marks1 and Marks2 are merge recursively by clicking the “Merging Two Objects Recursively” button and Marks1 and Marks2 are merge without modifying the merge1 by clicking the “Merging Two Objects merge Without Modifying Any Object” button, in the output we can clearly see that the marks1 is not modify in the case of “Merging Two Objects merge Without Modifying Any Object”.
Conclusion
The jQuery extend() method is a built-in method in jQuery, which is used to merge two or more objects into the first object.
Recommended Articles
This is a guide to jQuery extend. Here we also discuss the description and Working of the jQuery extend() Method along with different examples and its code implementation. You may also have a look at the following articles to learn more –
