Can someone help explain jQuery extend in a very simple way?

Question

I have the following code:

     $.extend($.fn.dataTableExt.oSort, {
        "datetime-uk-pre": function (a) {
            from = a.split(' ');
            var ukDatea = from[0].split('/');
            var ukTimea = from[1].split(':');
            return (ukDatea[2] + ukDatea[1] + ukDatea[0] + ukTimea[1] + ukTimea[0]) * 1;
        },
        "datetime-uk-asc": function (a, b) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
        "datetime-uk-desc": function (a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

    $.extend($.fn.dataTableExt.oSort, {
        "date-uk-pre": function (a) {
            var ukDatea = a.split('/');

            return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
        },
        "date-uk-asc": function (a, b) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
        "date-uk-desc": function (a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

I read about about extend but still don't understand what it is doing. Can someone help explain this. What I am looking for is a simple explanation as possible. Also can I combine these two code blocks in some way.

This is code to give datatables a different way to sort. But what does it mean:

$.fn.dataTableExt.oSort

Yes, it merges the contents of two or more objects together into the *first* object. Have a look on [jQuery.extend()](http://api.jquery.com/jQuery.extend/) specs. — alexbusu, Sep 10 '12 at 13:55
Take a look at http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean for $.fn — Michael Laffargue, Sep 10 '12 at 13:59
In your example `$.fn.dataTableExt.oSort` options are rewritten(or just added) from the second argument(object) of `extend()` method. — alexbusu, Sep 10 '12 at 13:59

score 5 · Accepted Answer · edited Jul 18 '19 at 18:04

DataTables provides several sorting options in the base package. The one you are looking at is called Type based column sorting, which basically will try to sort your column based on its type. DataTables already provisions default sorting functions for the most common types, such as Date, Numeric, and HTML. These are registered as properties in an object called oSort, which is accessible using $.fn.dataTableExt.oSort. This object looks like this:

oSort = {
  "string-pre": function ( a ) {
    // ...
  },
  "numeric": function ( a ) {
    // ...
  }
}

However, if you need a custom sorting function for a custom type, you can extend the oSort object, by adding additional keys, or properties, to the oSort object.

For example, to add a new type, called date-uk-pre, you could use:

$.fn.dataTableExt.oSort['date-uk-pre'] = function ( a ) {
  // ...
}

That is, you are extending the oSort with a new property called date-uk-pre. jQuery's $.extend() is nothing but a shortcut for this. Instead of adding manually each property, for each new type, you pass a new object, with all your new types (e.g., date-uk-pre, datetime-uk-pre, and jQuery merges them with the existing oSort object, effectively extending it with the new functions. You can even combine both $.extend()s to a single one:

$.extend($.fn.dataTableExt.oSort, {
    "date-uk-pre": function (a) {
        var ukDatea = a.split('/');

        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },
    "date-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "date-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    },
    "datetime-uk-pre": function (a) {
        from = a.split(' ');
        var ukDatea = from[0].split('/');
        var ukTimea = from[1].split(':');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0] + ukTimea[1] + ukTimea[0]) * 1;
    },
    "datetime-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "datetime-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

sajawikio · Answer 2 · 2012-09-10T14:02:32.360

1

like this:

var m1 = {'a':'a','b':'b'};
var m2 = {'c':'c','d':'d'};
var m3 = {'e':'e','f':'f'};

$.extend(m1,m2,m3);

console.log("m1:");
console.log(m1);

//Result : 
//m1:
//{'a':'a','b':'b','c':'c','d':'d','e':'e','f':'f'};

Also, for one argumnt:

$.extend(m1)

is equivalent to

$.extend($, m1);

or

jQuery.extend(jQuery, m1);

So jQuery would be extended. Then jQuery will contain two additional properties in my particular example above: 'a':'a' and 'b','b' . So $.a would return 'a'.

See http://api.jquery.com/jQuery.extend/ for more information.

edited Sep 10 '12 at 14:02

answered Sep 10 '12 at 13:57

sajawikio

1,516
7
12

So can I combine the above one after the other? – Samantha J T Star Sep 10 '12 at 14:03
Yes, let's say you already did $.extend(m1,m2,m3); in my example. If you then issued something like this line: $.extend(m1, {'h':'h'}); yes, you are right, it would combine again! it would indeed add the h key and h property and yes there would be a,b,c,d,e,f,g and now h as keys and values in m1, and yes you could continue to do this again and again if you wanted. – sajawikio Sep 10 '12 at 14:07

score 1 · Answer 3 · answered Sep 10 '12 at 13:57

The extend function adds properties defined in the second argument to the object in the first argument. Commonly it is used to add more functionality to a plugin as it is in the code above. The code above adds six functions to the $.fn.dataTableExt.oSort object. Which from Google search is this plugin. After extending the plugin, you can do something like:

$('selector').dataTableExt.oSort.date-uk-pre();

Can someone help explain jQuery extend in a very simple way?

3 Answers3