About (Function(){ ... }()) and callThis()

Question

Coffeescript compiles your files into one:

(function(){
  // código aqui
}()).callThis();

Jsfiddle: http://jsfiddle.net/ZHrPp/

Sometimes we find on the Internet a variation:

(function(){
  // código aqui
}());

Jsfiddle: http://jsfiddle.net/pSK43/

---

What use is that?

Answer 1

The main usefulness of these IIFE (function immediately auto-invoked) is to create an enclosure for variables. Thus all variables defined within this enclosure are not exported to the global space, and therefore do not pollute it.

This feature has to do with the normal functioning of the functions and how they create/change the scope of the code. What is different here is that it is immediately invoked/run and does not wait to be called.

The other important reason is that the created variables stay within that scope and are libretted from the memory after the run function, passing their value out if necessary (see example 2 below).

Some practical examples of this application:

Example 1:

(function(global){
  // código aqui
})(this);

In this example we pass into the function the this global space. In the case of client-side javascript this will be window but in the case of Node.JS this will be the global.

Example 2:

// #2479 - IE8 Cannot set HTML of style element
var canChangeStyleHtml = (function(){
    var div = document.createElement('style'),
        flag = false;
    try {
        div.innerHTML = '#justTesing{margin: 0px;}';
        flag = !!div.innerHTML;
    } catch(e){}
    return flag;
})();

This example above I did for the Mootools library to know if the browser in which the code is run can change the HTML of an element <style>. This way the function runs (auto-invoked) returns true or false. So I have this information saved and I can use it in the rest of my code, and I don’t need to run this function anymore.

Example 3:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
    (function () {
        var numero = Math.round(Math.random() * 20);
        buttons[i].addEventListener('click', function () {
            alert(numero);
        });
    })();
}

This example shows a cycle for where each iteration runs an IIFE. This function creates a proper scope that is passed and stored. So every time you click a button it will have in memory the value that corresponds to it, without being rewritten. Online example: http://jsfiddle.net/dR8KG/, and by the way the same example without the IIFE: http://jsfiddle.net/dR8KG/1/ - all buttons have the same value.