scope calling functions inside functions

Question

Hope somebody finds the time to explain little about functions in functions and scoping. I am trying to understand little more on functions and scope of variables and found a qu

Answer 1

Let's step through the function line by line:

function sum(a) {

This part is pretty self-explanatory; we have a function named sum which accepts an argument a.

    var sum = a

Here we have a local variable called sum that is set to the value of the argument that is passed in.

    function f(b) {
        sum += b
        return f
    }

This is an inner function called f that accepts an argument called b. This b is then added to the value of sum from the outer scope (i.e., inside the scope of the function that is also called sum). After that, the function returns itself.

    f.toString = function() { return sum }

This is the fun part! When you normally console.log a function, it will just spit out the function's source. Here we are redefining the toString method to instead be a function that spits out the value of sum. This is why you end up seeing the running total that is displayed instead of the function's source even though what you are returning is still a function.

Finally we have:

    return f

So you basically have a function sum, returning a function that returns itself. The function sum basically sets everything up, but after calling sum(3), you then work with f, which you repeatedly call.

So the first time you call sum, you essentially get back this function:

function f(b) {
   sum += b; //value of sum is 3
   return f;
}

In this context, the value of sum will be the value of a that you passed into the initial call of the function sum. However, since the toString of f has been redefined, you only see the value 3. Then let's say you do sum(3)(4).

You get back, as before:

function f(b) {
   sum += b; //value of sum is 3
   return f;
}

But then you are actually calling f with an argument of 4 (basically f(4)). Since f is an inner function, it has full access to the scope of its parent function. This parent function (sum) is maintaining the the running total in a variable called sum, which is accessible to f. So when you now call f(4), you have b set to 4 and sum having a value of 3:

function f(b) { //b is 4
   sum += b; //value of sum is 3 + 4, which is 7
   return f;
}

So with each subsequent pair parentheses you are making repeated calls to the same f which is maintaining a running tally.

Another way is to think of sum as a kind of factory that can give you different f's, all of which keep their own running tallies (basically behaving like accumulators):

var firstSum = sum(4);
var secondSum = sum(2);

firstSum(5); //equivalent to sum(4)(5) returns 9
secondSum(2); //equivalent to sum(2)(2) returns 4