Javacript closure concept question?

by semmyz
3 replies
I'm learning javascript atm and can't wrap my head around this.

Please help me understand this code.

// the answer is 40.
// Question: What is the value of result.


var hidden = mystery(4);
var result = hidden(2);

function mystery ( input ){
var secret = 5;
function mystery2 ( multiplier ) {
multiplier *= input; // 4 * 2
return secret * multiplier; // 5 * 8 = 40
}
return mystery2;
}

So pretty much I'm trying to understand the concept. Is my math in comments correct? I am having trouble understanding how 2 inside hidden(2) and 4 in mystery(4) became multiplier and secret. This part is so mind numbing please someone explain this to me step by step. Thank you so much!
#closure #concept #javacript #question
  • Profile picture of the author David B
    I can try to walk you through this:

    1) var hidden = mystery(4);
    this line executes the function mystery() with the value 4.
    (note mystery is going to return a function as a result not a value.)

    2)function mystery ( input ){
    var secret = 5;


    mystery() is a function that takes a parameter input and first creates a local variable secret with the value 5

    3) function mystery2 ( multiplier ) {
    multiplier *= input; // 4 * 2

    mystery() now defines a new function mystery2() which takes a single parameter multiplier, then (and this may be part of your confusion) it updates this value by multiplying it by the value originally given to input which was a local variable to mystery but is now part of the function mystery2(). So whatever you pass into the original mystery() function is going to be used as a multiplier of whatever future value is passed into mystery2().

    4) return secret * multiplier; // 5 * 8 = 40
    Now mystery2() returns the value of secret multiplied by the calculated multiplier it has access to secret since the variable is in scope (I think this is what you are referring to called closure in Javascript) and can retain access to this value for future reference. It is now essentially a local variable in the new function being created mystery2()

    5) return mystery2;
    In turn mystery() returns mystery2() as a response.

    So in a nutshell what is returned by the call to mystery(4) is actually a new 'dynamic' function mystery2() that in memory really looks like:
    function mystery2 ( multiplier ) {
    secret = 5;
    multiplier *= 4;
    return secret * multiplier;
    }


    if you called mystery() with a different value say mystery(11) then you would get a new 'dynamic' function returned:
    function mystery2 ( multiplier ) {
    secret = 5;
    multiplier *= 11;
    return secret * multiplier;
    }


    So in essence you are creating a new function with each call to mystery() which can keep access to local variables like the variable secret.

    Hmm rather longwinded, does that answer your question?
    {{ DiscussionBoard.errors[9050282].message }}
  • Profile picture of the author semmyz
    Thank you so much David! It's people like you that make the internet great!

    It was really confusing me until you elegantly unclogged the points where I was most confused.

    I must say I am starting to develop a new appreciation for programming and computers in general.

    I am following an online course right now and this will help me move forward!

    Thanks again!
    {{ DiscussionBoard.errors[9051026].message }}
  • Profile picture of the author kdavies
    Closures is one of the most powerful concepts you can learn. I use them in javascript all the time and jquery uses them extensively.
    {{ DiscussionBoard.errors[9051199].message }}

Trending Topics