Do not understand the behavior of the function with / without closures in console.log

advertisements

I am very new to JS.

I ran into something strange, while learning about console.log behavior. Console is very important for me, because I believe that if console.log does not see it, then it is not there. I will start with simple things, just to make sure I do not miss anything.

  1. Assumption: console.log can print results of simple calculations.

    console.log(1+0); //1. Console.log can calculate!
    
    
  2. Assumption: console.log can print results of functions, if those return values.

    var test = function(a,b){
        var c = a+b;
        return c;
    };
    
    console.log(test); //prints the assigned value of the variable "test", which happens to be a function and thus function code is printed. Function is NOT called here.
    
    console.log(test()); //prints NaN, since the function is called but no arguments are provided. Thus, JS is unable to calculate the result.
    
    console.log(test(1,1)); // this one prints the result of the function, which is variable "c"
    
    console.log(test(1,1) + 2); //I can then manipulate results further in the console.
    
    
  3. Assumption: with closures there is a problem?

    var testClosure = function(a,b){
        var c = a+b;
        return function(){
            var d = c + 1;
            return d;
         }
     };
    
    console.log(testClosure); //so far standard behavior - console prints the assigned value of a function - its code.
    
    console.log(testClosure()); //trying to call the function here without arguments. Expected result that it will attempt to calculate "d" and return NaN (since it cannot calculate), but it returns the code for the anonymous function. JS does not attempt to do calculation.
    
    console.log(testClosure(1,2)); //does not produce the expected result of 4. It produces same output as in the previous case. JS does not attempt to do calculation for some reason.
    
    var result = testClosure(1,2);// Do I understand it correctly that at this point I only create a reference but testClosure() function is not actually launched? Therefore, variable "result" does not have any meaningful value yet?
    
    console.log(result); //printing the assigned value of this variable, which is the code for the anonimous function in testClosure().
    
    console.log(result()); // here I am actually calling the testClosure() function by proxy and get the desired result of 4.
    
    

My main questions are

  1. Why does

    console.log(test(1,1));
    
    

    work and console.log(testClosure(1,2)); does not?

  2. Why does console.log(testClosure(1,2)); does not work but

    var result = testClosure(1,2);
    console.log(result());
    
    

does work.

I seem to be doing essentually the same thing: calculate given the provided argument and print the result.

Where is the key difference I am missing, since I obviously do?


test is a function, which returns a value, but testClosure is a function which returns a function which returns a value. Function in JS is a first class object, which means that it also can be used as an argument, assigned to a variable or returned from a function (that's what you do in your closure example, you return a function, not the value). But to get a value of this returned function you have to call it too, it does not call itself.

console.log( typeof test(1,2) ); // number

console.log( typeof testClosure(1,2) ); // function, which also needs to be called

console.log( typeof testClosure(1,2)() ); // number
// ---------------------------------^-----// call the returned function