3

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.


2

3 Answers 3

4

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.)

3
  • I've always been under the impression that functions which return other functions are called factories. Is this incorrect? Feb 14, 2016 at 7:05
  • 1
    @PatrickRoberts: "factories" is usually a general term for function which return objects, but which are not called with new, and hence are not constructors/constructor functions. They do a similar job to constructors, but are more flexible. Feb 14, 2016 at 16:46
  • @ScottSauyet thanks for clarifying. Now I know how to use the term properly! Feb 14, 2016 at 18:08
0

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.

0

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
1
  • "Partial application" is usually used to describe a function like function add(a, b) {return a + b;} with one of the values supplied, but a function still returned. This is slightly different. Feb 14, 2016 at 3:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.