CODEWITHSUNDEEP
javascriptjquery
starcookie
starcookie

Reputation: 31

Reason for passing function to self executing function

I got js code from a design company, but I do not understand the reason for passing a function to a self executing function.

Here is the outline of the code.

(function(core) {
   if (typeof define === "function" && define.amd) {
       define("abc", function() {
           var abc;
           abc = window.Abc || core(window, window.jQuery, window.document);
           abc.load = function(res, req, onload, config) {
               var base, i, load, resource, resources;
               resources = res.split(",");
               load = [];
               base = (config.config && config.config.abc && config.config.abc.base ? config.config.abc.base : "").replace(/\/+$/g, "");
               if (!base) {
                   throw new Error("Please define base path to Abc in the requirejs config.");
               }
               i = 0;
               while (i < resources.length) {
                   resource = resources[i].replace(/\./g, "/");
                   load.push(base + "/components/" + resource);
                   i += 1;
               }
               req(load, function() {
                   onload(abc);
               });
           };
           return abc;
       });
   }
   if (!window.jQuery) {
       throw new Error("Abc requires jQuery");
   }
   if (window && window.jQuery) {
       core(window, window.jQuery, window.document);
   }
})(function(global, $, doc) {
   var _c = {};
   ...
   return _c;
});

Is there benefit of writing code such way over something like below?

(function( core, $, undefined) { 
   ... 
} (window.core= window.core|| {}, jQuery )};

Upvotes: 3

Views: 162

Answers (1)

Shotgun Ninja
Shotgun Ninja

Reputation: 2540

Is this some advanced technique?

Basically, ....kinda.

In Javascript, functions are treated as first-class objects. This means you can pass them around in variables and whatnot. The first part, (function(core) { ... }), creates an anonymous function, taking a single argument called core. The parentheses around the function basically just resolve to a function. The second part, (function(global, $, doc) { ... }), is creating another function, which is passed immediately into a call to the first function as the value of core.

Put this way, here's what's happening.

// Define the first function (the one that takes core)
var firstFunc = function (core) { /* ... */ };

// Define the second function (the one that takes global, $, and doc)
var secondFunc = function (global, $, doc) { 
    var _c = {};
    /* ... */ 
    return _c;
};

// Call the first, passing in the second.
firstFunc(secondFunc);

The above code and the code you posted accomplish the same thing. One purpose for writing something like this would be to sandbox the second function so that the first can specify its own local versions of variables global, $, and doc, which avoids conflicts with, say, active-running versions of jQuery (which typically declares its own globally-scoped $ variable).

EDIT: Now that the code in the first function has been filled in, we can say for sure that the reason for doing this is to resolve dependencies and ensure they are present before manually passing them into the second function. From the look of the code provided, it appears that this is enforcing the presence of abc (which I'm assuming is some dependency) via require.js, as well as ensuring that jQuery is present. In addition, it looks like the values in _c returned from the function are used as a part of that dependency enforcement process, though I can't tell exactly how by looking at it.

Upvotes: 1

Related Questions