In Javascript
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.
10/16/2005; 1:23:45 AM
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.
sort
methodMost 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:
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
>
.
If you have generated HTML from arrays before, this code will look familiar:
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:
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:
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.
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:
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.
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:
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:
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 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.
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!