Difference Between jQuery $.extend and $.fn.extend

Understanding the difference between $.extend() and $.fn.extend() is essential for writing clean jQuery code and building custom plugins. While both methods are designed to merge properties and functions into target objects, they serve completely different purposes within the jQuery architecture. In short, $.extend() is used to merge regular JavaScript objects or add static utility methods directly to the core jQuery object, whereas $.fn.extend() is used to add instance methods to the jQuery prototype so they can be chained and executed on DOM selections.

Understanding $.extend()

The $.extend() method is a general utility used primarily for merging two or more objects into a single target object, or for attaching static functions directly to the global jQuery (or $) namespace.

When used to add methods to jQuery, it attaches them as static methods. These functions do not operate on selected DOM elements and cannot be chained from a selector query like $('div').

Common Use Cases:

1. Object Merging (Cloning and Settings Defaults):

   const defaults = { color: "blue", size: "medium" };
   const options = { color: "red" };
   const settings = $.extend({}, defaults, options);
   // Result: { color: "red", size: "medium" }

2. Defining Utility Functions:

   $.extend({
     sayHello: function(name) {
       return "Hello, " + name;
     }
   });
   
   // Invocation:
   $.sayHello("Alice"); // Returns: "Hello, Alice"

In this context, sayHello becomes a static method, identical in nature to built-in utilities like $.ajax() or $.trim().

Understanding $.fn.extend()

In jQuery, $.fn is simply an alias for jQuery.prototype. When you use $.fn.extend(), you are extending jQuery's prototype chain.

Any method added via $.fn.extend() becomes available to every jQuery element selection instance. This is the standard mechanism used for authoring custom jQuery plugins. Inside these functions, this refers to the current jQuery collection, allowing you to manipulate DOM nodes and maintain jQuery method chaining.

Example Use Case (Writing a Plugin):

$.fn.extend({
  colorize: function(colorName) {
    return this.css("color", colorName);
  }
});

// Invocation on a selection:
$("p").colorize("green");

In this example, colorize is executed on all matched <p> elements, and returning this preserves chainability for subsequent operations like $("p").colorize("green").fadeIn();.

Core Differences at a Glance

• Target Scope: $.extend() modifies the global jQuery namespace or standard JavaScript objects. $.fn.extend() modifies the jQuery prototype ($.fn).
• Invocation: Methods added via $.extend() are called statically (e.g., $.myMethod()). Methods added via $.fn.extend() are called on wrapped element sets (e.g., $('.selector').myMethod()).
• Purpose: Use $.extend() for configuration merging, utility helpers, and general object manipulation. Use $.fn.extend() exclusively for building DOM-interactive plugins.