CODEWITHSUNDEEP
javascriptclosures
zonyang
zonyang

Reputation: 878

Javascript, the call to a nested function

I'm just come to javascript. I come across a code like this.

function makeAdder(a) {
   return function(b) {
       return a + b;
   };
}
x = makeAdder(5);

Here the value of x(6) is 11. It seems x here is in a "uncomplete" state, waiting another argument to be finished? I don't know how this works. Can somebody explain to me? any reference would be appreciated.

Upvotes: 3

Views: 695

Answers (3)

Scott Sauyet
Scott Sauyet

Reputation: 50787

This is a common technique in certain functional programming languages.

It's straightforward to do in Javascript, since functions are first-class values, and we can supply them as parameters to other functions, store them as properties of an object or as variables, or, as in this case, return them from other functions.

This is called a higher order function, since it either accepts a function parameter or returns a function result.

Values in Javascript have either global or function scope. The parameter a is available in the scope of the outer function, and since the inner function was created in that scope, it has access to the variable a. This is called a closure.

A number of libraries offer a curry function that wraps up a plain function such as 

function f(a, b) {
  return a + b;
}

by using instead:

var g = curry(function f(a, b) {
  return a + b;
});

so that now you can call it either as

g(6, 36); //=> 42

or as

var add6 = g(6);
add6(10);  //=> 16;

But if you always want to do this in two steps, you can define it the way your makeAdder does.

If you're interested in this style of programming, there are a number of libraries that try to help with it. My personal favorite is Ramda (disclaimer: I'm a core contributor to Ramda.)

Upvotes: 4

Brady Cartmell
Brady Cartmell

Reputation: 607

It's a pattern call partial application. It allows a to be cached before b is known it allows allows a to be shared across multiple invocations:

x = makeAdder(5);

a = x(6);  // 11
b = x(7);  // 12
c = x(8);  // 13

Upvotes: 0

millerbr
millerbr

Reputation: 2961

Ok, here's my interpretation. So your function makeAdder() returns another function, which will add the parameter a to b. When you run makeAdder(5), you are getting back a function with the parameter a set to 5.

Now you have a function that adds a parameter to 5. When you call x(6), you are getting back 5 + 6.

It's a bit difficult to get your head around the whole thing, and I had to step through it for a few minutes to understand it myself. here's a step by step:

function makeAdder(a) {

Here, we've initialised makeAdder() as a function that takes a single parameter, a

   return function(b) {

Our function will return a new function that takes a single parameter, b

       return a + b;

This new function returns a plus b - a is set to whatever we passed in to the first function and doesn't change

x = makeAdder(5);

Now we run the original function, passing in 5. 5 will trickle down into the new function (remember it won't change) and what we get back is the new function that adds that 5 to a parameter. x is now storing that new function.

x(6);

This is us running the new function stored in x - and we're passing in 6. The new function will add 6 to the 5 we passed in earlier, and we get back 11.

Upvotes: 0

Related Questions