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.