The extend Method in JavaScript
-
Using the
$.extend()Function to Override Contents in JavaScript -
Using the
$.extend()Function WithdeepArgument in JavaScript -
Merging With
TargetWithout Changing Its Content Using the$.extend()Function in JavaScript
JavaScript library jQuery’s extend method takes 4 parameters (deep, target, object1, objectN). The drive is to modify the target object by merging two or more objects’ content with the first (target) object.
The deep parameter can be true and doesn’t follow up false. Enabling true prevents certain content’s overriding, and the merge operation occurs to explicit content.
Using the $.extend() Function to Override Contents in JavaScript
We will begin declaring object1 and object2. The $.extend() function will take two parameters, so the operational code line will be $.extend( object1, object2).
In this case, our target is object1, and the object1 will be merged with the contents of object2. The object2 content will override the content of object1 where there is a similar key value.
Code Snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="show"></div>
<script>
var object1 = {
chocolate: 0,
mozzarella: { weight: 500, price: 50 },
butter: 100
};
var object2 = {
mango: { price: 200 },
kiwi: 100,
mozzarella: { price: 60 }
};
// Merge object2 into object1
$.extend( object1, object2 );
$( "#show" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
Output:
%60-to-Override-Contents.webp)
You will notice that the object2 content fully overrode the mozzarella key of the object1. The $.extend() method performs without a deep argument.
Using the $.extend() Function With deep Argument in JavaScript
This example will have an additional parameter with a different operational code line. The deep parameter recursively checks the contents and changes a specific location.
Syntax:
$.extend(true, object1, object2)
Code Snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="show"></div>
<script>
var object1 = {
chocolate: 0,
mozzarella: { weight: 500, price: 50 },
butter: 100
};
var object2 = {
mango: { price: 200 },
kiwi: 100,
mozzarella: { price: 60 }
};
// Merge object2 into object1
$.extend( true, object1, object2 );
$( "#show" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
Output:
%60-Method-with-%60deep%60-Argument-.webp)
The output gives a specific merge to the target object. You will see the object2 content key mozzarella value was only merged to the specific subkey price.
The weight subkey was not overridden because the true argument enables the operation more effectively.
Merging With Target Without Changing Its Content Using the $.extend() Function in JavaScript
For the last example, we will alter the deep argument with an empty {} object that will bear the modification to merged objects.
Syntax:
$.extend({}, object1, object2).
Code Snippet:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="show"></div>
</body>
</html>
JavaScript:
var object1 = {
chocolate: 0,
mozzarella: {weight: 500, price: 50},
};
var object2 = {
mango: {price: 200},
kiwi: 100,
};
// Merge object2 into object1
var object3 = $.extend({}, object1, object2);
$('#show').append('<div><b>obj1 = </b>' + JSON.stringify(object1) + '</div>');
$('#show').append('<div><b>obj2 = </b>' + JSON.stringify(object2) + '</div>');
$('#show').append('<div><b>obj3 = </b>' + JSON.stringify(object3) + '</div>');
Output:
%60-Method-to-Merge-with-%60Target%60-without-Changing-Its-Content-.webp)
object3 holds the merged version of both object1 and object2, and we were also able to print the unaffected objects.
