Skip to content

What I didn’t get to

Here are some of the weekend projects that I didn’t finish this year. These aren’t good enough to put on my project list or my sources page. Some of these aren’t even working, and some of them I might not finish at all (most of my weekends are spoken for). And some of them I can’t bear to look at (I’m not proud of the code, and don’t want to be judged by it…), but I’m making myself put them out there anyway. I feel bad for the neglected little things, trapped on my hard drive, and I’d like to let them see the sun, even if just briefly before they flicker out and die.

Libraries:
* LzOSUtils — jQuery-compatible ajax function, Flash->JS bridge with callbacks, declarative Flash 8 filter effects, console that reports to Firebug, dashed lines, Prototype-compatible string and collection methods, etc. Completely undocumented and fairly disorganized.
* LzTestKit — mocks and asynchronous and automated testing for OpenLaszlo; still pretty raw.
* HopKit — a “higher order programming kit”, for constructed chained APIs such as in LzTestKit’s mocks and expectations; still somewhat buggy and undocumented.
* MVars — a port of Haskell MVar‘s to JavaScript. I realized that what I actually needed for real-world applications was an implementation of the join calculus (a la JoCaml). I haven’t written the join calculus version.
* Protodoc — I wrote this to extract the docs from the source files and to implement the live examples in Functional and Sequentially; it includes a version of the wonderful doctest, for JavaScript. I got part way through refactoring it into something that isn’t quite put together again. I haven’t decided whether to finish it or whether there’s an existing project that’s close enough.
* [No link yet] Updates to OpenLaszlo JSON and ropenlaszlo, from using them over the past year. (No, those links go to the old versions — I haven’t uploaded the updates :-(
* Implementations in Ruby and JavaScript of the awesome CFDG. I wrote these a couple of years ago, and really want to update and clean them up to point where I can donate them to Hackety Hack, or someone else who might use them.

Applets:
* TilesHTML port of my mid-nineties Java version (which was a port of my mid-eighties C version), uses the Canvas tag; probably doesn’t work in MSIE
* IFS — a few minutes of pair programming with my son to show him some stuff about matrices; probably doesn’t work in MSIE
* On this day — iPhone applet; the feed is down right now
* Force-directed layout for my home page — this was my experiment using HTML instead of Flash; I got discouraged when I saw how bad the frame rate for full-page animation is was even in Firefox, let alone MSIE (Safari rocks now, though!)

Plus a couple dozen essays that are half or three-quarters written (programming, software development, math education), a couple of AJAX presentations, and two workbooks for teaching abstract math at the elementary level. It takes me longer to write an essay than a program, though!

More weekends, please.

Monads on the Cheap I: The Maybe Monad

Don’t worry, this isn’t YAMT (Yet Another Monad Tutorial). This is a practical post about a code smell that afflicts everyday code, and about an idiom that eliminates that smell. It just so happens that this idiom corresponds to one of the uses for monads in Haskell, but that’s just theory behind the practice, and I’ve saved the theory for the end.

This post is about style: implementation choices at the level of the expression and the statement. Style doesn’t matter much in a small program, or a write-only program (one that nobody will read later). It isn’t necessary to make a program run: by definition, it doesn’t make a functional difference. Style makes a difference to how easy or pleasant a program is to read; this can make a difference to whether it gets worked on (by its author, or somebody else) later.

The Problem

The types are Product, Offering, Merchant, and Name. A Product might have an Offering; an Offering might have a Merchant; and a Merchant might have a Name.

The code displays the name of the merchant that is offering the selected product. The input is named product. This value might be an instance of Product, or it might be null. The specification is this: If product is a product that has an offering that has a merchant has a name, then display that name; else do nothing.

[This problem is adapted from an eCommerce application I'm writing.]

This code isn’t difficult to write. The challenge isn’t in make it run; it’s in making it readable.

The Obvious Implementation

Here’s a naive solution. This particular code is JavaScript, but the structure comes out the same in Python, or Ruby, or C++ or Java, or Lisp.

var product = ...;
if (product) {
  var offering = product.offering;
  if (offering) {
    var merchant = offering.merchant;
    if (merchant) {
      var merchantName = merchant.name;
      if (merchantName)
        displayMerchantName(merchantName);
    }
  }
}

Let’s stop for a moment and identify the smells. There are two of them: I call the first one Narrative Mismatch, and the second Baton Carriers.

The first smell has to do with those nested conditionals. There’s a narrative here, that flows from the beginning of the spec (“the input is named product“) to the end (“display that name”). The code that corresponds to this narrative starts with product=..., and ends displayMerchantName(...). However, the line of this narrative isn’t linear in this implementation; it’s a series of Russian dolls. The climax to the story is buried in a subplot, displayed as though it were some exceptional case. Narrative Mismatch is when the dramatic structure (the specification) of the program doesn’t match its control structure (in the implementation).

The other problem is the temporary variables. These are the variables such as offering and merchant. These variables are “bit players”: each variable enters the stage (the local scope) only to perform a trivial bit of business, and then hangs around as clutter. Or, to use a racing metaphor, this implementation turns what could be a sprint into a relay race, where a series of runners hands off the data baton.

Can we do better?

If the code did nothing but display the merchant name and then return, we could invert each of the conditionals, and bail out early. This changes the control structure to match the plot: the beginning and end of the narrative are both at the same (top) level of the control structure.

var product = ...;
if (!product) return;
var offering = product.offering;
if (!offering) return;
var merchant = offering.merchant;
if (!merchant) return;
var merchantName = merchant.name;
if (!merchantName) return;
displayMerchantName(merchantName);

This implementation retains two of the disadvantages from the first, and it introduces a third. First, that’s still an awful lot of control flow (four lines) obfuscating a tiny amount of data flow (four lines). Second, we’ve still got those baton variables, offering, merchant, etc. Finally, the new implementation works only if the fragment is an entire function: if displayMerchantName is the last statement in the function1.

How about if we eliminate the batons altogether? Then we can combine all the tests into a single conditional:

var product = ...;
if (product
    && product.offering
    && product.offering.merchant
    && product.offering.merchant.name)
  displayMerchantName(product.offering.merchant.name);

This implementation has fewer lines, at least, but there’s still a lot of repetition2 — the text product.offering occurs four times.

It’s also inefficient. The previous implementations computed the value of product.offering only once, but this one computes it four times, and contains a total of nine member accesses to the alternatives’ three. These multiple accesses may not matter for this particular example: the case where all nine of those accesses are executed is the same case that ends with a a function call to a display routine. But consider the case where the accessor is product.offering() instead; or, in Ruby or ECMAScript 4, the case where product.offering is a getter.

We can re-introduce the temporary variables, this time within the conditional, to keep the control flow simple:

var product = ...,
    offering, merchant, merchantName;
if (product
    && (offering = product.offering)
    && (merchant = offering.merchant)
    && (merchantName = merchant.name))
  displayMerchantName(merchantName);

…but now we’ve brought back the batons.

(You may also have a stylistic object to the assignments inside of conditionals in this latest attempt. I’m not completely against the construct, but I avoid it unless it makes the code clearer, and it’s not clear that it does that, here.)

Stepping Back

I’d like to be able to write something that matches the language of the specification:

var product = ...,
    merchantName = product.offering.merchant.merchantName;
if (merchantName)
  displayMerchantName(merchantName);

and have the system just know that product.offering evaluates to null if product is null; and that product.offering.merchant evaluates to null if product.offering is null, etc. Now, we might not like null.property to evaluate to null everywhere (that might move bug symptoms too far away from their defect sites), but we’d like it here.

This property — that member access to a property of null is itself null — could be called “null contagion”. Many languages have “float contagion”, where an arithmetic operation produces a float if either of its arguments is a float. (i.e. a+b is equivalent to float(a)+float(b) if either of a or b is a float.) “Null contagion” is similar to float contagion except that it only applies to the member access (.) operator, and only from left to right.

You may be used to null contagion from other contexts — for example, from the declarative languages such as CSS and XPath and SQL, that adjoin the mainstream languages. It’s just not present in any of the procedural languages that I listed at the top of this post. For example, if product were XML and we were using E4X, we could write this as product.offering.merchant.name as desired. Or if we could apply CSS to a JavaScript object, we might write something like $('offering > merchant > name', product). Or with XPath (and an Hpricot-like syntax, this time): product/'offering/merchant/name/text()'.

So one solution would be to write a function that applies CSS or XPath paths to JavaScript objects. This works and there’s even Java libraries that do this, but here I’m looking for something less heavyweight than a library, and something that doesn’t require parsing strings at runtime. I’m looking for an idiom that approximates null contagion within the language.

Without further ado, here’s how to write an expression that evaluates to object‘s property property if object is not null, and to null otherwise3:

(object||{}).property

And this can be chained as follows:

((object||{}).property1||{}).property2

So let’s apply this, in two steps, to the problem above. First, get rid of all the intermediate conditionals, in order to match the control flow to the narrative:

var product = ...,
    offering = (product||{}).offering,
    merchant = (offering||{}).merchant,
    merchantName = (merchant||{}).name;
if (merchantName)
  displayMerchantName(merchantName);

And now that each intermediate variable is used only once, we can inline its value and eliminate its name:

var product = ...,
    merchantName = (((product||{}).offering||{}).merchant||{}).name;
if (merchantName)
  displayMerchantName(merchantName);

This isn’t as clean as the E4X example, but it’s relatively concise: no batons, and no non-narrative control flow.

It’s also, in the case where most products have offerings that have merchants that have names, potentially more performant. A || (which short circuits) is comparable to an if statement, and the number of conditionals of either form (|| or if) is conserved across all the implementations in this post. The “null contagion” version defines {} literals, but these are only interpreted to create objects when the property target is null — here, assumed to be the exceptional case. And since this attempt has fewer instances of variable name lookup than in the others, it should be more efficient than the others except when in the presence of more optimization that most of the scripting languages provide right now.

What about the case where most products don’t have offerings, or the offerings don’t have merchants, vel cetera? If this were a frequent case, and this were inner-loop code, I might introduce a global empty object in order to reduce the object instantiation overhead (which happens right away) and the GC load (which shows up over time). E.g. define var $N={}, and use:

var product = ...,
    merchantName = (((product||$N).offering||$N).merchant||$N).name;
if (merchantName)
  displayMerchantName(merchantName);

(The Ruby equivalent of {} is {} for a Hash, with array-style access; and OpenStruct.new for an Object, with property getter syntax. You definitely want a reusable singleton for the latter.)

On the minus side, even this version always performs all four tests and all three property accesses. That’s three extra tests (beyond the attempts at the top of this post) when product is null, and two extra when product.offering is null, and so on. So it might still slower be than the solutions that don’t use null contagion — but on the other hand, it still avoids the temporary variables of those solutions. In other words, there’s no substitute for actually measuring the difference, within the program and on each platform that you’re optimizing for. Oh well.

What Does this Have to Do With Monads?

An expression such as product.offering.merchant.name is a pipe. It can be read as “get the value of product; and then get that value’s offering; and then get that value’s merchant; and then get that value’s name“. The dot says two things: (1) evaluate the expression (product) to its left, and then (2) use that as target for the projection function (['offering']) immediately to its right.

We’ve made up a new construct, (object||{}).property, which is like object.property except that if you put a null in (as the value of object), you get null out (as the value of (object||{}).property). In effect, we’ve replaced dot’s interpretation of “and then”. The interpretation of object.property‘s “and then” includes “and if object is null, then error”. The interpretation of the new “and then” adds “and if object is null, evaluate to null”.

This construct, (object||{}).property, isn’t a monad. It isn’t a monad because it isn’t associative; and it isn’t associative because the property accessor (dot) isn’t either [dot isn't the morphism of a category]. (A.b).c isn’t the same as A.(b.c) — in fact, the latter isn’t even well formed.

However, the class of property projection functions — just the .b part — does form a category. If you consider just the .b.c.d part of A.b.c.d, it doesn’t make any difference whether you read it as “apply the ‘b’ projection, and then apply the application of the ‘d’ projection to the ‘c’ projection, to that”; or “apply the ‘c’ projection to the ‘b’ projection, and then apply the ‘d’ projection to that”.

You won’t find “null contagion” proposed as an implementation technique on the web. What you’ll find is the Maybe Monad.


1 It would be sad if this were an entire function. That would indicate that the function that contains displayMerchantName is just a wrapper for displayMerchantName, to protect it from being called when there isn’t a Product with an Offering with a Merchant. Having to define a new function to wrap each instance of a common pattern is like having to define a new word to name the reference of each noun phrase. It’s reminiscent of the boilerplate getters and setters in logorrheic enterprise code.

2 “Repetition” is defined as “a host site for a defect infection”.

3 JavaScript has more than one null object. This code takes advantage of the fact that an Object (even one with no properties) is never null, while undefined — the value of an undefined property access — is null.

Overloading Semicolon, or, monads from 10,000 Feet

amichail on reddit asks about understanding monads in one minute. My thoughts ran longer than a comment and more than a minute, so I’ve placed them here.

The main message of this posting is that you already use monads, just without the labels. The complexity in most explanations comes from factoring out the different pieces of what you already know, and from the mathematical exposition in terms of category theory and monad laws. (I like the math, but you won’t find any of it here.) This posting trades away accuracy for ease; I hope it’s a helpful start.


A monad, as used in Haskell, is a rule that defines how to get from one statement in a program to the next. For example, there’s an implicit monad in the (JavaScript) sequence var x = 1; var y = x+1. It describes how to get from var x = 1 to var y = x+1.

A monad describes the flow of control, and the flow of data. Typically, the flow of control is something like “execute the first statement once, and then execute the next statement once”, and the flow of data is something like “the first statement computes a value, and makes it available to the next statement” (through a variable binding, say).

Sometimes the rules are more complicated. For example, if one statement is throw or raise, the statements that follow it are skipped. If one statement sets a global variable, the statements that follow it can get additional data by reading that variable. And if one statement changes the world outside the program (say, that statement creates a file), this will affect what happens when the following statements peek at the world, maybe even in other ways (say, by reading the free space on that volume).

Also, “following statements” is a dynamic notion, not a static one. If function f calls g, then all the statements in f that follow f‘s call to g, follow all the statements in g (at least, up until g‘s return).

You’ve used monads. You’ve used the State monad (which manages global variables), the Error monad (which enables exceptions), and the IO monad (which handles interactions with the file system, and other resources outside the program). You may not have thought much about these properties, because they come “for free”: in most languages, you don’t need to do anything special to get them.

In Haskell, you do need to do something special. All you get by default is the “typical” case from above: one statement computes a value; the next statement can read it. If you want additional behavior (State, or Error, or IO), you have to say so. You can say so by declaring the type of your statement block. Just like every variable in a statically-typed language such as C or Java has a compile-time type (int if its values are integers, or String if its values are strings), every statement in Haskell has a compile-time type too: Error Int if it might raise an exception; IO Int it it might interact with the world.

Why introduce this complexity into statement sequencing? The complexity comes with two benefits: a check on dynamism, and the ability to extend it.

The first benefit is that, if the only statements that might change the world have IO in their type, you can assert to the compiler that some compound statement or function not only doesn’t change the world within its body, but doesn’t call any functions that contain statements that do. And so on for other properties (“raises an exception”, “accesses global data”). This turns out to be useful.

The other benefit is that you can define your own sequencing rule. Remember that part about “execute the first statement once, and then execute the next statement”, and “the first statement computes a value, which the next statement can use”? You can replace these with “execute the first statement, but only execute the next statement if the value so far isn’t null”. This is the Maybe monad; it turns out to be useful too.

Or, you could replace the rule with “the first statement computes a list of values, and the second statement runs once using each of them“. This is the List monad; it’s — yes, you’re ahead of me here — it’s useful too.

I made an analogy between statements and variables, above. Java and C++ have typed variables, while Haskell adds typed statements. Let’s extend that analogy. Operators, such as plus and times, combine values. Some languages let you overload operators: Integer+Integer does one thing; you can define String+String to do another (hopefully string concatenation), and Vector+Vector to do a third (hopefully vector addition).

You can think of the semicolon as an operator that combines two statements. A definition for the semicolon operator is a monad: it defines the meaning of a compound statement composed of two simpler ones. Haskell lets you overload semicolon.

I hope this helps. If it did, now go read a monad tutorial and see how it works for real. If didn’t, go read a monad tutorial to see if it’s easier with actual examples, and the details and syntax filled in.

Some Lies

Here’s some of what I said above, that just isn’t true:

A monad isn’t just a rule. It’s a structure that includes a rule. Its data are a set (or type) of statements, and an operation that combines them — the “rule” above. (There’s more accurate and technical definitions, but that gets into the heavy math.)

Furthermore, the rule part of the monad isn’t just any rule. It has to have certain properties: the monad laws. However, you can perfectly well understand how to use a monad without being able to enumerate the monad laws1, just like you can use numbers without being able to enumerate the properties of a field or ring.

The descriptions of the State and IO monads above are particularly oversimplified. I think they’re useful for coming from procedural programming, but you’ll want to refine them in order to get to functional programming. Again, follow any monad tutorial.

In Haskell, you don’t even get statements by default. (I said above that you did.) Everything is an expression. As soon as you start using statements (which are just monad-valued expressions), you’re in monad land (even if it’s just the identity monad). The step from expressions to statements is the big one, and the differences between different monads aren’t as big a (syntactic) deal.

In Java, you do have to declare the types of some collections of statements. The collections are functions, and the type that you have to declare is the type of a statement that throws a checked exception. This fact about Java is widely despised, but it does give you a taste of Haskell.

Finally, thinking about monads as defining (or overloading) semicolon is a start, but sequencing is more general than that. Even in a language where every two lexical statements are separated by a semicolon, one statement can dynamically follow another without any particular relation between their sources, such as when one is in a function, that is called by the other.

1 The monad laws just say that (1) there’s a way to turn any expression (that computes a value) into a monad (that passes that value on); and (2) a sequence of statements acts the way you think it should.

Sequentially: Temporal and Frequency Adverbs for JavaScript

Sequentially is a JavaScript library for asychronous programming. It makes it easy to define functions that are called later, or periodically, or that can be called only a certain number of times, or only at a certain frequency.

// Call a function f five times in a row
f.only(5).repeatedly()
// Call f five times, at one second intervals
f.only(5).periodically()
// Make a new function g that calls through to f at most five times,
// no matter how often g is called
var g = f.only(5)
// Make a new function g that calls f at most once per minute,
// no matter how frequently g is called
var g = f.infrequently(60*1000)
// Apply a function to each of the elements of an array, at intervals
// of once per second
['here', 'are', 'some', 'elements'].sequentially(
  function(word) {console.info(word, '->', word.length)})
  .periodically()

You can run these examples in your browser (Safari and Firefox only, for now) on this page of examples. Mouse over the source code to see which outputs come from each statement. Mouse over or click on the outputs to see which statement generates each output.

This is an early version. Some aspects aren’t well thought-out; some terminology isn’t consistent. Nonetheless, some early readers have urged me to put this out.

Why?

Recently I wrote an browser application that did the following:

Ask the content server for an image. If it’s not there, ask the application server to queue a request to the image server to create it. Then check back with the content server again. If the asset doesn’t show up after a while, the application server may have been down or overloaded, so ask it again. But I don’t want the client applications to mount a DDoS attack on an ailing server, so back off the frequency of the requests, and then give up, after a while.

Why? I’d like to be able to run client applications that present data from a cluster of unreliable commodity hardware (the same as Erlang; the same as CouchDB). This means these clients must survive component-wise server failure: they should implement retries (when a server is temporarily overloaded), then transition to failover (when it’s out for the count).

My first pass at this was a tangled mess of domain logic, network requests, and control code. It was way more complex than it ought to have been, especially for such a general design pattern.

The basic concepts here are simple: repetition (“keep asking, but not too many times…”) and frequency (“…and not too frequently”). Simple concepts should be simply spelled.

You can think of Sequentially as a tiny little domain-specific extension to JavaScript, that defines words for these concepts.

Some Analogies

I use this in a style I call “adverbial programming”. Another example of adverbial programming would be some uses of AOP.

Someday I’ll post an entry about the analogy between computer languages and natural languages. For now, simply note that methods such as “only” and “infrequently” modify a function (a verb) to produce a new function with a related meaning — this is the same as (one of the senses of) an adverb.

This is in contrast to procedural programming, which assembles statements into paragraphs with aggregate effect; object-oriented (OO) programming, which assembles noun phrases; and functional programming, which is largely about verbs1. (Closures, which bridge the gap between the functional and OO style, are gerunds.)

Here are some other analogies for thinking about thinking about this. This is all kind of notional, but I found these useful in suggesting how this relates to other work, and where to take it next.

You could think of Sequentially as doing something like memoization, where instead of just caching the result it modifies when andwhether a function is called. Alternatively (and very loosely), Sequentially is the categorical dual of generators (it builds sinks instead of sources), in a partially CPS-converted program. Or, if you took the call graph of a program, turned that into a dataflow diagram, and implemented a dataflow interpreter for that diagram, then Sequentially would override some of the pipes. Or (again, loosely) it’s a kind of two-way dual of Functional JavaScript in Chu space — instead of collecting values (arguments) across state space, it distributes function calls across time (sequence).

Or maybe that’s all overkill, and it’s just a few combinators for frequency, iteration, and time.


[1] More accurately, functional programming is about saturating the argument positions of both nouns and verbs. Its closest analogy is to theories of language, such as Montague Grammar and Categorial grammar, rather than to language itself. This may be why functional programming is for many people less than intuitive.

Functional Javascript 1.0.2

Thanks to everyone who has commented or contributed, praised or pitched in — I’ve released an update to Functional Javascript, with these changes:

New features

- Rhino compatibility. I think — at least it loads now, and a couple of hand tests work; i have yet to port the testing tool. (Credit: Reginald Braithwaite)

Optimizations

- More efficient Array.slice. (Credit: Dean Edwards)
- Memoize Function.lambda. (Credit: henrah)

Packaging changes

- Added jsmin version. With jsmin and gzip, the file is 2.5K.
- Moved string lambdas to a separate file, to-string.js. (Both files are included in the jsmin version.)
- Reformatted for new version of the doc tool.

Compatibility notes

If you were including functional.js before, now you need to include both functional.js and to-function.js in order to get the string lambda conversion functions too. Or you can include functional.min.js, which is smaller and includes them both.

The fact that functional.js itself no longer contains any regular expressions might make it usable in Flash. I haven’t actually tried this, because the only Flash I use is OpenLaszlo, which is still at version 8 of the Flash file format (AVM2, no JIT, <25% browser speed method calls are 10% of Firefox 2 / Safari 3.0 speed). I don’t dare program at too high a level in Flash 8 because of performance concerns.

Meanwhile, over in Ruby land…

I’ll also put in a plug here for Braithwaite’s String#to_proc, which is a port of string lambdas to Ruby:

(1..5).map &'*2'
  -> [2, 4, 6, 8, 10]
(1..5).inject &'+'
  -> 15
factorial = "(1.._).inject &'*'".to_proc
factorial.call(5)
  -> 120

I’ve been a Raganwald fan for a while; and Ruby is my favorite server-side glue language, I look forward to using it there…

Marvin’s Cake

Marvin’s birthday cake:

based on Marvin’s book:

and created by these folks.

I think they did an amazing job.

I suggested the “zero to infinity” since it’s what you get if you turn “80″ sideways. I had in mind a “zero” over the “lazy” eight, [tex]0 \atop \infty[/tex], but I think it’s more readable as it was translated through two phone calls into the image above.

Functional JavaScript

Functional is a JavaScript library for functional programming. It defines the standard higher-order functions (map, reduce, filter) that you can read about elsewhere on the web. It also defines functions for partial function application and function-level programming: curry, partial, compose, guard, and until. Finally, it introduces “string lambdas”, which let you write 'x -> x+1', 'x+1', or even '+1' as synonyms for function(x) {return x+1}.

See the API and examples page for more examples, API documentation, and a link to the source.

String lambdas

Welcome to functional programming! You’ve probably already discovered map and filter. (If not, curl up with Google for a few minutes. I’ll wait.) Try using them in JavaScript. Isn’t it a pain?:

map(function(x){return x+1}, [1,2,3])
  -> [2,3,4]
filter(function(x){return x>2}, [1,2,3,4]]
  -> [3,4]
some(function(w){return w.length < 3}, 'are there any short words?'.split(' '))
  ->false

String lambdas let you write these this way, instead:

map('x+1', [1,2,3])
select('x>2', [1,2,3,4])
some('_.length < 3', 'are there any short words?'.split(' '))

Some more examples, using just map, filter, and reduce:

// double the items in a list:
map('*2', [1,2,3])
  -> [2, 4, 6]
// find just the odd numbers:
filter('%2', [1,2,3,4])
  -> [1, 3]
// or just the evens:
filter(not('%2'), [1,2,3,4])
  -> [2, 4]
// find the length of the longest word:
reduce(Math.max, 0, map('_.length', 'how long is the longest word?'.split(' ')))
  -> 7
// parse a binary array:
reduce('2*x+y', 0, [1,0,1,0])
  -> 10
// parse a (non-negative) decimal string:
reduce('x*10+y', 0, map('.charCodeAt(0)-48', '123'.split(/(?=.)/)))
  -> 123

Function-level programming

Value-level programming manipulates values, transforming a sequence of inputs into an output. Function-level programming manipulates functions, applying operations to functions to construct a new function. It’s this new function that transforms inputs into outputs.

Here are some examples of function-level programming with Functional. There’s more in the documentation.

// find the reciprocal only ofvalues that test true:
map(guard('1/'), [1,2,null,4])
  -> [1, 0.5, null, 0.25]
// apply '10+' only to even values, leaving the odd ones alone:
map(guard('10+', not('%2')), [1,2,3,4])
  -> [1, 12, 3, 14]
// write a version of map that only applies to the evens:
var even = not('%2');
var mapEvens = map.prefilterAt(0, guard.rcurry(even));
mapEvens('10+', [1,2,3,4])
// find the first power of two that's greater than 100:
until('>100', '2*')(1)
  -> 128
// or the first three-digit power of two (these are equivalent):
until('String(_).length>2', '2*')(1)
until(compose('>2', pluck('length'), String), '2*')(1)
until(sequence(String, pluck('length'), '>2'), '2*')(1)

Partial function application

Partial function application, or specialization, creates a new
function out of an old one. For example, given a division function:

function div(a, b) {return a/b}

a partial application of div is a new function that divides its argument by two:

var halve = div.partial(_, 2);

Partial application is especially useful as an argument to the higher-order functions such as map, where, given a function div, we can apply it (the first line below) without an explicit wrapper (the second).

map(div.partial(_, 10), [10, 20, 30])
map(lambda(n) {return div(n, 10)}, [10, 20, 30])

The curry function handles a special case of partial function application, and the previous example could have been handled via curry. Partial function application in all its generality is only necessary when you’re specializing not just on all the arguments on the left, or all the arguments on the right, but some distribution of arguments with holes in the middle. To illustrate this requires a function with more than two parameters.

JavaScript doesn’t have many functions with more than two parameters. (splice takes three, but splice isn’t very functional). Here’s a contrived example to start (and a real-world example next).

We’ll borrow one of the few trinary predicates from math: “between”. increasing(a, b, c) tests whether b (the middle argument) lies in the open interval bounded by a and c. Specialize the first and last arguments to produce a functions that tests whether a number is positive, for example.

function increasing(a, b, c) {
  return a < b && b < c;
}
var positive = increasing.partial(0, _, Infinity);
map(positive, [-1, 0, 1])
  -> [false, false, true]
var negative = increasing.partial(-Infinity, _, 0);
map(negative, [-1, 0, 1])
  -> [true, false, false]

Here’s how to use compose and curry to generalize some of the examples from the first section into reusable functions. (You’ll probaby like or hate these function definitions to the extent that you like or hate Haskell.)

var longest = compose(reduce.curry(Math.max, 0), map.curry('_.length'), "_.split(' ')");
longest("how long is the longest word?");
  -> 7
longest("I bet floccinaucinihilipipification is longer.");
  -> 29
var parseUnsignedInt = compose(reduce.curry('x*10+y.charCodeAt(0)-48', 0), '_.split(/(?=.)/)')
parseUnsignedInt('123')
  -> 123

Here’s real-world example: The following line attaches a sum method to Array. Note how the 'this' string lambda, which is short for function(){return this}, moves the object from object position to argument position so that the curried reduce can apply to it.

Array.prototype.sum = reduce.curry('+', 0).compose('this')
[1,2,3].sum()
   -> 6

Here’s another example: If you’re using Prototype, you can replace the first line below by the second:

Event.observe('myobj', 'click', function() {...})
onclick(''myobj', function() {...})

by defining a specialized version of Event.observe:

var onclick = Event.observe.bind(Event).partial(_, 'click');

A Question of Taste

Is this:

var onclick = Event.observe.bind(Event).partial(_, 'click');

really better than the following?

function onclick(element, handler) {
  Event.observe(elenent, 'click', handler);
}

It’s a matter of taste, with some performance considerations as well.

The function-level version is less efficient. To the inexperienced eye, it’s also harder to read.

On the other hand, the functional version doesn’t include as much plumbing, with its attendent opportunity for error. The second definition of onclick, considered as a general replacement for Event.observer(..., 'click', ...), has two such errors. One shows up as soon as you use it; the second is considerably more subtle.

Whether functional programming is appropriate, for reasons of efficiency or readability, in any particular instance, it’s nice to have it, at least for prototyping, in your arsenal.

Performance Notes

In most languages, including JavaScript, invoking a function is one of the slowest things you can do. The implementations of languages designed for functional programming use a variety of techniques to optimize function calls. JavaScript is not one of those languages.

Functional attempts to reduce the cost of higher-order-programming where doing so doesn’t add to the code complexity or readability too much. Each higher-order function and method is a small number of lines, and each function-returning method attempts to do as much work as possible outside the function that it returns, to optimize the case where the returned function is called more than once (as an argument to a higher-order function such as map, for example).

Still, using Functional is expensive. Invoking a constructed function results in at least twice as many invocations as invoking the underlying function. This isn’t any different from using bind in the Prototype library, say, but, the more of your program you write in a functional style — and therefore the more method calls you introduce — the slower it will be. As with any library, be aware that you may have to hand-compile performance-critical sections of your code into an approximation of you would have written without the library anyway. If you think you already know what needs to be optimized (or that your whole program does), or you aren’t comfortable with measuring performance periodically in order to intelligently trade execution time against implementation time, you may want to eschew libraries, especially higher-order ones.

Compatibility

Functional is known to work in Firefox 2.0, Safari 3.0, and MSIE 6.0. I didn’t intentionally use any non-standard ECMAScript constructs, but meta-programming such as this tends to turn up corners in the browser implementations.

I’ve used this with Prototype and jQuery. If you call Functional.install, it will replace Prototype’s bind, but with a compatible version. Functional.install defines a number of other top-level functions (all documented), but to my knowledge these all have unusual names (e.g. curry), or standard semantics (e.g. map), so you’re unlikely to run into any problems unless you try to use this with another library of higher-order functions. In which case, don’t call Functional.install.

Update: The current version also defines equal as a functional, for doing things like this: select(equal(pluck('x'), K(1)), [{x:1,y:2}, {x:3,y:4}]). This is more likely to conflict with a method from your code or another library, so beware!

Defining String.prototype.apply and ...call seems potentially skanky, although the ECMAScript standard permits it and i haven’t run into any trouble. These methods could be removed without breaking anything except a few of the example; internally, the Functional functions use Function.toFunction instead.

The implementation of string lambdas uses regular expressions and eval. The rest of the code doesn’t. The intent of this separation is that the code might be portable to environments that don’t include these features, such as Flash and OpenLaszlo. I haven’t tested it against any of these environments, thoug, so I’ve kept the code in one file for now.

Future Directions

Credits

(Temporarily deleted while I debug why this text borks WordPress.)

Division-free LCM

Division-free GCD

A few years ago I described an algorithm for computing the greatest common denominator without division. (Euclid’s algorithm requires division, in order to compute the remainder.) Although less efficient than the standard algorithm, I found it easier to teach to my children when they were learning to add fractions.

I’ve made a movie of the steps involved here. (The Quicktime player has a bug: if the movie plays the first step over and over, try waiting it out, but if it doesn’t get past the first step after three or four times, then press your browser’s Reload button.)

Division-free LCM

Yesterday Paula Feynman asked me if there was a similar algorithm for finding the least common multiple. I came up with this one on the drive home. It can be used at grade school level — my children learned it in about half an hour — and I used their help (and the influence of Edwin Hutchins) to figure out a teachable presentation.

The movie is here. (As before, if the movie plays the first step over and over, try waiting it out, but if it doesn’t get past the first step after three or four times, then press your browser’s Reload button.)

Euclid, Meet Gauss

This algorithm is a great warm-up for Gaussian elimination. The numbers in the second and third columns are co-factors: their respective products with the two inputs sum to the number in the first column. (This is why the first two rows are initialized to the identity.) From there down, it’s Gaussian elimination: replace a row by a linear combination of rows, until the leading term in one of them has been annihilated. Since there are only two rows, you can work in place (by extending the table downwards), instead of copying the matrices to a new location each time.

The difference between this algorithm and standard Gaussian elimination is in the set of permissible operations. Since this algorithm doesn’t allow you to divide a row by a scalar (alternatively, to multiply by a non-integral rational) in order to produce unity, you’re limited to operations within the ring of integers. This restriction ensures that the operations preserve the number-theoretic properties of the inputs, which is what lets you recover the GCD and its co-factors at the end.

Sure enough, after I showed my son how the algorithm worked, I was able to easily show him how to invert a matrix in order to solve a family of systems of equations. (He had already worked with systems of equations in school, and we had worked on representing a system as a matrix last week.)

Nothing New Under the Sun

While writing this posting, I discovered that the division-free technique for computing the GCD was actually Euclid’s original algorithm.

Similarly, I belatedly found that most of the technique for computing the LCM of two numbers was also previously known (probably as of a century ago?). The “table method” of the “extended Euclidean algorithm” computes the co-factors, in pretty much the same way. However, that method, at least as described at Wikipedia, stops short of actually computing the LCM. It also relies on modular arithmetic; I think my version is more useful for elementary education. So maybe I’m bringing something to the table — so to speak.

One-Line JavaScript Memoization

Computing the length of a Bezier curve is expensive, but the length of a given Bezier doesn’t change over time. In my JavaScript Bezier implementation, I wanted to compute the length only the first time it’s need, and save this result in order to return instantly thereafter.

This is a special case of memoization. There are well-known strategies for implementing memoization. But getLength is a nullary function, and there’s a trick for implementing memoization of nullary methods in a dynamic language such as JavaScript (or Python or Ruby). In these languages, you can memoize a nullary method by adding one line to it, without any support libraries. This line replaces the method by a constant function, that returns the computed value. This memoization strategy is also more efficient than the general-purpose solution that non-nullary methods require.

Memoizing by Hand

The naive way to implement memoization is to store the value in a property the first time it’s computed, and test for the presence of the property thereafter:

Bezier.prototype.getLength = function() {
  var length = this._length;
  if (length === undefined) {
    var length = ... // expensive computation
    this._length = length;
  }
  return length;
}

or:

Bezier.prototype.getLength = function() {
  if ('_length' in this) return this._length;
  var length = ... // expensive computation
  this._length = length;
  return length;
}

There are some problems with these solutions. First, they’re verbose. Worse, the domain logic (the line labelled “expensive computation”) and the memoization logic (the code that accesses length and this._length) are tangled up with each other.

These implementations also require a private property for each memoized method. And then there’s a (minor) performance hit too: it takes a few instructions, each time, just to discover that the return value has already been computed.

The Big Gun

The standard solution to the first two of the problems above (the length and structure of the implementation) is to write a higher-order-function, that creates a memoizing function from a non-memoizing one.

Function.prototype.memoize = function () {
  var fn = this;
  var cacheName = ... // create a unique property name
  return function() {
    var key = serialize(arguments);
    var cache = this[cacheName] || this[cacheName] = {};
    return key in cache ? cache[key] :
      cache[key] = fn.apply(this, arguments);
  }
}

(Keith Gaughan has a complete implementation here.) Then you can use it thus:

Bezier.prototype.getLength = function() {
  var length = ... // expensive compuation
  return length;
}.memoize();

This is the best general-purpose solution, and it’s good for a framework, or for a complete application. But in a small standalone code library such as this or this, I don’t want to include a copy of Function.prototype.memoize in each standalone file (and then worry about version skew); and I don’t want to make each file depend on a utility file (and then worry about file dependencies).

The One-Liner

A nullary function such as getLength is a special case of functions in general, and there’s a particular technique1 for memoizing it, that fits on a single line.

Here’s the first variant.  This is less source code that the version above, and uses fewer instructions to retrieve a memoized value. (In fact, it uses the fewest possible number of instructions, if the API for retrieving a value requires a function call at all.) It’s an extra line (the assignment to this.getLength) that you can stick in a nullary method, that memoizes the method’s value on a per-instance basis.

Bezier.prototype.getLength = function() {
  var length = ... // expensive computation
  this.getLength = function(){return length};
  return length;
}

The second variant moves the return and the assignment to the same line. Think of this line as a “memoizing return statement”. It comes at the cost of more opaque code, and an extra function call. (The overhead of a function call is probably not a problem if the computation is expensive enough to be worth memoizing anyway.) And although it’s not a style I would use for general-purpose programming, I find it acceptable in an idiom2.

Bezier.prototype.getLength = function() {
  var length = ... // expensive computation
  return (this.getLength = function(){return length})();
}

Another Use

You can use a similar technique to prevent a function from being called twice.  This is even simpler, since you don’t need to keep track of the value.  For example (from gradients.js):

OSGradients.initialize = {
  OSGradients.initialize = function() {};
  ... // initialization
}

Avoiding Memory Leaks

The inner function captures the variables from the outer function. In the method below, temp will never be deallocated, until the instance that getLength has been applied to (and that the constant version of getLength is therefore now attached to) has been deallocated.

Bezier.prototype.getLength = function() {
  var temp = new Array(10000);
  var length = ... // expensive computation
  // the following line captures length and temp:
  return (this.getLength = function(){return length})();
}

If there are large temporaries, or pointers to DOM elements that may be deleted later, you should either detach them before you exit the outer function body:

Bezier.prototype.getLength = function() {
  var temp = new Array(10000);
  var length = ... // expensive computation
  temp = null; // so the value won't be captured
  // the following line captures length and work:
  return (this.getLength = function(){return length})();
}

or use a helper function that closes over just the return value:

// Function.K(value) is a constant-valued function that returns
// value.
Function.K = function(value) {return function(){return value}};
Bezier.prototype.getLength = function() {
  var temp = ...
  var length = ...
  // the following line only captures length:
  return (this.getLength = Function.K(length))();
}

Thunks for the Memories

Although I didn’t realize it until later (when I was writing my Bezier library, coming at this more from the “how can I cache this value” perspective than from a “theory of memoization and programming language implementation” perspective), this is nothing more than an implementation of thunks for JavaScript.

In a lazy (or call-by-need) language such as Haskell, memoization comes for free. A variable with an initializer has the same syntax and semantics as a function; the initializer is evaluated once, the first time the variable is referenced, and then cached.

A referentially transparent nullary function has the syntax of a function, but the semantics of a value. (In Haskell, the syntax is the same too.) By memoizing it, we’re making this value call-by-need. One technique for implementing call-by-need (or “lazy”) values is to create a thunk that replaces its computation by its value the first time it’s evaluated. In JavaScript, we can implement these semantics but have to stick with the function-call syntax.

Beyond Thunks

There’s three directions to go from here, but all of them involve giving up the single-line solution.

First, it’s a bother that a method has to know its own name. This means you can’t paste the same line of code into each memoized function. This is the only way, however, that the method can replace itself with the constant function3. You can eliminate the need to type the name twice, if give up both the no-helpers requirement and the optimization that a memoized function doesn’t test any conditions the second time it is called. (The higher-order function in the section “The Big Gun” does this.)

Second, you can memoize non-nullary functions by getting out the big gun too. In this case the replace-yourself optimization is useless too, since each invocation needs to check whether the value has already been computed for these arguments, regardless of how many times the function has been invoked before.

A third extension lets you hang onto the optimization, but takes more than a line of code (and therefore, realistically, depends on a support function). It’s for the case where the return value depends upon the object state, and that state is mutable. In this case, you need a way to reset the memoized function to its initial state, so that it will perform the computation the next time it’s called. For example, setRadians below resets getDegrees so that the multiplication happens again upon the first call getDegrees after each time setRadians is called. (This example isn’t a realistic candidate for memoization, but pretend multiplication is really really really slow.)

function Angle(radians) {this.setRadians(radians)}
Angle.prototype.setRadians = function(radians) {
  this.radians = radians;
  this.getDegrees.reset();
};
Angle.prototype.getDegrees = function() {
  return this.radians * 180 / Math.PI;
}
memoizeConstantMethod(Angle.prototype, 'getDegrees');

Here’s a long but marginally readable implementation of memoizeConstantMethod:

function memoizeConstantMethod(object, property) {
  var f = object[property];
  var mf = function() {
    var value = f.call(this);
    var kf = function(){return value};
    kf.reset = reset;
    object[property] = kf;
    return value;
  }
  var reset = function() {
    object[property] = mf;
  }
  mf.reset = reset;
  reset();
}

And here’s a shorter version, that sacrifices the remaining readability for source code size4.

function memoizeConstantMethod(o, p) {
  var f = o[p], mf, value;
  var s = function(v) {return o[p]=v||mf};
  ((mf = function() {
    (s(function(){return value})).reset = mf.reset;
    return value = f.call(this);
  }).reset = s)();
}

Update: Peter Michaux has a nicely written description of a similar technique here.


1 Memoization in general requires a finite map (or “hash”) from argument lists to result values. In the special case where the function is nullary, you don’t need a map, because the empty list is the only key.

2 Just as I don’t need to understand what the tabs are in an English idiom such as “keep tabs on”, I don’t need to easily read a programming language idiom compositionally each time I see it.

3 You can’t search the object and its prototype chain for a function that’s === to the one being replaced, because the same function might be present at different property names.

4 This is written in might be called the “_why combinator” style of programming.

Wide URLs with WideURL.com

For years now, I’ve been a great fan of TinyURL.com. That web site allows you to create a short representation of a longer URL, for use in email.

One of the problems with those URLs, though, and with URLs in general, is that they’re misleadingly short. A particular web page may have a lot of significance, but if it doesn’t take up much of your message, there’s just no way for the recipient to see this at a glance.

WideURL.com fixes this. It creates an URL with more visual impact.

For example, here’s the WideURL for this post: http://wideurl.com/aitch-tee-tee-pea-colon-double-slash-oh-ess-tee-double-ee-ell-ee-dot-see-oh-em-slash-aye-are-see-aitch-eye-vee-ee-ess-slash-two-double-zero-six-slash-zero-four-slash-doubleyou-eye-dee-ee-you-are-ell. That’s much more significant-looking than simply http://osteele.com/archives/2006/04/wideurl, I think you can agree.