What is the reason for the ratio of the function to a variable?

Question

this not work

 function myCounter(){ let counter = 0; function plus(){ counter++; return counter; } return plus; } console.log(myCounter()); console.log(myCounter());

but this work

 function myCounter(){ let counter = 0; function plus(){ counter++; return counter; } return plus; } var add = myCounter(); console.log(add());

I know they are different in the syntax. My main question is: Why function alone on the console.log does not work and should be attributed to a variable

Answer 1

Your function myCounter only returns a function reference. It does not call the function plus .

In your first example you only call the function myCounter :

console.log(myCounter());

In your second example you first call the function myCounter that returns a function reference:

var add = myCounter();

and then you call the returned function:

console.log(add());

Solution:

You have to change this line

return plus;

to

return plus();

This works:

 function myCounter(){ let counter = 0; function plus(){ counter++; return counter; } return plus(); } console.log(myCounter());

Answer 2

In the second example this line: var add = myCounter(); makes the add var to be only a reference to a function, if you will console log the add var without the brackets, it will print only [Function] , but the console.log(add()); makes the add function to be invoked.

In order to make the first example to work, you can change the return statement of the myCounter counter function.

This code make the myCounter to return only the plus function reference:

function myCounter(){
    function plus(){
        //code
    }
    return  plus;
}

So in order to make it work you should invoke the myCounter twice:

console.log(myCounter()());

But this make the plus function to be invoked when the myCounter is invoked (called) from inside the console.log(myCounter()) :

function myCounter(){
    function plus(){
        //code
    }
    return plus();
}

Answer 3

You are missing the closure concept. Calling a myCounter function will return you another function and it will initialize "private" variable counter inside, so myCounter() -> function .

Of course you can call this way myCounter()() , but in this case the "private" counter variable will be initialized every call with value 0, and won't be useful.

The solution is to store result of myCounter() in variable and call it later, so you will have expected behaviour.

 function myCounter(){ let counter = 0; function plus(){ counter++; return counter; } return plus; } console.log(myCounter()()); console.log(myCounter()()); console.log(myCounter()()); console.log('====') var add = myCounter(); console.log(add()); console.log(add()); console.log(add());