How Does The Outer Function "store" The Arguments For The Inner Function?

I found this example in Mozilla developers page, but can't understand the concept. function outside(x) { function inside(y) { return x + y; } retu

Solution 1:

It seems like 3 is somewhat stored in the function 'inside' and during the second call adds it with 5 and returned 8.

Right. Each call to outside creates a new inside function, and that function has the data from the call to outside bound to it. It "closes over" that data. These are called "closures." Don't let the name bother you, closures are not complicated.

And how does the second call to outside (outside(3)(5)) returned value (8) instead of the inner function (inside) unlike the first call?

The second call to outside does return a function (the inside function generated by that call); but then you're calling that function immediately with the second pair of ().

The line

outside(3)(5);

...breaks down like this:

var f = outside(3); // Create and get the `inside` function bound to 3
f(5);               // Call it, passing in `5`

---

From your comment:

So what you mean is, in the first call of outside(3), the 'returned' inside method definition becomes(is changed to?) return 3 + y;. is that right?

Close, but not quite. The value of x isn't burned into inside; inside has a reference to the context in which it was created, and that context gives it access to the x argument. Those aren't quite the same thing, as we can see if we update the example a bit (and ditch the math, which just obscures things):

function outside(name) {
    // 'inside' uses the 'name' argument from the call to 'outside' that created it
    function inside() {
        return name;
    }

    // 'changer' *changes* the 'name' argument's value
    function makeCaps() {
        name = name.toUpperCase();
    }

    // Return both of them
    return {
        inside: inside,
        makeCaps: makeCaps
    };
}

var funcs = outside("foo");
funcs.inside();      // "foo", because 'inside' uses the 'name' created
                     // by the call to 'outside', and that 'name' is
                     // currently "foo"
funcs.makeCaps();    // Changes that same 'name'
funcs.inside();      // "FOO", because that 'name' has been changed

It's key to understand that both inside and changer close over the same context, which is the context of the call to outside that created them.

It's also key to understand that a new context and new functions are created by every call to outside:

var funcs1 = outside("foo");
var funcs2 = outside("separate");
funcs1.inside();     // "foo"
funcs2.inside();     // "separate"
funcs1.makeCaps();
funcs1.inside();     // "FOO"
funcs2.inside();     // "separate"

Solution 2:

Your variable 'X' is in outside function's scope as well as your inside function. So when you call outside func it creates new function inside and as well stores your variable X, then , when the call to inside function is executed you already have X and just get the Y from it's args.