CODEWITHSUNDEEP
javascriptclosures
Joe Consterdine
Joe Consterdine

Reputation: 1053

Basic Closure Example Confusion

I'm following a tutorial by Tyler McGinnis on execution contexts, call stacks and closures.

https://www.youtube.com/watch?v=Nt-qa_LlUH0&feature=emb_title

I'm a bit confused with the closure example. I understand a closure is when a function is inside another function. I also understand that the inner function has access to the parent functions arguments (As explained in the video).

My confusion is in the code below is when makeAdder(5) is invoked is the inner function not invoked aswell on the first invokation? Tyler appears to suggest makeAdder is popped off the call stack when first invoked just leaving the inner function untouched.

The second part I don't understand when we call add5(2) this is invoking makeAdder(5) no? How do we add 2 arguments when the parent function only accepts one?

If someone could walk it through step by step of how it's all invoked that would be great!

var count = 0;
    
    function makeAdder(x) {
        return function inner(y) {
            return x + y;
        }
    }
    
    var add5 = makeAdder(5);
    console.log(add5); // what the call to makeAdder returns
    count += add5(2);
    console.log(count);

Upvotes: 0

Views: 46

Answers (2)

trincot
trincot

Reputation: 349999

when makeAdder(5) is invoked, is the inner function not invoked as well on the first invocation?

No, it isn't. Only makeAdder is invoked at that time, and makeAdder is not making any calls itself. It merely returns an object, and that object happens to be a function. And returning a function is done without actually invoking it.

when we call add5(2) this is invoking makeAdder(5) no?

It is not invoking makeAdder(5). Earlier on add5 was the result of calling makeAdder(5), and so add5 is that inner function. The special thing happening here is that when you call add5, an "execution context" is restored, which represents the state of affairs inside makeAdder at the moment it returned the function. This practically means that when add5 (the inner function) references the x variable, it will find the value in x it had at the moment makeAdder had been called earlier on.

How do we add 2 arguments when the parent function only accepts one?

Indeed, when we call the parent function, the second argument is not known yet, and we don't need to know it at that moment, since the inner function is not yet executed at that moment. The important thing with the call of the parent function, is that we establish the value of x, which will "live on", even though it can only be accessed by calling the inner function.

And when we call the inner function, we provide the second argument that is needed. The inner function can then combine the "magical" reference it has to the x value (provided when we made the parent call), with the normal argument it receives itself.

Upvotes: 2

Dan Hunex
Dan Hunex

Reputation: 5318

A simple way to look at this is as a function that returns a function--which can be called like a normal function because it is. So the first call of the function return type is a function.

Look the following example

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

function subtract(x,y) {
 return x-y;
}

function calculator(type){
   if(type ==='add'){
     return add ; //here we are returning a function - the above add function
   }
   if (type==='subtract')
   {
    return subtract; // we are returning a function - the above subtract function
   }

   return null;
}

var fn = calculator('add'); // this call will return the function add which can be called as in below    

var result = fn(4,5);

console.log(result) ; ///should print 9

Likewise the first call

var add5 = makeAdder(5);

returns a function which is exactly 

 function inner(y) { return x+5);

Then you can call add5(2) which essentially execute the above function.

Upvotes: 0

Related Questions