Recently I saw this piece of JavaScript code, but have been unable to understand what it is trying to do.

var f = function(a) {
    return function() {
        alert(a());
    };
};
f(function() { return "Hello World"; })(); 

Please explain what this accomplishes!

Recently I saw this piece of JavaScript code, but have been unable to understand what it is trying to do.

var f = function(a) {
    return function() {
        alert(a());
    };
};
f(function() { return "Hello World"; })(); 

Please explain what this accomplishes!

• javascript
• function

• downvote :D because it is not that much difficult as i was thinking ? – Rakesh Juyal Commented Oct 19, 2009 at 14:17
• upvote - because first-order functions, and especially invoking the function returned from a function call (e.g. f()()) does look really confusing until you "get" it. – Andrzej Doyle Commented Oct 19, 2009 at 14:36
• Congratulations, Rakesh Juyal! You've just stumbled upon functional programming! I feel so happy for you sob – Lambda Fairy Commented Nov 28, 2011 at 2:23

5 Answers 5

It executes the function that f returns.
f returns a function that calls an alert that displays the output of the function you gave as parameter to f.

EDIT: Just substitute some parts to make it easier on the eye and you will see yourself:

var f = function(a) {
    var output = a();
    var alertCaller = function() {
        alert(output);
    };
    return alertCaller;
};

var helloWorld = function() { return "Hello World"; }
var result = f(helloWorld); //f takes a function as argument
result(); //result must be a function

It's just a higher-level function, which in this case isn't really necessary.

f is a function that takes another function (called a), and returns a newly generated function that will evaluate a and pop up an alert box showing the result.

So the bottom line calls f (passing in an anonymous function that prints "Hello World"), then immediately evaulates the anonymous function returned by f - which will evaluate the argument passed in (which you can see returns "Hello World") and then pops up an alert box.

The code posted is functionally equivalent to

alert("Hello World");

but there's two extra elements that make it more complex:

1. You can pass in an arbitrary function in order to generate the string that appears in the alert box (and this will be lazily evaluated, which could be important - e.g. a function to print the current time/app status/memory use when the alert is shown rather than when the method was created).
2. You can generate a closure that will show this alert and then pass it around, rather than the alert executing immediately.

But since neither of these benefits are actually used in the code snippet, I can see why you'd be confused.

It's a very complicated way to get an alert box to display "Hello world". Functions are first class items in javascript, and can be passed to and from other functions as parameters.

This code creates a function generator. The first function (whose reference is stored in f) accepts a reference to another function (a). Then f creates a function that closes over the parameter a and returns a reference to the new function that will alert the return value of a's invoked result.

Finally this mess is called with an inline function and its result is immediately invoked (with the trailing open and close parenthesis at the end).

f is assigned a function that takes a function as its argument, invokes it, and displays its return value in an alert. Then f is called with a function that returns the string "Hello World" when its invoked, resulting in Hello World being displayed in an alert.