JavaScript Module Pattern written two different ways with same results

Question

I have been developing an app using JavaScript and all of my scripts are using the Module Pattern. Example:

              var MyFunction = (function(){


             }());

I saw where someone placed the name of the function inside the calling (). Example:

          var MyFunction = (function(){


         }(MyFunction));

I add this to some of my page and it still ran normal. Can anyone explain why it would be written with the name of the function inside the ()?

Probably because your function doesn't have any parameters so it doesn't care whats passed in. — Carlos Bribiescas
– Carlos Bribiescas, Commented Aug 24, 2015 at 20:21
It's an IIFE, MyFunction is passed to your function definition as a variable. If your function body does not use it, it makes no sense to pass it in. It is just a variable. Nothing unusual. — Stack0verflow
– Stack0verflow, Commented Aug 24, 2015 at 20:28
The second one is equivalent to var MyFunction = (function(){ ... }(undefined));, since MyFunction is undefined at the moment it is accessed. — Felix Kling
– Felix Kling, Commented Aug 24, 2015 at 20:55

Katana314 · Accepted Answer · 2015-08-24 20:32:29Z

2

Can anyone explain why it would be written with the name of the function inside the ()?

No. That coder didn't know quite what they were doing. (A lot tends to get left in when someone doesn't want to break working code)

That said, there are some situations where you would pass something into the IIFE, like window or jquery. You'd treat it as an argument on the inside, though.

answered Aug 24, 2015 at 20:32

Katana314

8,6052 gold badges31 silver badges36 bronze badges

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

1 Comment

jmoneilthe2 Over a year ago

Thank you. That makes sense that it is just a parameter being passed in to the function.

Sébastien RoccaSerra · Accepted Answer · 2015-08-24 20:51:39Z

The two versions you show are equivalent, but the second one is misleading: the parameter of the IIFE is not used.

You might want to pass (and use) an argument to a module IIFE to alias a dependancy:

var myModule = (function(t) {
    //...
    var someText = t('some.key');
    //...
})(translationModule);

Another use which is opposite to your second example is to declare an argument to the IIFE, and pass nothing. This is to make sure that undefined is... undefined:

var myModule = (function(undefined) {
    // Here you're safe from bizare third party code which might define 'undefined'.
})();

In his book Learning JavaScript Design Patterns, Addy Osmani shows several variations of the module pattern:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

Collectives™ on Stack Overflow

JavaScript Module Pattern written two different ways with same results

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related