1

In the Eloquent Javascript book I came across this code. I understood how this works and the passing of arguments but what I am unable to understand is author's statement regarding this code that it's a function which can create another function!

My question is: How is it creating a new function? What is happening which the author is calling creation of a new function? I mean sure we are creating a function called greaterThan and it has another function in it but I can't see how greaterThan is creating another function!

I assure you I have read many similar Qs before asking but couldn't find the answer I am looking for. Thank you for your time & help.

function greaterThan(n) {
  return function(m) {
    return m > n;
  };
}
var greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
Toyi
  • 188
  • 8
  • 1
    In JS, functions are first class citizens. They behave just like any object. You can create them wherever you want, pass them as arguments, return them, etc. Not sure what exactly you don't understand. – Oriol Feb 20 '16 at 23:04
  • I understand that they can be created and passed as arguments, what I don't get it is how this function is creating another function! @Oriol – Toyi Feb 20 '16 at 23:05
  • @CEOUnderworld: Every function is an object in JS. Every function definition evaluates to such a function. Call `greaterThan(…)` twice and it will return two different functions. – Bergi Feb 20 '16 at 23:06
  • @CEOUnderworld You have a function expression in your code (see [Function Definition](http://www.ecma-international.org/ecma-262/5.1/#sec-13)). That creates a function according to [Creating Function Objects](http://www.ecma-international.org/ecma-262/5.1/#sec-13.2) – Oriol Feb 20 '16 at 23:09
  • @CEOUnderworld: Note that the function *returns* a function. It doesn't actually calculate anything, it returns something that calculates something. That function is then assigned to a variable (`greaterThan10`) which *itself* is invoked to perform the calculation. – David Feb 20 '16 at 23:10
  • Maybe have a look at http://helephant.com/2008/08/19/functions-are-first-class-objects-in-javascript/ or http://www.i-programmer.info/programming/theory/5933-what-exactly-is-a-first-class-function-and-why-you-should-care.html – Bergi Feb 20 '16 at 23:11
  • 3
    I don't understand this question, but it doesn't seem a duplicate of [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) for me. – Oriol Feb 20 '16 at 23:12

1 Answers1

1

The function is being created on the sixth line.

var greaterThan10 = greaterThan(10);

This creates a function greaterThan10 which can be used to check if numbers are greater than 10. You can see it used on line 7.

Edit: When the function greaterThan is called on line 6, it returns the nested function, effectively making

greaterThan10 = function(m){
    return m > 10;
};

The author was calling greaterThan10 a 'new function' created by the function greaterThan.

Marcel
  • 1,034
  • 1
  • 17
  • 35
  • 3
    One might argue that the function is created in line 2 (to 4). Sure, it's returned from `greaterThan()` and assigned to a variable in line 6, but that doesn't really matter. – Bergi Feb 20 '16 at 23:07
  • 1
    Fine. It is created on line 2 and assigned to a variable on line 6. I don't think this is an important distinction to CEO Underworld. – Marcel Feb 20 '16 at 23:11
  • Let me try to understand, function(m) is written in line 2 but on the time of writing it was not created, when the greaterThan function runs then only it creates function(m) and that means whenever a function is written 'in' a function the former can be called creating the latter! Pardon me if all that was wrong and please correct me. – Toyi Feb 20 '16 at 23:14
  • 1
    That is correct. When a function is written the way it is on line 2 (not assigned to a variable), it is called an anonymous function. On line 6, the `greaterThan` function is called. It returns our anonymous function, which remembers `n` passed to `greaterThan`. So `greaterThan10` is effectively equal to `function(m){ return m > 10; };` – Marcel Feb 20 '16 at 23:19
  • Thank you for the help @Marcel – Toyi Feb 20 '16 at 23:22
  • Anytime @CEOUnderworld – Marcel Feb 20 '16 at 23:25