How does the extend() function work in jQuery?

JqueryJquery Plugins

Jquery Problem Overview

I saw this in a plugin:

var options = $.extend(defaults, options); 

How does it work?

What does extend() do?

Jquery Solutions

Solution 1 - Jquery

Multiple Parameters

The documentation isn't precise in explaining how extend works, so I ran a little test:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + + " Bar=" + + " Baz=" + a.baz);
console.log("B: Foo=" + + " Bar=" + + " Baz=" + b.baz);
console.log("C: Foo=" + + " Bar=" + + " Baz=" + c.baz);
console.log("R: Foo=" + + " Bar=" + + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

(The console.log function is intended to work in Firebug; replace it with alert() or some other output function if you like).

The results are:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

By this we can see that jQuery.extend():

  • Starts with the object provided by the first parameter.
  • Adds to it any property in the second parameter. If the property already exists in the first parameter, it is overwritten. The object for the second parameter is unchanged.
  • Repeats the above with any subsequent parameter.
  • Returns the first parameter.

This is useful for combining user and default option-objects together to get a complete set of options:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  var someOtherDefaultOptions = {
    baz: 3

  var allOptions = jQuery.extend(

foo({foo:1, baz:1});

Note that "null" is a valid value for overwriting, but "undefined" isn't. You might be able to make use of this.

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
console.log("A: Foo=" + + " Bar=" +;

Results in:

A: Foo=null Bar=a

Single Parameter

If you pass just one object to jQuery.extend(), then jQuery assumes that the jQuery object itself is the "first" parameter (ie: the one to be modified), and your object is the "second" (ie: the one to add to the first). So:

console.log( "Before: " + );
console.log( "After: " + );

Results in:

Before: undefined
After: 1

Solution 2 - Jquery

It merges the content of one object to another. If we pass two objects, second object properties are added to the first object / first parameter

Ex: $.extend(object1, object2);

Now object1 contains properties of object2

If we want to merge two objects, then we need to pass empty object in the first parameter

Ex: var newObject = $.extend({}, object1, object2);

Now newObject contains both properties of object1 and object2.

Solution 3 - Jquery

From jQuery Documentation

> Merge the contents of two or more > objects together into the first > object.

In a plugin context: If the user does not set the optional parameters for the function, then a default value will be used instead.

Solution 4 - Jquery

How does extend() work in jQuery? [Resolved]

jQuery have deep copy and light copy. The first boolean decide it, true for deep and false for light.

For example:

  • jQuery.extend(false, {'a' : {'a1': 1}}, {'a': {'a2': 2}})

    the result will be: {'a': {'a2': 2}} because this is light copy just compare level 1.

    enter image description here

  • jQuery.extend(true, {'a' : {'a1': 1}}, {'a': {'a2': 2}})

    the result will be: {'a': {'a1': 1, 'a2': 2}} This is deep copy with many level of object (just like level of array)

    enter image description here

  • jQuery.extend(a,b,c) with a, b, c is object or array. The flow overrite will be b->a, c ->a (b overrite a, c override a ...) this function will return a and a also change value too.

Advanced Examples:

  • jQuery.extend({'number_param': 1})

    In case you just pass one param. jQuery will extend itself. console.log(jQuery['number_param']) will output 1.

    enter image description here

  • jQuery.extend(1, {'number_param': '2'}); This example is not append jQuery itself. The first parameter must be boolean. In this case it will return {'number_param': '2'} and jQuery not get updated.

    enter image description here

  • jQuery.extend(a, b, c, d ,e , f); The order merge will be . b ->a , c -> a, d -> a, e -> a, f ->a (b override a, c override a ...) . And result return will be a.

    with a= {'p': 1}. jQuery.extend(a, {'p': 2},{'p': 3},{'p': 4},{'p': 5}) will return a, and a = {'p': 6}. The number parameters pass to this function is unlimited.

    enter image description here

Solution 5 - Jquery

The purpose is to extend an existing object. For e.g. if we have a template object and we want to extend that by adding more properties or override existing properties, jquery extend can be useful.

var carObjectTemplate = {
"make": "honda",


now if we want to extend it, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); it will give us ouput, extending carObjectTemplate and adding

{"color":"red"} property and overriding "model" property from "city" to "amaze"

first boolean parameter true/false is to indicate if we need a deep or shallow copy

Solution 6 - Jquery

It does exactly this

> Description: Merge the contents of two or more objects together into the > first object.

More at jQuery.extend()


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTodd TerryView Question on Stackoverflow
Solution 1 - JqueryCraig WalkerView Answer on Stackoverflow
Solution 2 - JqueryGopalView Answer on Stackoverflow
Solution 3 - JqueryJOBGView Answer on Stackoverflow
Solution 4 - Jquerychristian NguyenView Answer on Stackoverflow
Solution 5 - JquerySanjay BharwaniView Answer on Stackoverflow
Solution 6 - JqueryGabriele PetrioliView Answer on Stackoverflow