Javascript function in Eloquent Javascript

Question

How does greaterThanTen(9) become the y variable in the return function? What I mean is how does the parameter (9) become the y in the return function argument? Wouldn't 9 be replaced with x since greaterThanTen = greaterThan(10)? Wouldn't the 9 just replace the x = 10 parameter? I just don't understand how that 9 parameter is getting to y in the return function.

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

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

This is a great example, I now have a deeper understanding of closures. — Vodka_Tonic
– Vodka_Tonic, Commented Jan 3, 2014 at 7:52

Shazvan Hanif · Accepted Answer · 2018-06-12 10:11:24Z

4

It doesn't "become the y variable". The function greaterThan returns a function, and the value passed to greaterThan is "captured" in that returned function.

In other words, greaterThan(10) creates the following function:

function(y) { return y > 10; }

It's similar to writing:

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

Functions that create functions take advantage of closures ("the thing that 'captures' the 10).

The advantage is that you don't need to keep writing greaterThanNnn functions for every number you want to use, you just call greaterThan(n) for whatever you need. This is a contrived, but popular, example, of course.

For chunks of info relating to referencing functions, when to use () and when not to, and some more realistic examples, see also:

edited Jun 12, 2018 at 10:11

Shazvan Hanif

3713 silver badges20 bronze badges

answered Jan 3, 2014 at 3:06

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vodka_Tonic Over a year ago

Ok, your answer is really helping me understand this now. I think my problem is I'm not understanding what was happening in that return function.

Dave Newton Over a year ago

@Vodka_Tonic It was returning ;) In JS, functions themselves can be values, like 42 or "ohai". This is nice.

Haider · Accepted Answer · 2014-01-03 03:09:20Z

0

when you called greaterThan(10) it assigned value of x and return the function in greaterThanTen variable which now becomes

var greaterThanTen = function(x){10>x};

then in next line you called greaterThanTen(9) so it will assign the x value. i hope you understood what i said.

edited Jan 3, 2014 at 3:09

answered Jan 3, 2014 at 3:08

Haider

6151 gold badge16 silver badges42 bronze badges

Comments

Brian Tompsett - 汤莱恩 · Accepted Answer · 2018-10-27 15:50:44Z

0

You must have to know the basis about the closures concept in JavaScript. Closures are the most tricky and special addition to the JavaScript language. As you will notice they follow the lexical scope of the language flow. Here in this example;

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

 var greaterThanTen = greaterThan(10);
 console.log(greaterThanTen(9));

If you see there is the main concept of closures. Once you call the function greaterThan it creates another function. But as you pass the first argument 10, it takes the place of x. Further when you call the function and pass the second argument 9 it takes place on y the function built inside. In this way the values are stored in the function call stack and you can compare and operate on those values.

edited Oct 27, 2018 at 15:50

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Oct 27, 2018 at 15:20

Ghulam Murtaza

1

Collectives™ on Stack Overflow

Javascript function in Eloquent Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related