How do I understand a function that returns a function?

Question

Here's the example code I'm struggling with:

function greaterThan(x) {
  return function(y) {
    return y > x;
  };
}

var greaterThanTen = greaterThan(10);
show(greaterThanTen(9));

Is there a way to put it in math terms or follow the flow or something? I don't know why 10 is x and 9 is y.

possible duplicate of [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Yuval Adam, Oct 08 '11 at 14:09
no, this is **not** _how do closures work_, this is about lambda calculus and currying. — Alnitak, Oct 08 '11 at 14:15

Gazler · Accepted Answer · 2011-10-08T14:16:46.407

4

In the line:

var greaterThanTen = greaterThan(10);

You are assinging the variable x to the value 10 and then you store the function in the greaterThanTen Variable to be called later. this means that:

greaterThanTen = function(y) {
    return y > 10;
};

So when you do:

greaterThanTen(9);  #y = 9

You are calling:

return 9 > 10;

edited Oct 08 '11 at 14:16

answered Oct 08 '11 at 14:10

Gazler

81,193
17
276
242

Are you sure it means `greaterThanTen = function(y)...` and not `greaterThanTen(10) = function(y)...`? – Wolfpack'08 Oct 08 '11 at 14:38
Ahah. Apparently you don't. Cool. – Wolfpack'08 Oct 08 '11 at 14:58
1

@Wolfpack'08 yes, he does. `var greaterThanTen` is assigned the (function) result of calling `greaterThan(10)`. – Alnitak Oct 08 '11 at 19:08

Alnitak · Answer 2 · 2011-10-08T19:09:10.537

4

This function doesn't call a function, it returns a function.

This code is creating a new unary function where the original binary (greater than) operator's right-hand operand is prebound to a specific value.

In lambda calculus this binding is known as currying.

In Javascript the binding happens because the supplied value of the parameter x in greaterThan is permanently retained in the scope of the inner function (or "closure") that is returned.

So, when you call:

var greaterThanTen = greaterThan(10);

what you now have is a new function (named greaterThanTen) which always compares its single parameter to the bound value of 10.

Hence:

greaterThanTen(9);

will return false.

edited Oct 08 '11 at 19:09

answered Oct 08 '11 at 14:11

Alnitak

325,660
70
395
481

That's cool. I have to read about currying to see how it works before I can talk with you about it, though. – Wolfpack'08 Oct 08 '11 at 14:41
Can anyone tell me what `→` means in `(X →Y) →Z`? – Wolfpack'08 Oct 08 '11 at 14:53
Interesting. Thanks for the edit. Nice resources. I don't see how 10 is being held, but it's interesting to know that it is.... Is it held just because of the environment? – Wolfpack'08 Oct 08 '11 at 14:59
1

+1, but maybe you should explain how js functions creates scope to help the OP understand why it works the way it does. a good link for reference is here: http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting – Martin Jespersen Oct 08 '11 at 15:30
@MartinJespersen I added some more text about scope – Alnitak Oct 08 '11 at 19:09

Rob W · Answer 3 · 2011-10-08T14:23:38.417

2

Create greaterThan(10)
Create function:
function(y){return y > x}
return function.

So, when you call greaterThan(10), the function returns a function whose local variable x is set to 10.

var greaterThanTen = greaterThan(10) equals:
var greaterThanTen = function(y){return y > 10};

To finish, greaterThanTen(9) is called, which equals 9 > 10, which is false.

edited Oct 08 '11 at 14:23

answered Oct 08 '11 at 14:13

Rob W

328,606
78
779
666

Thanks. The comparisons are OK, I accidentally swapped X and Y. – Rob W Oct 08 '11 at 14:23
yes, the wrong way around. And 9 is _not_ greater than 10 ;-) – Alnitak Oct 08 '11 at 14:24
and the answer should be false 8-) – abcde123483 Oct 08 '11 at 14:25
I like this explanation because it's easy to follow. I wonder if I'm missing something. Is it supposed to be so cut-and-dry? – Wolfpack'08 Oct 08 '11 at 14:57
There's no more magic behind it. All remarkable parts have already been captured in -hopefully- obvious phrases. – Rob W Oct 08 '11 at 15:11

abcde123483 · Answer 4 · 2011-10-08T15:15:20.373

2

The only thing that greaterThan does is to set a value for x in

function(y) {return (y>x);}

and store the resulting function in a variable name, in this case greaterThanTen, now with the contents

function(y) {return (y>10);}

Calling greaterThanTen(9) is the same as looking at

function(y = 9) {return (y>10);}

which is the same as

function(y = 9) {return (9>10);}

which is false. Hence false is returned.

Edit:

Example of function that returns a function here: http://i.imgur.com/aiHSH.jpg (x and y is switched around in y>x)

Namaste

edited Oct 08 '11 at 15:15

answered Oct 08 '11 at 14:14

abcde123483

3,799
4
38
40

What confuses me, though, is that 9 is held when 10 seems to be passed as a new value. – Wolfpack'08 Oct 08 '11 at 14:55
1

It's easier with pictures: If you are used to picturing functions as small flow-machines like me, just picture a small flow-machine returning another small flow-machine: http://i.imgur.com/aiHSH.jpg I switched around x and y in y>x but you get the idea hopefully :) – abcde123483 Oct 08 '11 at 15:13

score 0 · Answer 5 · answered Oct 08 '11 at 14:10

0

The greaterThanTen variable represents a function taking one argument and returning a boolean value whether this argument is greater then 10.

answered Oct 08 '11 at 14:10

Darin Dimitrov

994,864
265
3,241
2,902

How do I understand a function that returns a function?

5 Answers5