Why using self executing function?

Question

In many places I see scripts like this:

(function () {
    var hello = 'Hello World';
    alert(hello);
})();

Why not just write it like this, without any function:

var hello = 'Hello World';
alert(hello);

Answer 1

We use self executing function, to manage Variable Scope.

The scope of a variable is the region of your program in which it is defined. A global variable has global scope; it is defined everywhere in your JavaScript code. (Even in your functions). On the other hand, variables declared within a function are defined only within the body of the function. They are local variables and have local scope. Function parameters also count as local variables and are defined only within the body of the function.

var scope = "global";
function checkscope() {
    alert(scope);
}

checkscope(); // global

As you see, you can access the scope variable inside your function, but, within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.

var scope = "global";
function checkscope() {
    var scope = "local";
    alert(scope);
}

checkscope(); // local
alert(scope); // global

As you see, variable inside the function, won't overwrite global variables. Because of this feature, we put the code inside the self executing function, to prevent overwriting the other variables, when our code get big and big.

// thousand line of codes
// written a year ago

// now you want to add some peice of code
// and you don't know what you have done in the past
// just put the new code in the self executing function
// and don't worry about your variable names

(function () {
    var i = 'I';
    var can = 'CAN';
    var define = 'DEFINE';
    var variables = 'VARIABLES';
    var without = 'WITHOUT';
    var worries = 'WORRIES';

    var statement = [i, can, define, variables, without, worries];

    alert(statement.join(' '));
    // I CAN DEFINE VARIABLES WITHOUT WORRIES
}());

• You can read more about JavaScript on this book: JavaScript: The Definitive Guide, 6th Edition.

Answer 2

The IIFE (immediately invoked function expression) avoids creating a global variable hello.

There are other uses as well, but for the example code you posted, that would be the reason.

Answer 3

Apart from keeping the global namespace clean, they are also useful for establishing private methods for accessible functions while still exposing some properties for later use -

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
}());

// 'counter' is an object with properties, which in this case happen to be
// methods.

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

Answer 4

There can be a couple of reasons.

The first one is protecting the scope, as the function creates a new scope.

Another one can be binding variables, for example

for (var i = 0; i < n; i++) {
   element.onclick = (function(i){
      return function(){
         // do something with i
     }
   })(i);
}