Difference between calling an anonymous function directly vs calling it by variable?

Question

I am having trouble wrapping my head around this (assuming I am missing something in there being a difference in calling an anonymous function directly or calling it by a variable.

Why does in the example below 0 set the variable 'total'?

var adder = function (total) {

    // the following function is returned 
    // and assigned to adder
    var inner_function = function (summand) {
        total += summand;
        alert(total);
    }

    return inner_function;

}(0);

adder(2); // returns 2
adder(3); // returns 5

But not when I call this anonymous function afterwards like so?

var adder = function (total) {

    // the following function is returned 
    // and assigned to adder
    var inner_function = function (summand) {
        total += summand;
        alert(total);
    }

    return inner_function;

} 

adder(0);
adder(2); // -> 2
adder(3); // -> 5

Answer 1

You have two functions.

In the first example you assign the return value (ie the inner anonymous function) of the outer anonymous function to adder .

In the second example you assign the outer anonymous function to adder .

Since the value of adder is a different function in each case, you get different results.

Answer 2

In your first piece of code your are invoking function when you are closing the body of function with '(0)' which is called self invoking function. So in both the sample of codes you are actually calling your function three times.

function(){}() : this is function declaration and self invoking as well.

function (){} : this is just a function declaration.

Answer 3

First example shows usage of immediately invoked function expressions to create a closure that captures passed 0. Notice that you actually return inner function and afterwards call it instead of original one.

In second example you also create a closure and return inner function but it isn't assigned to anything, therefore subsequent calls target outer function and create more closures.

Try this:

adder = adder(0)

Here you override original function with inner one

Answer 4

In the first example you asign to adder the result of the anonymous function, that is, the inner function + scope(where total = 0).

Thats because you are calling the anonymous function with (0) at the end.

you need to see the function block like it is a named function, so it would be:

var adder = myfun(0);

var myfun = function(total){...}


Before statement is exacly the same as:

var adder = function(total){...}(0);

Thats what you are doing.

Answer 5

That is pretty simple: You assign two different things to adder in your examples.

In your first example you self-invoke the anonymous function (total) {...} , so you assign its return value to adder , which is inner_function .

In your second example you just assign the anonymous function to adder and never ask for its return value, so you don't assign inner_function anywhere and thus can't use it.