1

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.

  1. 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

2

1 Answer 1

2

(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.

Sign up to request clarification or add additional context in comments.

4 Comments

My examples were possible wrong or incorrect because I don't know javascript that well. I am learning as I go but that is why I asked this question.
I get it, I did not mean to be critical at all, I am just explaining what you got there :)
May I ask how would I invoke the functions functionOne, functionTwo, and functionThree, if at all possible?
if invoke function by using () after function name, e.g. functionOne() and by using call or apply methods. You can get an instance of a function, which is a JS object, by using keyword new. Remember that what you get by doing that is an object, not a function. In your example invocation for all of them is same -- functionOne(args) or functionTwo.call(args) or this.functionThree.apply(args).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.