Higher Order Programming

Introduction

Higher Order Programming is the ability to use functions as values. So you can pass functions as arguments to other functions and functions can be the return value of other functions. This style of programming is mostly used in functional programming, but it can also be very useful in ‘regular‘ object oriented programming. A good example of this is the Ruby Scripting Language, which combines all the advantages of pure object oriented programming and higher order programming. Sadly, Ruby is not supported by any browser, so it cannot be used for websites. We are lucky however that Javascript is available in every browser, and that Javascript is so flexible that it can be extended to make higher order programming a helpful tool in scripting webpages.

The sort method

Most people will know Javascript only as a scripting language that makes image switching and annoying popup windows possible. However the Javascript implementations hint at the more advanced programming possibilities through the sort Method of arrays. In it‘s simple form sort() will just sort the array: The code document.write([2,3,1,4].sort()) will write "1,2,3,4". But the sort method can do more. It allows a compare function as an optional argument. That‘s higher order programming right there. Suppose we have an array of objects. Each object has a date property, and we want to sort the objects by their date value:

arrayOfObjects.sort(
  function (x,y) {
    return x.date-y.date;
  }
);

The compare function is called regularly during sorting. It must return a negative value when x comes before y, zero when the are equal and a possitive value when x comes after y. This is exactly what substraction does for numbers and dates, for strings you can just use < and >.

Generating HTML

Using functions as arguments

If you have generated HTML from arrays before, this code will look familiar:

var s=‘‘;
for (var i=0;i<arr.length;i++) {
  var item=arr[i];
  s+=...generate some HTML...
}
document.write(s);

We will now create a reduce method, that will make this a bit more readable, and make the code more modular. The above code will then look like this:

function prettyTemplate(item) {
  return ...generate some HTML...
}
document.write(arr.reduce(prettyTemplate));

To create the reduce method, we can use much of the previous example. We‘ll extend the array prototype, so all arrays will have the reduce method available:

Array.prototype.reduce=function(templateFunction) {
  var l=this.length;
  var s=‘‘;
  for (var i=0;i<l;i++) s+=templateFunction(this[i]);
  return s;
}

Using a function as return value

The template function will often be simple: It will just wrap each item in the array with one HTML element. F.e. when creating a table, the template function won‘t do much more than: return ‘<TD>‘+item+‘</TD>‘;. Let‘s create a function that generates these simple element wrappers:

function wrap(tag) {
  var stag=‘<‘+tag+‘>‘;
  var etag=‘</‘+tag.replace(/s.*/,‘‘)+‘>‘;
  return function(x) {
    return stag+x+etag;
  }
}  
 
// examples:
 
document.write(wrap(‘B‘)(‘This is bold.‘));
var B=wrap(‘B‘);
document.write(B(‘This is bold too.‘));
 
document.write(
  ‘<TABLE><TR>‘+
    arr.reduce(wrap(‘TD class="small"‘))+
  ‘</TR></TABLE>‘
);

In the first example you can see that you can immediately call the returned function, which results in a somewhat unusual syntax of two argument lists next to eachother. There‘s another special thing happening here: the returned function referes to the stag and etag variables. That this works outside of the wrap function is because of the closure like behaviour of functions in Javascript. When a function is defined, it stores a pointer to the current scope. This scope is restored when the function is called.

Using functions as objects

In the last example, an array is converted to a table, each item in the array is wrapped with a <TD> element. If we want a vertical table layout, instead of horizontal, each item must be wrapped with both a <TR> element and a <TD> element. So we must create a new function again:

var TABLE=wrap(‘TABLE‘);var TR=wrap(‘TR‘);var TD=wrap(‘TD‘);
document.write(TABLE(arr.reduce(
  function (item) {
    return TR(TD(item));
  }
)));

TR(TD(item)) is like function composition, written as ‘TR o TD‘, and pronounced as ‘TR after TD‘. So we‘d like to write this as:

document.write(TABLE(arr.reduce(TR.after(TD))));

In Javascript functions are objects too, and they can also have methods. So we can extend the function prototype so that the after method is available to all functions.

Function.prototype.after=function(g) {
  var f=this;
  return function(x) {
    return f(g(x));
  }
}

Using methods as functions

Update: Dan Shappir pointed out to me that is useful for event handlers and callback function too. Read more about that here.

When doing higher order programming in an object oriented language, you‘d want to pass methods as arguments. But there‘s a problem. Let‘s make an element class with a wrap method:

function element(tag) {
  this.stag=‘<‘+tag+‘>‘;
  this.etag=‘</‘+tag.replace(/s.*/,‘‘)+‘>‘;
  this.wrap=function(x) {
    return this.stag+x+this.etag;
  }
}
 
P=new element(‘P‘);
// this works:
document.write(P.wrap(‘This is a paragraph.‘));
// this fails:
document.write(arr.reduce(P.wrap));

Why does this fail? Because when P.wrap is passed to the reduce function, only the function is passed, where this has a different meaning. But there‘s a little trick that makes method passing work:

function element(tag) {
  this.stag=‘<‘+tag+‘>‘;
  this.etag=‘</‘+tag.replace(/s.*/,‘‘)+‘>‘;
  var me=this;
  this.wrap=function(x) {
    return me.stag+x+me.etag;
  }
}
 
P=new element(‘P‘);
// this still works:
document.write(P.wrap(‘This is a paragraph.‘));
// and now this works too:
document.write(arr.reduce(P.wrap));

It looks like it‘s the same, but me is just a variable where this has a special meaning to every function. Javascript will make sure the wrap method will still know what me points to, no matter where the method is used.