Anonymous Member Pattern Export/Import Function

Question

I'm a bit confused. What is the purpose of the parameters when you initiate an anonymous member pattern designated below:

(function (<ParameterA>) {

})(<ParameterB>);

1. I understand that Parameter A is used to designate the scope of the function is this true?
2. Is ParameterB where you export the function?

Finally, I often see script indicating the following:

})(jQuery || myfunc);

Does that mean they're exporting these or returning these objects? And what's the point of using the two pipes (||); It a field goal thing?

Thanks in advance. Looking forward to interesting discussion.

Answer 1

Parameter A does not designate the scope of the function. The function's position determines the scope of the function. ParameterB is not where you export the function. In fact, the way this is set up, there is no pointer to the function anywhere which makes it an "anonymous function." In other words, as is, the function itself is un-exportable. Usually when you talk about exporting things, you're talking about exporting variables that you defined inside anonymous functions. For example, here I am exporting the function my_inner_function from an anonymous function.

(function (<ParameterA>) {
  // export this function here.
  window.my_inner_function = function() {
    ...
  };
})(<ParameterB>);

Usually, the point of anonymous functions is that you have all kinds of variables that you don't want to export because you don't want to possibly muck with other code.

(function (<ParameterA>) {
  // convert could be defined somewhere else too, so to be on the safe side
  // I will hide it here in my anonymous function so nobody else can
  // reference it.
  var convert = function() {
    ...
  };
})(<ParameterB>);

This is particularly important when you compress your Javascript and get function names like a and b.

(function (<ParameterA>) {
  // So compressed!
  var a = function() {
    ...
  };
})(<ParameterB>);

(function () {
  // Another compressed thing! Good thing these are hidden within anonymous
  // functions, otherwise they'd conflict!
  var a = function() {
    ...
  };
})();

Now this

(function (<ParameterA>) {

})(<ParameterB>);

is the same thing as

// Assume ParameterB is defined somewhere out there.
(function () {
  var ParameterA = ParameterB;
})();

Which gives you an idea why you'd use the parameters. You may find the parameter approach less confusing, or you may want to make it clear that you don't want to affect "by value" variables such as numbers and strings.

As others have pointed out, a || b is spoken as "a or b" and means "a if a evaluates to true, otherwise b, no matter what b is."

Edit

To answer your question, when you get to })(); the () causes the anonymous function to run. Remember that Javascript engines will first parse all code to make sure the syntax is correct, but won't actually evaluate/execute any code until it reaches that code. Hence, it's when the anonymous function runs that var ParameterA = ParameterB; gets evaluated. Here are some examples that hopefully help.

var ParameterB = "hello";

(function () {
  var ParameterA = ParameterB;
  // alerts "hello" because when this line is evaluated ParameterB is still
  // "hello"
  alert(ParameterA); 
})(); // () here causes our anonymous function to execute

ParameterB = "world";

Now in this example, the function is no longer anonymous because it has a pointer. However, it acts the same as the previous example.

var ParameterB = "hello";

var myFunction = function () {
  var ParameterA = ParameterB;
  // alerts "hello" because when this line is evaluated ParameterB is still
  // "hello"
  alert(ParameterA); 
};

myFunction();

ParameterB = "world";

In this example, I change the order of the last 2 lines and get different results.

var ParameterB = "hello";

var myFunction = function () {
  var ParameterA = ParameterB;
  // alerts "world" because when this line is evaluated ParameterB has
  // already changed.
  alert(ParameterA); 
};

// notice that I moved this line to occur earlier.
ParameterB = "world"; 

myFunction();