JavaScript OOP Tutorial: Delegates and Functions as Variables

This is a JavaScript DOM exercise from Chapter 3 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

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);

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)
  {
    ...
  }

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);

.NET languages such as C# and VB.NET support similar functionality through the concept of delegates. A delegate is a data type which represents a reference to a function. An instance of a delegate represents a function instance, and it can be passed as 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 similar to JavaScript anonymous functions.

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.