← Back to jQuery Course | Chapter 11: Utility Methods | Lesson 4 of 6

Merging Objects with extend()

The extend method copies properties from one object to another. It is useful for combining settings.

In this page:

  1. What is extend()?
  2. Override Properties
  3. Use Default Options
  4. Merge Multiple Objects
  5. Small extend() Project
Syntax
javascript 
var merged = $.extend({}, object1, object2);
var deep = $.extend(true, {}, object1, object2);

What is extend()?

$.extend() copies the properties of one or more source objects onto a target object, merging them together into a single combined object. It's jQuery's answer to the native Object.assign(), and it's especially common for combining a plugin's default settings with whatever options a caller actually provides.

Example: What is extend()?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const merged = $.extend({a: 1}, {b: 2});
      $("#output").text(JSON.stringify(merged));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Override Properties

When two source objects share the same property name, the object that comes later in the argument list wins and overwrites the earlier value. This ordering is what makes the common 'defaults, then user options' pattern work — the user's choices always take priority over the built-in defaults.

Example: Override Properties

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const result = $.extend({color: "red"}, {color: "blue"});
      $("#output").text(String(result.color));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Use Default Options

A very common pattern is to define a defaults object with sensible fallback values, then call $.extend({}, defaults, userOptions) to produce a final settings object. This way, users only need to specify the options they actually want to change, and everything else falls back to a safe default.

Example: Use Default Options

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const defaults = {speed: 300, color: "blue"};
      const userOptions = {color: "red"};
      const settings = $.extend({}, defaults, userOptions);
      $("#output").text(JSON.stringify(settings));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Merge Multiple Objects

You can merge more than two objects in a single $.extend() call, and properties are copied from left to right across all of them. This is useful when combining several independent sources of configuration — say, library defaults, a theme's overrides, and the user's own settings — into one final object.

Example: Merge Multiple Objects

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const merged = $.extend({}, {a: 1}, {b: 2}, {c: 3});
      $("#output").text(JSON.stringify(merged));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Small extend() Project

extend() is especially valuable for building reusable, configurable functions, since it lets each caller override only the specific options they care about instead of having to specify a complete settings object every time.

Example: Small extend() Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      function createWidget(options) {
        const settings = $.extend({speed: 300, color: "blue"}, options);
        $("#output").text(JSON.stringify(settings));
      }
      createWidget({color: "green"});
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Introduction to Deferred Objects · Array Helper Utilities · Binding Context with proxy() · String Cleaning with trim()

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Calling $.extend(defaults, options) and losing the original defaults, when the first argument is changed; use $.extend({}, defaults, options).
  2. Expecting nested objects to merge with a shallow $.extend(), when the nested object is replaced entirely unless you pass true first for a deep merge.
  3. Putting the arguments in the wrong order, such as $.extend({}, options, defaults), so the defaults overwrite the user's options.
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson Array Helper Utilities Next Lesson → Binding Context with proxy()

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.