You'll have to know how to program object oriented with Javascript. Read the articles at Webreference (links at the left of the article) to catch up on that.

Last Update

10/16/2005; 1:23:45 AM

Try XHTML 2.0Src XHTML 2.0RDF Metadata

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 HTMLUsing functions as arguments

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

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:

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:

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.

When should you use this?Modularisation

When you have 2 (or several) functions that are almost the same
except for a small part of the code, then you should consider to
combine these functions into one. Replace the part that is different
with a function call to a separate function. This function is passed
to the new more general function as an argument.

Something different

When you've grown bored of writing for-loops (like I did),
methods like reduce will be a welcome change in
programming style. For me, higher order programming has made Javascript
a lot more fun, and I hope you'll have fun with this too!