understanding anonymous function works in javascript code

Question

I am a bit perplexed when i saw a piece of code and trying to understand why calling it anonymous keeps the value of total and not otherwise.

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) // <- we call the annonymous function 
//    and assign the returned function to adder
adder(2); // -> 2
adder(3); // -> 5

What I don't understand is if i don't invoke anonymous function, it doesn't keep the value of total. why? without (0) if i am calling adder(2) shouldn't it behave like the first call where it keeps the value of total and then assign internal_function to variable adder?

It says in the blog that "And when you call adder, that is the inner_function, it has access to total due to Lexical Scoping, even though the function that had the total. total itself was declared in the scope of a function that has returned a long time ago." http://pierrespring.com/2010/05/11/function-scope-and-lexical-scoping/

just trying to understand how anonymous works in this case

The value of total isn't kept because if you don't invoke the anonymous function no value is set...total in that case would be undefined. — Daniel Tate, Jun 02 '18 at 08:21
@Andreas I don't think this is a duplicate but the info there will help answer the question. — Daniel Tate, Jun 02 '18 at 08:23
what i am trying to understand when i don't call anonymous function and instead call adder(2), won't it be passed as total? — Waqas, Jun 02 '18 at 08:26
The function that takes `total` is called with the `(0)`, not the `inner_function`. Both are not completely anonymous by the way (which can e.g. be seen by `let x = () => 0, y = x; console.log(y.name);`) but that's a technical detail i suppose. And i also think this is a duplicate, this topic is confusing, yes, but has been asked very very often already. — ASDFGerte, Jun 02 '18 at 08:29

score 1 · Answer 1 · answered Jun 02 '18 at 08:23

If you don't invoke the function, there is no total yet. Your adder would refer to the outer function. adder(2) would bind total to 2 and return the inner function (which you ignore). adder(3) would bind total to 3 and return another inner function (which you also ignore).

Specifically:

var adder = function (total) {
    var inner_function = function (summand) {
        total += summand;
        alert(total);
    }

    return inner_function;    
};

is like

function adder(total) {
    var inner_function = function (summand) {
        total += summand;
        alert(total);
    }

    return inner_function;
}

Then

adder(2)  // returns `inner_function`

has no visible effect if you don't save its return value and invoke that.

It would be more appropriate to call it `makeAdder` then – Bergi Jun 02 '18 at 09:07 — Bergi, Jun 02 '18 at 09:07

score 1 · Answer 2 · answered Jun 02 '18 at 08:23

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) // <- we call the annonymous function 
//    and assign the returned function to adder
adder(2); // -> 2
adder(3); // -> 5

When you call the function (0) at the end of the line, you are actually running the outer function (the one that accepts total) and it returns the inner_function. So after the call adder contains the inner_function. Now, when you ommit calling the function, the adder is actually the outer_function, so calling it like adder(2) returns not the value, but rather the inner_function. Simple example:

var adder = function (total) {
// the following function is returned 
// and assigned to adder

    var inner_function = function (summand) {
        total += summand;
        console.log(total);
    }

    return inner_function;

}
adder(5)(2); // -> 7

when we call the anonymous, how is it able to keep the value total and adder(2) and adder(3) are adding up? but if i don't i have to call the external and internal function to add the values? — Waqas, Jun 02 '18 at 08:40
Check out the link from the comment of Andreas (about duplicate question) answers exactly your questions. :) — vicbyte, Jun 02 '18 at 08:41

understanding anonymous function works in javascript code

2 Answers2