Over a million developers have joined DZone.

Why $.extend(someObj, anotherObj) Might be Dangerous!

DZone's Guide to

Why $.extend(someObj, anotherObj) Might be Dangerous!

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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 have dangerouse side effects if not used properly!

Suppose you have an object, obj1 defines 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
   $.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: 2

Surprised? 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.

The correct version of line 14 would therefore probably be

$.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.

Here's a live example that mimics the odd behavior. Attention to this!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}