Functions as Variables
In JavaScript, functions are first-class objects. This means that a function is regarded as a data type whose values can be saved in local variables, passed as parameters, and so on. For example, when defining a function, you can assign it to a variable, and then call the function through this variable. Take this example:
// displays greeting var display = function DisplayGreeting(hour) { if (hour >= 22 || hour <= 5) document.write("Goodnight, world!"); else document.write("Hello, world!"); } // call DisplayGreeting supplying an hour as parameter display(10);
%2F%2F%20displays%20greeting%20%0A%0D%0Avar%20display%20%3D%20function%20DisplayGreeting%28hour%29%20%0A%0D%0A%7B%20%0A%0D%0Aif%20%28hour%20%3E%3D%2022%20%7C%7C%20hour%20%3C%3D%205%29%20%0A%0D%0Adocument.write%28%22Goodnight%2C%20world%21%22%29%3B%20%0A%0D%0Aelse%20%0A%0D%0Adocument.write%28%22Hello%2C%20world%21%22%29%3B%20%0A%0D%0A%7D%20%0A%0D%0A%2F%2F%20call%20DisplayGreeting%20supplying%20an%20hour%20as%20parameter%20%0A%0D%0Adisplay%2810%29%3B
When storing a piece of code as a variable, as in this example, it can make sense to create it as an anonymous function—which is, a function without a name. You do this by simply omitting to specify a function name when creating it.
// displays greeting var display = function(hour) { ... }
%2F%2F%20displays%20greeting%20%0A%0D%0Avar%20display%20%3D%20function%28hour%29%20%0A%0D%0A%7B%20%0A%0D%0A...%20%0A%0D%0A%7D
Anonymous functions will come in handy in many circumstances when you need to pass an executable piece of code that you don't intend to reuse anywhere else, as parameter to a function.
Let's see how we can send functions as parameters. Instead of sending a numeric hour to DisplayGreeting(), we can send a function that in turn returns the current hour. To demonstrate this, we create a function named GetCurrentHour(), and send it as parameter to DisplayGreeting(). DisplayGreeting() needs to be modified to reflect that its new parameter is a function—it should be referenced by appending parentheses to its name. Here's how:
// returns the current hour function GetCurrentHour() { // obtaining the current hour var date = new Date(); var hour = date.getHours(); // return the hour return hour; } // display greeting function DisplayGreeting(hourFunc) { // retrieve the hour using the function received as parameter hour = hourFunc(); // display greeting if (hour >= 22 || hour <= 5) document.write("Goodnight, world!"); else document.write("Hello, world!"); } // call DisplayGreeting DisplayGreeting(GetCurrentHour);
%2F%2F%20returns%20the%20current%20hour%20%0A%0D%0Afunction%20GetCurrentHour%28%29%20%0A%0D%0A%7B%20%0A%0D%0A%2F%2F%20obtaining%20the%20current%20hour%20%0A%0D%0Avar%20date%20%3D%20new%20Date%28%29%3B%20%0A%0D%0Avar%20hour%20%3D%20date.getHours%28%29%3B%20%0A%0D%0A%2F%2F%20return%20the%20hour%20%0A%0D%0Areturn%20hour%3B%20%0A%0D%0A%7D%20%0A%0D%0A%2F%2F%20display%20greeting%20%0A%0D%0Afunction%20DisplayGreeting%28hourFunc%29%20%0A%0D%0A%7B%20%0A%0D%0A%2F%2F%20retrieve%20the%20hour%20using%20the%20function%20received%20as%20parameter%20%0A%0D%0Ahour%20%3D%20hourFunc%28%29%3B%20%0A%0D%0A%2F%2F%20display%20greeting%20%0A%0D%0Aif%20%28hour%20%3E%3D%2022%20%7C%7C%20hour%20%3C%3D%205%29%20%0A%0D%0Adocument.write%28%22Goodnight%2C%20world%21%22%29%3B%20%0A%0D%0Aelse%20%0A%0D%0Adocument.write%28%22Hello%2C%20world%21%22%29%3B%20%0A%0D%0A%7D%20%0A%0D%0A%2F%2F%20call%20DisplayGreeting%20%0A%0D%0ADisplayGreeting%28GetCurrentHour%29%3B
This code can be tested online at http://www.cristiandarie.ro/asp-ajax/Delegate.html. The output should resemble Figure 3-1.

NOTE: NET languages such as C# and VB.NET support similar functionality through the concept of delegates. A delegate is a data type that represents a reference to a function. An instance of a delegate represents a function instance, and it can be passed as a parameter to methods that need to execute that function. Delegates are the technical means used by .NET to implement event-handling. C# 2.0 added support for anonymous methods, which behave similarly to JavaScript anonymous functions.
Trackback(0)
|