When the function sum is called, it returns a new function identified as f.

This newly created function f also returns itself when invoked.

The beauty of defining function f within function sum lies in its ability to have access to all variables in the scope chain at that moment. This includes the local variable sum for keeping track of running sums, and of course, function f itself. This concept is commonly referred to as "closure," encapsulating the functional code of f along with its scoped variables.

Since f returns itself, you can link multiple calls together like this:

var this_is_f = sum(1);
var same_f_again = this_is_f(2);
var f_a_third_time = same_f_again(3);

Alternatively:

sum(1)(2)(3);

It's worth noting that in the first scenario above, no new functions are created. Instead, we're just referencing the same function object with different identifiers.

Each call to sum results in a fresh instance of f, with a unique local sum within its scope (here referring to the initial local sum defined at the start of the function named sum). Yet, invoking the function sum does not overwrite any existing f instances, as each call generates a distinct f unaware of previous ones. This allows for multiple independent tallies simultaneously:

var first_tally = sum(1)(2);   // first: 3
var second_tally = sum(4)(5);  // second: 9
first_tally(3);   // first: 6
second_tally(6);  // second: 15

The reason behind seeing meaningful output at all times is due to how f is represented as the value of sum, rather than revealing its source code.

To simplify this code for better understanding, let's start by looking at a basic function called add that adds two numbers together:

function add(x,y) {
  return x + y;
}

This is a standard function, so if you don't provide both arguments when calling it, you might get unexpected results.

If you want to create a function that always adds 2 to a number, you can use partial application like this:

function add2(x) {
  return add(2, x);
}

However, in JavaScript, functions are first-class objects and can be passed around, allowing for more advanced techniques like currying. Currying involves breaking down a multi-argument function into a series of single-argument functions that build upon each other. For example:

function add(x) {
  return function(y) {
    return x + y;
  }
}

By currying the add function, you can then create an add2 function:

var add2 = add(2);
add2(1); //=> 3

The concept of "currying" allows for nested function calls, enabling computations with multiple arguments to be broken down step by step.

In JavaScript, "scope" defines variable visibility while "closure" refers to encapsulating code within a function. In the example above, the variable x is preserved via closure because it is referenced inside the inner function.

One limitation of currying is the fixed arity, meaning the number of arguments must be predetermined. This differs from scenarios where dynamic argument counts are required, such as your sum function needing to handle indefinite additions.

Another approach similar to currying involves using "generators" to perform lazy computations, exemplified by adding numbers sequentially on demand.

function sum(a) { 
  var total = a; 
  function f(b) {
    total += b; 
    return f;
  }
  f.toString = function() { return total };
  return f;
} 

An alternative way to structure your code could be returning an object for chaining operations, allowing sequential additions or retrieving the current total sum:

function add(a) {
  var total = a;
  return {
    plus: function(b) {
      total += b;
      return this;
    },
    sum: function() {
      return total;
    }
  }
}

add(1).plus(2).plus(3).sum(); //=> 6

In your original code, the returned function f acts as plus and toString emulates sum functionality for obtaining the accumulated value.

1. Explanation of the code snippet that defines and utilizes a closure function.
2. Initially, the function sum is defined globally.
3. Upon calling sum, the scope switches to inside the function where variables a, sum, and function f are declared within the function's scope - with sum hiding the function definition at the global level.
4. The return value of sum is a reference to the closure function f, which can only be accessed by name from within its enclosing function.
5. When invoking sum(1)(2), it essentially translates to f(2) due to the previous steps in the code execution.
6. In f(2), the variable sum is incremented by 2, resulting in its value being set to 3 within the function's scope.
7. f eventually returns itself, leading to the next step of the code execution.
8. Calling f(2) again returns f, now treated as an anonymous function since it cannot be referenced outside its defining scope.
9. Finally, utilizing alert() on f results in the value of sum (which is 3) being alerted, thanks to the custom toString method added to f.

Let's go through the function step by step:

function sum(a) {

First, we have a function named sum that takes an argument a.

    var total = a

Next, there is a local variable called total which is assigned the value of the input argument.

    function add(b) {
        total += b
        return add
    }

This part introduces an inner function named add that accepts an argument b. The value of b is added to the current value of total, and then the add function returns itself.

    add.toString = function() { return total }

Here, we change the behavior of the function when it is logged to the console. Instead of displaying the source code of the function, it now displays the current value of total.

Finally:

    return add

In summary, the sum function returns the add function, which keeps track of the running total. After calling sum(3), you interact with add by passing values to it.

When you call sum initially, you're essentially getting back this function:

function add(b) {
   total += b; //current total is 3
   return add;
}

In this context, the value of total is the initial value passed to sum. However, due to the overridden toString method, you only see the final result (3). Subsequently, if you do sum(3)(4), you will get a similar output.

By repeatedly calling add with arguments, you keep adding to the previous total maintained by the parent function sum, creating a cumulative effect.

Think of sum as a factory producing different instances of add, each with its own tally of numbers added:

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

firstSum(5); //similar to sum(4)(5), gives 9
secondSum(2); //similar to sum(2)(2), gives 4

Three concepts are at play here

• Closures (without scope).
• In JavaScript, functions are first-class objects which allows for chaining f(a)(b)(c). There's no need to save a reference to the function to call it later.

Let me break it down for you and provide additional explanations afterward

function sum(a) {
  // when sum is called, sumHolder is created
  var sumHolder = a;
  // the function f is created and holds sumHolder (a closure on the parent environment)
  function f(b) {
    // do the addition
    sumHolder += b;
    // return a FUNCTION
    return f;
  }
  // change the function's default toString method (another closure)
  f.toString = function() {return sumHolder;}
  // return a FUNCTION
  return f
}
/*
 * Explaining this step by step
 * 
 * You invoke sum with a parameter
 *  - the parameter is saved into sumHolder
 *  - a function is returned
 * 
 * You call the returned function f with another parameter
 * EXPLANATION: { sum(a) } returns f, so let's call f as this => {...}()
 *  - this private (privileged) function adds whatever it's been passed
 *  - returns itself for re-execution, like a chain
 * 
 * When it all ends {{{{}(a)}(b)}(c)}, the remainder is a FUNCTION OBJECT
 * This remainder is special in that its toString() method has been changed
 *  so we can attempt to cast (juggle) it to string for (loose) comparison
 * 
 */

The concept of closures is straightforward but their application can be mind-boggling until you become accustomed to the idea that there is no function scope in JavaScript, only closures which are powerful entities indeed

// This anonymous function has access to the global environment and window object
(function()
  {// start this context
    var manyVars, anotherFunc;
    function someFunc() {
      // has access to manyVars and anotherFunc
      // creates its own context
    };
    anotherFunc = function () {
      // has access to the same ENVIRONMENT
      // creates its own context
    };
  }// whatever is in these keys is a context that is not destroyed and
  // will exist within other functions declared inside
  // those functions have closure on their parent's environment
  // and each one generates a new context
)();

Functions are considered first-class objects. What does this mean? Let me explain with further examples:

// How about calling an anonymous function immediately after its creation
// *cannot do the next line due to a language constraint
// function(){}
// how about using a set of parens, this way the word "function" is not the first expression
(function(){})();
// the function was created, called, and forgotten
// but the closure inside MAY STILL EXIST
function whatDoIReturn() {
  return function (){alert('this is legal');return 'somevalue';}();// and executed
}// returns 'somevalue'

Don't just take my word for it. Look at other people's code, check out Crockford, and ask any questions that arise