javascript - Benefit of Immediately-invoked function expression (IIFE) over a normal function

Question

I'm pretty new to javascript and I read about the module pattern to provide some sort of namespace and have both private and public members, for example:

var module = (function() {
   var s = "Hello, i'm private and in closure!";
   return {
      myString : s,
      myFunc: function() { alert(s); }
   };
})();

I do see the benefits of that, because it gives you some of the advantages of object-oriented programming. But I've seen a lot of examples of an IIFE that doesn't get assigned to a variable. This (as far as I see) has no advantages at all compared to a normal function that you invoke:

1. IIFE

(function() {
   var s = "Hello I'm private!";
   $('#myButton').on('click', function() {
      alert(s);
   });
})();

2. Normal function

function Initialize() {
   var s = "Hello I'm private!";
   $('#myButton').on('click', function() {
      alert(s);
   });
}

Initialize();

They both have private variables that avoid the need of creating global variables and they both execute without returning any value to a variable. Although the second one gives you the option of choosing a good name that says a lot more than a potential large IIFE without the name, leaving the reader to find out what's happening. The answer I see everywhere is 'to avoid namespace pollution' but both approaches do that, the first one is just a bit harder to understand?

In short:

What is the benefit of using an IIFE over a normal function that I'm missing? Why should I use them?

Answer 1

Sometimes you need to define and call function at the same time and only once so in this case anonymous function helps you. In such situations giving functions a name and then calling them is just excess.

Further sometimes you wants to create a namespace for your variables. So anonymous functions helps you there too. For example

(function($) {
    $.fn.pluginName = function(opt) {
        // implementation goes here...
    }
}(jQuery));

In above case you can safely use $ as jQuery synonym in your code.

If you define a function with name as shown below, then it will create global variable with function name as you defined.

function myFunction() {
    // function code goes here.
}
myFunction();

But if you define it without name then it won't create any global variable and your global namespace will not be polluted.

(function myFunction() {
    // function code goes here.
}());

Function with names are useful only when you need to call them from different places in your code.