Difference between javascript packaging methods

Question

It is generally accepted that Javascript code must be wrapped with a function to prevent leakage into the global scope and simply assign everything you need outside each function to the head object ( window in web browsers).

I saw two main methods of this in the wild:

Method 1:

 (function() { // code here }).call(this); 

Method 2:

 (function() { // code here })(); 

Method 1 is CoffeeScript compiled code, and Method 2 seems preferable for jQuery plugins:

Modified method 2 for jQuery:

 (function($) { // JQuery Code })(jQuery); 

Question: What is the difference between method 1 and method 2 ? CoffeeScript loves to focus on conciseness, so I believe that the people behind CoffeeScript should have chosen Method 2 by Method 1 .

Answer 1

They are very different.

Method 1, using the call , allows you to change that this is inside the function. For instance:

 (function() { alert(this); // DOMWindow }).call(window); var myObj = {a: 0}; (function() { alert(this); // Object => myObj {a: 0} }).call(myObj); 

Be careful, although you can still dump stuff in the global area using both approaches:

 (function () { a = 5; // global var p = 10; // private to this function })(); 

Answer 2

The difference between one and two methods depends on the context in which they are used.

As in method 1, executing a function with call will use the first argument as 'this' within the function. In the method, two 'this' inside the function will refer to the global object because 'this' was not set by the call (except for ES 5 strict mode, where it will be undefined).

With this knowledge in your head, try to think about what will happen if both of these functions are placed in the root of the JS file that will be loaded in the browser.

In this context, 'this' passed in to 'call' in the one method will refer to the window object, which is the global object in the browser. The second method will do the same thing because functions in which 'this' are not specified by the call have their own set for the global object (except for ES5 strict mode, as indicated above).

Therefore, for this situation, they will behave identically.

However, there are situations when this is not so.

 var obj = { f: function() { (function() { // 'this' here is 'obj' if called as obj.f() }).call(this); (function() { // 'this' not set by the call, defaults to 'window' (ES5 caveat) })(); } }; obj.f(); 

Method one is cleaner because it explicitly conveys the value of the external 'this', reducing the likelihood of confusion and adding flexibility.

The second method is shorter and simpler if 'this' does not matter.

The jQuery version is used as an easy way to always be able to access jQuery through the $$ variable, but letting the code outside jQuery have something in between.

Answer 3

In most cases there is no difference. Method 1 explicitly establishes that the value of 'this' will be inside the function itself.