Can someone please tell me what this javascript code is doing

Question

This code comes from jquery.validate.js. I think it is a self-executing function but I am having a hard time parsing the syntax with respect to the second function declaration. Is function($) {} the parameter to the first function, ie the factory?

(function (factory) {
    alert("In jquery.validate.js factory");
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery"], factory );
    } else {
        factory( jQuery );
    }
}(function ($) {
... //body of function
});

Possible duplicate of [What is the (function() { } )() construct in JavaScript?](https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript) — Durga, Apr 04 '18 at 12:47
no, the second function is just an anomynous function on its own. its parameter is the typical jQuery selector (i.e. the jQuery object), which is $ — meistermuh, Apr 04 '18 at 12:48
_“Is `function($) {}` the parameter to the first function, i.e. the `factory`?”_ — Yes. — Sebastian Simon, Apr 04 '18 at 12:51
If that is the factory, (which I agree with you it is) how is it accessed? Wouldn't it be completely encapsulated? How would someone use it? — root44, Apr 04 '18 at 13:10

score 2 · Accepted Answer · answered Apr 04 '18 at 12:58

This is a common library pattern we see today and at first it struck me as odd. It took a while to understand what was happening.

First, This is a self executing function that passes in a function. Let's first look at the construct before we look at the actions.

// Self executing function that takes no arguments.
(function () { 
    // Some code here.
})();



// Self executing function that takes an argument.
(function (argument) {
     alert(argument);
})("Hello World");



// Self executing function that takes function as argument.
(function (factory) {
   // Self executing. Executes as soon as the script is loaded.
   // At this point, factory = the function below.
})(function (param) {
   // Not self executing! Must be called.
});

Now that we understand the construct of what is happening here, let's look at this code:

// If there is a variable called "define", and that variable is a function, call that function with the paramenter jQuery and pass it the function. This is how we define a library in RequireJS.
if ( typeof define === "function" && define.amd ) {
    define( ["jquery"], factory );
} else {
    // This is how we define the jQuery library everywhere else in the world. We pass the global window.jQuery into the function.
    factory( jQuery );
}

So all together now,

// Define jQuery.
(function (factory) {
    // If using RequireJS, define jQuery by calling the define function with the jQuery factory.
    if ( typeof define === "function" && define.amd ) {
         define( ["jquery"], factory );
    } else {
        // Otherwise, just call the jQuery factory.
        factory( jQuery );
    }
}(function ($) {
    // Use JQuery or $.
});

Can someone please tell me what this javascript code is doing

1 Answers1