Please explain this Javascript closure exercise

Question

I'm a javascript noob trying to wrap my head around the closure exercise below.

Now, I know the result is 122. Can anyone walk me through this step by step (what gets passed to what), so I can understand how closures work?

var hidden = mystery(3);
var jumble = mystery3(hidden);
var result = jumble(2);

function mystery ( input ){
  var secret = 4;
  input+=2;
  function mystery2 ( multiplier ) { 
    multiplier *= input;
    return secret * multiplier;
  }
  return mystery2;
}
function mystery3 ( param ){
  function mystery4 ( bonus ){
    return param(6) + bonus;
  }
  return mystery4;
}

You'd do yourself a favor by trying to go step-by-step through it *yourself*. If you get stuck on how a particular part of the process works, then *that* would be a good question. — Pointy, Dec 07 '13 at 20:03

php_nub_qq · Accepted Answer · 2013-12-07T20:34:51.010

In order to understand this you must know what is the difference between a function call and a reference to a function. As well as how scopes work in javascript.

Assuming you do know these things, let's get explaining.

So you first have a variable hidden that is being assigned a value of mystery(3). So immediately look at the function mystery and see what it returns. it returns a reference to an inner function mystery2. So now hidden holds a reference, meaning that it has no actual numeric value. Following you have a second variable declaration var jumble = mystery3(hidden);. Now in order to know what jumble holds you need to look at the function mystery3 and the value it returns. It, again, returns a reference to an inner function mystery4. So now the two variables you have contain references to inner functions of the closures mystery and mystery3.

Now let's have a look at var result = jumble(2). Executing jumble(2) is an actual function call to the function that jumble holds a reference to, which is mystery4. When mystery4 runs you see it requires a parameter bonus, which will be 2 given from the line var result = jumble(2). It returns param(6) + bonus. bonus is 2, ok, but what is param(6)? That is the value given to jumble: hidden, which was a reference to mystery2, remember? So running param(6) will execute mystery2 with a parameter 6

And so, tracing back the functions may have turned out a little confusing, but let's follow that with actual values to make it a little clearer ( if that's even a word ).

Executing var result = jumble(2) will give us a return value of param(6) + 2 to get param(6) we go into mystery2 with multiplier = 6, where we set multiplier = 6 * input. Our input is equal to 3+2=5, so multiplier becomes 6*5=30 and as a return value we multiply that by 4 which is our var secret. By the end of the execution of mystery2 we have a value of 120, which is returned to our param(6) in mystery4. And if you remember that our bonus was 2, 120+2=122 Voila!

I get the feeling I didn't do a very good job at explaining this simply, but that's probably the best I could do. Hope that helped!

Please explain this Javascript closure exercise

1 Answers1

Linked