jQuery $.extend() Method

The $.extend() method merges the properties of one or more objects into a target object. It is commonly used to merge default settings with user-provided options — a pattern used in almost every jQuery plugin.

Basic Syntax

$.extend(target, object1, object2, ...);

// Merges object1, object2, etc. INTO target
// Returns the modified target object

Simple Merge Example

var defaults = { color: "blue", size: 14, bold: false };
var options  = { color: "red", bold: true };

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

console.log(result);
// { color: "red", size: 14, bold: true }

Properties from options overwrite matching properties in defaults. Properties not present in options (like size) remain from defaults.

Diagram: $.extend() Merge Logic

  defaults: { color: "blue", size: 14, bold: false }
  options:  { color: "red",           bold: true  }

  Merge result:
  color → "red"   (overwritten by options)
  size  → 14      (kept from defaults, not in options)
  bold  → true    (overwritten by options)

  Final: { color: "red", size: 14, bold: true }

Protect the Original Object

When you merge into defaults directly, it modifies the original object. To keep defaults unchanged, merge into an empty object {} first.

var defaults = { color: "blue", size: 14 };
var options  = { color: "red" };

// This modifies defaults directly:
$.extend(defaults, options);
// defaults is now { color: "red", size: 14 }  ← modified!

// This keeps defaults safe:
var settings = $.extend({}, defaults, options);
// defaults is still { color: "blue", size: 14 }  ← unchanged
// settings is { color: "red", size: 14 }

Diagram: Safe Merge with Empty Target

  {}        ← empty target (start fresh)
  +defaults ← add defaults
  +options  ← options overwrite matching keys

  Result goes into settings.
  defaults and options are both unchanged.

Deep Merge — Nested Objects

By default, $.extend() does a shallow merge. If a property is itself an object, it is replaced entirely rather than merged. Use true as the first argument for a deep merge.

var defaults = {
    theme: { color: "blue", font: "Arial" },
    timeout: 3000
};
var options = {
    theme: { color: "red" }
};

// Shallow merge — theme is replaced entirely:
var shallow = $.extend({}, defaults, options);
// shallow.theme = { color: "red" }  ← font is LOST!

// Deep merge — theme properties are merged:
var deep = $.extend(true, {}, defaults, options);
// deep.theme = { color: "red", font: "Arial" }  ← font is KEPT!

Diagram: Shallow vs Deep Merge

  defaults.theme = { color: "blue", font: "Arial" }
  options.theme  = { color: "red" }

  Shallow:
  options.theme replaces defaults.theme entirely
  result.theme = { color: "red" }     ← font gone!

  Deep ($.extend(true, ...)):
  options.theme merges INTO defaults.theme
  result.theme = { color: "red", font: "Arial" }  ← font kept!

Real-World Use: Plugin Default Settings

function createTooltip(element, userOptions) {
    var defaults = {
        position:  "top",
        delay:     200,
        animation: true,
        maxWidth:  250
    };

    // Merge user options with defaults, protecting defaults
    var settings = $.extend({}, defaults, userOptions);

    // Use settings throughout the plugin
    console.log("Position:", settings.position);
    console.log("Delay:",    settings.delay);
}

// User only overrides what they need
createTooltip("#btn", { position: "bottom", delay: 500 });
// settings = { position: "bottom", delay: 500, animation: true, maxWidth: 250 }

Adding Properties to jQuery Itself

Developers use $.extend() to add utility functions directly to the jQuery object.

$.extend({
    greet: function(name) {
        return "Hello, " + name + "!";
    },
    square: function(n) {
        return n * n;
    }
});

console.log($.greet("Ravi"));   // "Hello, Ravi!"
console.log($.square(5));       // 25

Common Mistakes

• Modifying defaults by passing it as the target — always use {} as the first argument to avoid this.
• Expecting nested objects to be deep-merged by default — they are not. Add true as the first argument for deep merge.
• Confusing $.extend() (merges into target) with Object.assign() — they behave similarly but $.extend(true) supports deep merge which Object.assign does not.

Quick Summary

• $.extend(target, source) merges source properties into target.
• Source properties overwrite matching target properties; unmatched ones remain.
• Use $.extend({}, defaults, options) to protect the original defaults object.
• Use $.extend(true, {}, ...) for deep merge of nested objects.
• Used widely in jQuery plugin development to handle default settings cleanly.