Incrementing and storing a "private" variable using closures

Question

I am fascinated with the concept of storing and reusing a local variable even after the function executes and exits, and that this is achieved by mere architecture of code (scoping).

I am playing around with this and have an exercise where a variable (var e) should be incremented and reused next time. It increments in the end, however, it is not saved and turns back to 10.

var sumFunc = function(a,b){
var c = a+b;
var e = 10;
function subFunction(){
     var d = c + e;
     e++;
     return d;           
}
return subFunction();
};

var result = sumFunc(2,3);
console.log(result); //15 
console.log(result); //15 instead of 16
console.log(result); //15 instead of 17
console.log(result); //15 instead of 18

What exactly is happening every time this construction is called, can we go step-by-step and follow the flow?

Below are some of my thoughts & assumptions, let me know if those are mistaken:

1. I referenced the function through a variable, to exclude the chances of this variable to be garbaged. I am scared by the garbage collector, I guess this is what they tell naughty programmers about before bedtime.

2. However, the behavior does not seem to change if I instead simply run console.log(sumFunc(2,3));

3. I return subFunction in the end on purpose, as I am in the beginning of the research and want to keep things as simple as I can. I realise that I probably could return an anonymous function instead (return function()) which then would return d, but I avoid this at this point in time. As I see it this code does absolutely the same thing, but I feel that it is more clear to me and I have better control over it.

4. I came across that self-invoking functions might help but I do not want to use one here (let's say this is not part of my design to immediately change the counter).

Answer 1

3.I return subFunction in the end on purpose. You return subFunction result. To return function you only need to return subFunction; without brackets.

After thant, you need to call it, so console.log(result());

Version with function call

var sumFunc = function(a,b){
var c = a+b;
var e = 10;
function subFunction(){
     var d = c + e;
     e++;
     return d;           
}
return subFunction();//function call
};

var result = sumFunc(2,3);//call sumFunc and imidiately call subFunction
//result contains 15, not pointer to function
console.log(result); //15 
console.log(result); //15 instead of 16
console.log(result); //15 instead of 17
console.log(result); //15 instead of 18

version with function pointer

var sumFunc = function(a,b){
var c = a+b;
var e = 10;
function subFunction(){
     var d = c + e;
     e++;
     return d;           
}
return subFunction;//return function pointer
};

var result = sumFunc(2,3);//call sumFunc and return pointer to subFunction
//result contains pointer to function
console.log(result()); //15 call function in result 
console.log(result()); //16
console.log(result()); //17
console.log(result()); //18

Answer 2

Problem is that you are calling return subFunction(); which basically returns a value.So irrespective of number of times you log result it will be same, instead of that you can do this.

var sumFunc = function(a,b){
var c = a+b;
var e = 10;
function subFunction(){
     var d = c + e;
     e++;
     return d;           
}
return subFunction;
};

var result = sumFunc(2,3);
console.log(result()); //15 
console.log(result()); //16
console.log(result()); //17
console.log(result()); //18