Why $.extend(someObj, anotherObj) might be dangerous!
2 min read
You often have the need to merge two objects. A common use case is that of combining parameters for a $.ajax call. jQuery has a nice function for that, namely jQuery.extend. The function definition is something like jQuery.extend(target, [object 1], [object 2]). But attention, this might lead to dangerous side effects if not used properly!
Suppose you have an object, obj1 defined like
var obj1 = {
value: 1
};
And you need to execute a request to your backend server with some additional parameters, including the values of obj1. Your code might look like
var sendToServer = function(params, successCb, errorCb){
return $.ajax({
url: "/api/someurl",
type: "GET",
dataType: "json",
data: params,
success: successCb,
errorCb: errorCb
});
}
...
sendToServer(
$.extend(obj1, { value: 2, someOtherParam: "hello" }),
function(resultData) {
console.log("The value of obj1: " + obj1.value);
},
function(e) {
console.log("An error happened");
});
On line 14 I’m basically giving the parameters to the sendToServer(..) function by combining those in obj1
with some new ones. This is possible since the $.extend(…) function directly returns the result of the combination of the passed objects.
Can you guess the output of line 16?
> The value of obj1: 2Surprised? Well, take a look at line 14 again and then on the signature of
jQuery.extend(target, [object 1], [object 2])
. What happens there is a
copy of the values
provided in the new object, namely
{ value: 2, someOtherParam: “hello” }
onto
obj1
, hence
overwriting obj1’s property
value
, setting it to 2.
$.extend({}, obj1, { value: 2, someOtherParam: “hello” })
In this version, the values of
obj1
and
{ value: 2, someOtherParam: “hello” }
are copied onto a new object
{}
, thus
not modifying
the existing instance of obj1.
