Basic Javascript: Functions that Return Functions

Question

This is a very basic javascript question:

after defining a function:

function a(){
    alert("A!");
    return function(){
        alert("B!")
    };
}

If i call the function:

a();

Only "A!" is alert; But if i recreate a new function:

var newFunc = a();
newFunc();

Both "A!" and "B!" are alerted.

Can someone explain why? Millions THX!!

This is extracted from p78, Object-Oriented JavaScript, Stoyan Stefanov, PACKT PUBLISHING

Answer 1

Calling the following will execute both alerts:

a()();

http://jsfiddle.net/pKLNW/

---

Your function, a, is being executed, and returning a function. But you are not executing that returned function.

In your second example, that's exactly what you are doing, but spread across two lines (hence why you have two () in your code).

Answer 2

It's quite simple:

function a()
{
    alert("A!");
    return function()
    {
        alert("B!");
    };
}
a();

In this case, you invoke a, and its function body alerts A!, and then returns a function. The return value (the function that alserts B) is simply ignored.

When you write

var newF = a();
newF();

The returned function is assigned to newF, if you invoke that function, then, via this variable, you can alert B. To do it all in one go, you could easily write:

(a())();

Answer 3

The return value is just that -- a return value. It is not executed.

Try this for fun:

a = a();
a();

Answer 4

In the first call a(); you are calling the function and it returns another function. But you do not call it.
In the second example, you call the function and store the return-value (the function it returns) in a variable, then call that, which will call the function that was returned.

function a() {
  alert("A!"); //This will be called when the function a is called.
  //After the alert another function is returned:
  return function(){
    //and if this function is called, it will:
    alert("B!");
  }
}

a(); //Calls a, but do nothing with return value.  

a()(); //Calls a and directly calls the return value after.  

var b = a(); //Calls a and stores return value in variable 'b'
b(); //calls 'b', which is the return value of 'a'.

Answer 5

It should be fairly obvious.

The return value of the function is not executed, but rather returned. Anything before the return statement will of course be executed.

So essentially, the code: var newFunc = a(); assigns the return value of the function a() (in this case an anonymous function) to newFunc. Thus, calling newFunc() will execute the returned anonymous function.

You can force the returned function to run at assignment time using var newFunc = a()();, which assigns the return value of the anonymous function to newFunc (in this case null, and the alert running).

Answer 6

Your first example, a(), executes the a function, which executes an alert function and returns the function b (but does not execute it).

The second example, var newFunc = a(), executes a, and saves it's value to the variable newFunc, meaning it is now equal to b. Then you execute newFunc, and it alerts 'B!'.

Answer 7

When called, a does two things:

1. alerts 'A!'
2. creates a function that alerts 'B!' when called and also returns that function.

Your first example, a() is a call to a, so it alerts 'A!', creates a function that alerts 'B!' when called returns that function and discards it (because the returned value is not used).

Your second example, var newFunc = a() is similar to the first one: it's a call to a, alerts 'A!', creates a(nother) function that alerts 'B!', returns the function and the returned value is assigned to newFunc. Now newFunc is a reference to a function that alerts 'B!'.

Finally the last line of code newFunc(); calls the function that alerts 'B!'.

Answer 8

when you do:

var newFunc = a();

function a execute,so "A!" alerted, and function a return value assign to variable newFunc:

newfunc = function(){ alert("B!"); }

so when you execute newfunc,"B!" alerted.

Reference： Functions that return a function - Javascript