How this function passes arguments to another inner function parameters

Question

When i check MDN to learn some points about closures, i faced the below function.

It can be a known pattern in javascript, but it's strange for java or .NET developer. I want to know how it works, i know about arguments and first class object behavior in javascript language but how add5(2) assigned 2 to y variable.

function makeAdder(x) {
    return function(y) {
        return x + y;
    };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

i think i got it, cause makeAdder(x) return function(y) so the value of add5 is the function(y) so when i do add5(2) i pass 2 to y — Marzouk, Oct 08 '15 at 23:04
read http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 too — Jaromanda X, Oct 08 '15 at 23:05

score 2 · Answer 1 · edited May 23 '17 at 10:33

First, any time there are named parameters - there is an implicit variable declaration. So forget the function above, just consider this

var example = function() {
  var x = 5;
  return function(y) {
    return x + y;
  }
}
var inner = example();
console.log(inner(5));
> '10'

Do you understand how the above works? if not I'd recommend looking into javascript closure and what it means.

Javascript Closures

In the above function makeAdder, the only difference is that we are passing the value of x. But x is still defined in the outer function, and the resulting returned function closes over its value

score 1 · Answer 2 · answered Oct 08 '15 at 23:05

1

makeAdder returns a function which can be seen like:

var x = 5;
function add5(y){
    return x + y;
}

answered Oct 08 '15 at 23:05

Jonathan

8,771
4
41
78

score 1 · Answer 3 · answered Oct 08 '15 at 23:06

makeAdder(5) called the function makeAdder, with x bound to 5. This function returns another function. Furthermore, since the value of x was provided, the anonymous function inside makeAdder knows the value of x. At this point in time, makeAdder will return:

function(y) {
   return 5 + y;
}

Therefore, by assigning this new function to add5, add5 is now a function, as well. If we call add5(2), it will use the above function, and perform the following:

function(2) {
  return 5 + 2;
}

Which will output 7.

How does this work?

The function defined in the closure 'remembers' the environment in which it was created.

ref

score 1 · Accepted Answer · answered Oct 08 '15 at 23:08

The function makeAdder returns a function, so the variables add5 and add10 are just references to functions. When you call those functions with a parameter vale, that ends up as the parameter y in the function.

You can do the same in C# for example, and the closure works the same:

public static Func<int, int> MakeAdder(int x) {
  return y => x + y;
}

Using it:

Func<int, int> add5 = MakeAdder(5);
Func<int, int> add10 = MakeAdder(10);

Console.WriteLine(add5(2));
Console.WeiteLine(add10(2));

I know there are also another nice answers, but this answer is awesome for me, it speak with me with the language i understand, thanks. — Marzouk, Oct 08 '15 at 23:39

How this function passes arguments to another inner function parameters

4 Answers4