jQuery.extend() Method

Beginner
6 min read
Updated: Oct 2026
4 examples
Live preview
jQuery.extend() — merge objects shallow or deep
Definition

What Is jQuery.extend()?

jQuery.extend(target, object1, …) (alias $.extend) merges properties into the first object and returns it (since jQuery 1.0). Pass true first for a recursive deep merge (since 1.1.4).

Remember
$.extend(target, source)           // shallow — nested objects replaced
$.extend(true, target, source)     // deep — nested plain objects merge
$.extend({}, defaults, options)    // new object; defaults stay intact
$.extend({ myPlugin: fn })         // one arg → extends jQuery itself
NeedUse
Merge objects$.extend(target, src)
Merge arrays$.merge(first, second)
Plain object check$.isPlainObject(obj)
Approach

How to Use jQuery.extend()

Choose a target, decide shallow vs deep, then merge sources left to right.

  1. Pick the target (often {} if you want a fresh object).
  2. Optionally pass true first for a deep merge.
  3. Pass one or more source objects — later keys overwrite earlier ones.
  4. Use the returned object (same reference as the target).
PieceRequired?Role
deepNotrue for recursive merge (only true supported)
targetYes*Receives properties (*omitted when extending jQuery)
object1…NYesSources to copy from
Return value—The modified target object

Pseudocode

Pseudocode
function extend(deep, target, sources...):
    for each source in sources:
        for each key in source:
            if value is undefined: skip
            if deep and both values are plain objects/arrays:
                merge recursively into target[key]
            else:
                target[key] = value   // replace
    return target
Reference

Cheat Sheet

Keep these facts handy when merging config objects.

TopicDetail
SyntaxjQuery.extend([deep], target, object1[, …])
Since1.0 (deep flag: 1.1.4)
DefaultShallow — nested objects replaced
Preserve originals$.extend({}, a, b)
One argumentExtends the jQuery namespace
Native cousinObject.assign() (shallow only)
Try it

Live Preview

Compare shallow merge, deep merge, and the defaults + options pattern.

Browser demo of $.extend() — same idea as the examples below.

Result
{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Merge Two Objects (Shallow)

Official style: modify the first object; nested keys are replaced.

jQuery
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

$.extend(object1, object2);
console.log(JSON.stringify(object1));
// {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
Try It Yourself

How It Works

  1. Target. object1 receives new properties in place.
  2. Replace. banana becomes { price: 200 } — weight is lost.
  3. Add. durian: 100 is copied onto the target.
  4. Return. $.extend returns the same object1 reference.

Example 2 — Recursive Deep Merge

Pass true first so nested plain objects combine.

jQuery
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

$.extend(true, object1, object2);
console.log(JSON.stringify(object1));
// {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
Try It Yourself

How It Works

  1. Deep flag. true enables recursive merging.
  2. Nested merge. banana keeps weight and updates price.
  3. Top-level add. durian is still copied as usual.
  4. Tip. Deep-extending cyclic structures throws an error.

Example 3 — Defaults + Options (Plugin Pattern)

Merge into {} so the defaults object stays unchanged.

jQuery
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

var settings = $.extend({}, defaults, options);

console.log(JSON.stringify(defaults));   // unchanged
console.log(JSON.stringify(options));    // unchanged
console.log(JSON.stringify(settings));
// {"validate":true,"limit":5,"name":"bar"}
Try It Yourself

How It Works

  1. Empty target. {} is the object that gets modified.
  2. Copy defaults first, then overwrite with options.
  3. Result. settings has limit: 5 plus updated flags/name.
  4. Safe. defaults and options are left alone.

Example 4 — Extend the jQuery Namespace

One object argument merges onto jQuery / $ itself.

jQuery
$.extend({
  greet: function (name) {
    return "Hello, " + name;
  }
});

console.log($.greet("CodeToFun"));  // "Hello, CodeToFun"
Try It Yourself

How It Works

  1. One argument. Target defaults to the jQuery object.
  2. Add method. greet becomes available as $.greet.
  3. Call it like any other jQuery utility.
  4. Use case. Classic pattern for plugin authors adding helpers.

Edge Cases & Pitfalls

Check these before relying on $.extend in plugins.

mutate

Target is modified

The first object changes in place. Use $.extend({}, …) when you need a copy.

shallow

Nested objects are replaced by default

Without true, a nested source object overwrites the whole nested target value.

types

Date / RegExp / custom classes

They are not reconstructed on deep extend — they may appear as plain objects. Prefer a custom merge or a library for those cases.

false

Do not pass false as deep

Only omit the flag (shallow) or pass true. false is not supported.

Compatibility

Browser Support

jQuery.extend() has shipped since jQuery 1.0 (deep flag since 1.1.4). It works in all modern browsers with jQuery loaded. Prefer jQuery 3.4+ for safer deep merges.

✓ jQuery 1.0+

jQuery.extend()

Supported everywhere jQuery runs in the browser. Use shallow merge by default; pass true for deep.

100% Browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
$.extend() Excellent

Bottom line: Call $.extend(target, src) or $.extend(true, target, src). Use {} as the target to preserve originals.

Analysis

Performance Notes

ApproachCostBest for
$.extend(a, b)O(keys)Flat config / options
$.extend(true, a, b)O(tree)Nested plain objects
Object.assign()O(keys)Native shallow copy

For typical plugin options, cost is negligible. Prefer shallow merge unless you truly need nested combination.

Remember

Key Takeaways

  • Role: copy properties into a target object (and return it).
  • Deep: pass true first to merge nested plain objects.
  • Safe copy: $.extend({}, defaults, options).
  • Arrays: prefer $.merge for appending array-likes.

One line: $.extend(target, src) merges into the target — add true for deep, or start with {} to keep originals.

Frequently Asked Questions

jQuery.extend(target, object1, …) copies properties from one or more sources into target. The target is modified in place and also returned. Null and undefined sources are ignored.
Default is shallow: a nested object on the target is replaced wholesale by the same key from a source. Pass true first — $.extend(true, target, source) — to recursively merge plain objects and arrays.
Use an empty object as the target: var settings = $.extend({}, defaults, options). defaults stays untouched; settings gets the combined result.
No. undefined values are skipped. Inherited prototype properties on sources can still be copied.
Object.assign() is shallow only and native ES2015+. $.extend() also supports deep merge with true and has long been the plugin pattern for defaults + options in jQuery.
If you pass a single object, jQuery itself is the target — properties are added to the $ / jQuery namespace. Plugin authors use this to register helpers like $.myPlugin.

Next: merge()

Learn how jQuery.merge appends two array-like collections.

merge() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery.grep() Method jQuery.merge() Method