What is this pattern in javaScript and where can I read more about it

Question

I have codes similar to the following:

 (function(MyHelper, $, undefined){

var selectedClass = "selected";

MyHelper.setImageSelector = function(selector) {
    var container = $(selector);

    setSelected(container, container.find("input:radio:checked"));
    container.find("input:radio").hide().click(function() {
        setSelected(container, $(this));
    });
};

MyHelper.enableIeFix = function(selector) { 
    var container = $(selector);
    container.find("img").click(function() {
        $("#" + $(this).parents("label").attr("for")).click();
    });
};

function setSelected(container, selected) {
    container.find("label").removeClass(selectedClass);
    selected.siblings("label").addClass(selectedClass);
}

 }( window.MyHelper = window.MyHelper || {}, $))

I am new in JS and I am wondering if this is a specific pattern in javascript programming. I specfically wondering what is the meaning of last line:

   }( window.MyHelper = window.MyHelper || {}, $))

Is It Module pattern?

Answer 1

Yes, this is basically a module pattern.

A summary of how modules are created using the module pattern is:

• Create a module scope, typically by using an immediately invoked function expression (IIFE) to create a closure. This creates your "private space" for your module, avoid global pollution and keep your code modular and isolated.

• Have an namespace to attach your public methods. Developers have different methods of doing this "attachment" procedure. Some developers "hand-in" objects to the module, while others "return" an object to be stored in a variable. Either way, it's the same.

In this case, it's the "hand-in" version of the module pattern

(function(MyHelper, $, undefined){

    var selectedClass = "selected";

    MyHelper.setImageSelector = function(selector) {};

    function setSelected(container, selected) {}

}(window.MyHelper = window.MyHelper || {}, $))

---

In the last line, it immediately calls your function and it sends these arguments

(window.MyHelper = window.MyHelper || {}, $)

It's similar to doing this, but without the use of function names:

function anonymous(MyHelper, $, undefined){...}
anonymous(window.MyHelper = window.MyHelper || {}, $);

• The first argument, window.MyHelper = window.MyHelper || {} is a combination of operations. Whatever that operation returns, provides the MyHelper argument in the module.

  • The || is a "default" operation. If the value left of the || is "falsy", then the value assumed by the expression "defaults" to the one at the right. So in your code, if window.MyHelper does not exist, then it defaults to an object {}.

  • With the "default" operation, window.MyHelper will be assigned either an existing window.MyHelper or if none exists, a new Object instance {}

  • Assignment operations in JavaScript do return values. The value returned by the assignment operation is the value that was assigned to the variable. This also makes it possible for that entire operation provide a value to the module.

• the second argument is whatever $ is (I assume jQuery?)

• the third argument is not passed, and from the inside, it's undefined. it's done this way since as far as i know, the undefined is mutable. so to have a purely undefined undefined, we send it nothing, and thus the variable undefined is undefined.

---

What this code does:

MyHelper.setImageSelector = function(selector) {};

was add to MyHelper the method setImageSelector and since your MyHelper is from the outside, anyone who uses it now has the MyHelper.setImageSelector() method.

the other functions and variables inside the IFFE that are not augmented to MyHelper are what you call "private" members. JavaScript has a functional scope, meaning that it creates a new scope every function declaration. In simple speak, what is inside can see the outside, but the outside cannot see inside. This is also one way of not polluting the global scope with a lot of functions and variables