jQuery extend() Method

Last Updated:

jQuery extend() Method

The jQuery extend() method merges the contents of two or more objects together into the first object.

Note: The merge performed by extend() method is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second or subsequent object.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery extend() Method</h1> <p>Click on the button and check your console.</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ var a = {foo: 1, bar: 1}; var b = {foo: 2, koo: 2}; var c = {koo: 3, yaa: 3} var r = $.extend(a, b, c); console.log(a); console.log(b); console.log(c); console.log(r); console.log(a === r); }); }); </script> </body> </html>

Syntax

$.extend(targetObj, obj1, ..., objN);

Parameter Values

Value Type Explanation
targetObj Required Specifies an object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.
obj1, ..., objN Optional Specifies objects containing additional properties to merge in.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
extend()YesYesYesYesYesYesYesYesYesYesYesYesYes

Share this Page

Meet the Author