Question

I have just started to write JavaScript after some time and I am confused by plugins constructor set up. I went through this link for advice.

What does the exclamation mark do before the function?

I am interested in understanding this function set up..

I have seen seen three examples like this below:

(function(parameterOne, parameterTwo) {

    functionOne = function(...) {
       ...
   },

   functionTwo: new function() {
   },

   this.functionThree = function(...) {
   }

})()

My questions are as follows:

1. When do one use the construct as given for functionOne vs functionTwo vs functionThree? How would I be able to call the functionOne, functionTwo or functionThree explicitly?

2. I have seen functions like this:

   (function(parameter) {
   
       functionFour = function(..) {
      },
      ....
   })(document)
   

What does the document in this example indicate? I have been confused about this for a long time now.

3. I have seen jQuery plugins that follow this structure?

   (function($) {
   
     $.fn.myCustomPlugin: function(...) {
     }
   })(jQuery)
   

Why is $ passed to the function and jQuery passed at the end? I apologize as this may be rudimentary questions to some of you but these have stymied me for couple of weeks now and I am desperate to get any answers I can.

Thanks,

Kartik

Answer 1

(function(parameterOne, parameterTwo) {

Does not make sense as you’re not passing these arguments in the end. Also, looks like you’re immediately trying to create anonymous code block – makes sense in some cases, but you don’t need to do it unless you’re trying to protect global scope from whatever happens inside this code block.

    functionOne = function(...) {
       ...
   },

This is a named function similar to var functionOne will be useful only inside parent function or constructor.

   functionTwo: new function() {
   },

UPDATE: Doesn’t really make sense as you’re trying to create instance here. You can definitely immediately instantiate what you have inside that function declaration (it is same as declaring a func. first and then using operator new) but in this case what you get is an object not a function. Try:

var f = function() {};
console.log(f); // "function"
var f = new function() {}
console.log(f); // "objest"

That object is the instance of your constructor function.

   this.functionThree = function(...) {
   }

this is a method of a class. Once you instantiate the class using operator new, you can access it from outside of the instance. Also when you use this. inside a class, remember that every time you instantiate a class, it will reserve memory for this value. When the variable is different for these instances than it’s okay, but if it’s a method, you’re better of adding it to the constructor prototype, this way it’s only declared once and new memory chunks are not reserved for it.

})()

here you would ordinarily pass params you request inside, e.g. parameterOne, parameterTwo

(function(parameter) {

    functionFour = function(..) {
   },
   ....
})(document)

This is a way to pass context or any objects to this anonymous code block. In this case it looks like a plug in that takes window.document but it can also take any other part of DOM. For instance, if you want to select all tags a and receive document as param, it will iterate through all links in window.document, but if you pass $('#somediv'), this plugin will iterate through links only inside div with this id.

(function($) {

  $.fn.myCustomPlugin: function(...) {
  }
})(jQuery)

This is a good way to make sure that in the code inside $ is a jQuery object. Thing is that in Chrome for example there’s already a native function $, or in some production sites $ may be a Prototype JS function. But in the example inside you make sure that var $ is not native $ or not Prototype.

In general, you should not use (function() {...})() liberally — this is only used in specific cases when you’re protecting global environment as I mentioned above.