Eloquent JavaScript, 2nd Edition, Chapter 5 Higher-Order Functions

Question

I\'m very new to JavaScript, and I was hoping to get some help with Chapter 5 in the 2nd Ed. of Eloquent JavaScript. Specifically, I ran into the example below:

Answer 1

Code in question:

function noisy(f) {
  return function(arg) {
    console.log("calling with", arg);
    var val = f(arg);
    console.log("called with", arg, "- got", val);
    return val;
  };
}
noisy(Boolean)(0);
// → calling with 0
// → called with 0 - got false

What happens (kind of like a "magic schoolbus" journey through JavaScript):

1. Nothing is actually executed until the line of code noisy(Boolean)(0);
2. When this line is reached, first the noisy function is called with the JavaScript built-in function Boolean as its argument f.
3. An anonymous function is returned:
   • when run, the anonymous function receives a new argument called arg.
   • then the anonymous function will log the string "calling with" followed by the arg.
   • then the anonymous function will call the function f (which has been memoized within the anonymous function by closure) and store the return value in the variable val.
   • then the anonymous function will log the string "called with" followed by arg, followed by the string "- got", followed by val.
   • finally, the anonymous function will also return the value in the variable val.
4. The return value of noisy(Boolean) is the anonymous function as described above, with Boolean playing the role of f within this anonymous function that was just generated.
5. The remaining (0) is now used to call this newly generated anonymous function with an argument arg of 0.
6. The five sub-steps described in 3. above are followed, resulting in:
   • no visible output, but arg takes on a value of 0 as the initial step of the anonymous function's invocation.
   • the anonymous function logs the string "calling with 0"
   • the Boolean function is run with an argument of 0, which returns false, which is stored into val.
   • the anonymous function logs the string "called with 0 - got false"
   • the anonymous function returns false (but this value is not used or stored in any way by the example code).

Now let's go through the actual lines of code and match them with the above steps:

1. This code begins to be executed: noisy(Boolean)

2. The following code within noisy is executed, with argument Boolean being passed into noisy and stored into the variable f:

   return function(arg) {
       console.log("calling with", arg);
       var val = f(arg);
       console.log("called with", arg, "- got", val);
       return val;
     };
   

3. The noisy(Boolean) part of this code noisy(Boolean)(0); has now been replaced with the return value shown in step 2.
4. So now the line noisy(Boolean)(0) has in effect become [[anonymous function]](0).
5. This replacement "code" [[anonymous function]](0) is now executed.

6. As a result, the following lines of code are executed:

       console.log("calling with", 0); // because 0 was passed in for arg
   
       var val = Boolean(0);           // because Boolean is stored in f
   
       console.log("called with", 0, "- got", false);
                                       // because the Boolean value of 0 is false