jQuery | extend() method - GeeksforGeeks

10 May, 2020
This extend() Method in jQuery is used to merge the contents of two or more objects together into the first object.
Syntax:
jQuery.extend( [deep ], target, object1 [, objectN ] )

Parameters: The extend() method accepts four parameter that is mentioned above and described below:
deep: This parameter is the merge becomes recursive .
target: This parameter is the object to extend. It will receive the new properties.
object1: This parameter is the object containing additional properties to merge in.
object1: This parameter is an additional objects containing properties to merge in.
Return Value: It returns the object after merging.
Below examples illustrate the use of extend() method in jQuery:
Example 1: In this example, the extend() method merge two objects in one.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JQuery | extend() method</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>  </head><body style="text-align:center;">           <h1 style="color: green">         GeeksForGeeks     </h1>           <h3>JQuery | extend() method</h3>    <p>Merge two objects in One object.</p>    <p id = "geeks"> </p>    <script>        var value1 = {          geeks1: 0,          geeks2: { topic1: 52, topic2: 100 },          geeks3: 97        };        var value2 = {          geeks2: { topic1: 200 },          geeks4: 100        };                   // Merge value2 into value1        $.extend( value1, value2 );                   // Assuming JSON.stringify - not available in IE<8        $( "#geeks" ).append( JSON.stringify( value1 ) );    </script></body></html>                                                            
Output:
Example 2: In this example, the extend() method merge two objects, without modifying any object.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JQuery | extend() method</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>  </head><body style="text-align:center;">           <h1 style="color: green">         GeeksForGeeks     </h1>           <h3>JQuery | extend() method</h3>    <p>Merge two objects, without modifying any object.</p>    <p id = "geeks"> </p>    <script>        var Object_1 = { bool_Val: false, num: 5, name: "shubham" };        var Object_2 = { bool_Val: true, name: "SHUBHAM" };                   // Merge Object_1 and Object_2, without modifying Object_1        var Object_3 = $.extend( {}, Object_1, Object_2 );                   // Assuming JSON.stringify - not available in IE<8        $( "#geeks" ).append( "<b>Object_1 : </b>" + JSON.stringify( Object_1 ) + "<br>" );        $( "#geeks" ).append( "<b>Object_2 : </b>" + JSON.stringify( Object_2 ) + "<br>" );        $( "#geeks" ).append( "<b>Object_3 : </b>" + JSON.stringify( Object_3 ) + "<br>" );    </script></body></html>
Output:
jQuery-Methods
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
How to Show and Hide div elements using radio buttons?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?