Smooth CoffeeScript — Interactive Edition

○•○

The program examples in this book live in an interactive environment where you can change the examples and create new solutions while you learn CoffeeScript. The environment also includes the Underscore functional library, the Coffeekup HTML markup, and qc, a QuickCheck based testing library. These libraries extend CoffeeScript with useful abstractions and testing tools to keep focus on the task at hand instead of distracting boilerplate code.

While it is possible to express programs from a very small set of language primitives, it quickly becomes tedious and error prone to do so. The approach taken here is to include a broader set of functional building blocks as if they were a native part of the programming language. By thinking in terms of these higher level constructs more complex problems can be handled with less effort.

To ensure correctness testing is required. This is especially true when developing reusable algorithms in a dynamic and untyped language. By integrating QuickCheck style test cases as soon as functions are introduced, it is intended that writing tests and declaring assumptions become a seamless part of writing software.

○•○

CoffeeScript is available in browsers and environments where JavaScript is available. The screenshots below show CoffeeScript running the same web server and client application on Mac OS X, Windows and iOS.

The CoffeeScript below shows the brevity of the self-contained application from the screenshots. It contains an HTML 5 web page in Coffeekup markup and its own HTTP web server. The page has a Canvas element with a drawing of the ‘Seed of Life’. Coffeekup is a few hundred lines of CoffeeScript. No frameworks. No JavaScript. Pure and smooth.

webdesign = -> 
  doctype 5
  html ->
    head ->
      meta charset: 'utf-8'
      title 'My drawing | My awesome website'
      style '''
        body {font-family: sans-serif}
        header, nav, section, footer {display: block}
      '''
      coffeescript ->
        draw = (ctx, x, y) ->
          circle = (ctx, x, y) ->
            ctx.beginPath()
            ctx.arc x, y, 100, 0, 2*Math.PI, false
            ctx.stroke()
          ctx.strokeStyle = 'rgba(255,40,20,0.7)'
          circle ctx, x, y
          for angle in [0...2*Math.PI] by 1/3*Math.PI
            circle ctx, x+100*Math.cos(angle),
                        y+100*Math.sin(angle)
        window.onload = ->
          canvas = document.getElementById 'drawCanvas'
          context = canvas.getContext '2d'
          draw context, 300, 200
    body ->
      header -> h1 'Seed of Life'
      canvas id: 'drawCanvas', width: 550, height: 400

kup = if exports? then require 'coffeekup' else CoffeeKup
webpage = kup.render webdesign, format:on
showDocument webpage, 565, 500

An accompanying web server can be written as easy as:

http = require 'http'
server = http.createServer (req, res) ->
  show "#{req.client.remoteAddress} #{req.method} #{req.url}"
  res.writeHead 200, 'Content-Type': 'text/html'
  res.write webpage
  res.end()
server.listen 3389
show 'Server running at'
show  server.address()

○•○

You will encounter some functions and symbols that are not part of CoffeeScript when you read through the rest of the book. They are needed to run the interactive environment and are explained as they are introduced. The following tables summarize them:

Included software

• The CoffeeScript language (MIT) from Jeremy Ashkenas

• The Underscore library (MIT) from DocumentCloud

• The Coffeekup library (MIT) from Maurice Machado

• The qc testing library (BSD) from Darrin Thompson

Software version details

View Solution

show """
  Library            Version
------------------   -------------
Coffeescript         #{CoffeeScript.VERSION}
Underscore           #{_.VERSION}
CoffeeKup            #{CoffeeKup.version}
QuickCheck           qc.js-2009"""

View Solution

# Show timing for compilation and execution of code blocks
@showTiming = off

# Variable names that are promoted from the execution
# environment to the global environment. These names can
# be used in other code blocks than where they are defined. 
@globalNames = 'Account HTML Rabbit _break _forEach absolute
 addCats addPoints addToSet between bits blackRabbit catData catNames
 catRecord deadCats escapeHTML estimatedDistance extractDate
 extractFootnotes extractMother fatRabbit findReached findRoute
 footnote forEach hasSevenTruths heightAt htmlDoc image killerRabbit
 link linkOstrich livingCats livingCats mailArchive makeReachedList
 makeRoad makeRoads map oldestCat op paragraph paragraphs partial
 point possibleDirections possibleRoutes power powerRec processParagraph
 range recluseFile reduce removeFromSet renderFootnote renderHTML
 renderParagraph retrieveMails roadsFrom route samePoint shortestRoute
 shortestRouteAbstract simpleObject speak splitParagraph square
 startsWith storeReached tag traverseRoute weightedDistance yell'

# An encoded picture of the signature ostrich. To obtain a base64
# encoding of a file run the CoffeeScript compiler like this:
# coffee -e "console.log require('fs').readFileSync('../img/ostrich.jpg').toString 'base64'"
@ostrich = ostrich = 'data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAEAsLCwwLEAwMEBcPDQ8XGxQQEBQbHxcXFxcXHx4XGhoaGhceHiMlJyUjHi8vMzMvL0BAQEBAQEBAQEBAQEBAQAERDw8RExEVEhIVFBEUERQaFBYWFBomGhocGhomMCMeHh4eIzArLicnJy4rNTUwMDU1QEA/QEBAQEBAQEBAQEBA/8AAEQgAWgBaAwEiAAIRAQMRAf/EAIYAAAIDAQEBAAAAAAAAAAAAAAQFAgMGAAEHAQEBAQEBAAAAAAAAAAAAAAACAQMABBAAAgEDAwIDBQYFBQEAAAAAAQIDABEEITESQQVhIhNRcYGhMrFCMxQVBpHBUmJDcqIjUzQ1EQACAgICAgIDAAAAAAAAAAAAARECITFBElFhcaHBIgP/2gAMAwEAAhEDEQA/AMtBEzW3o9ICBUsWG9qPWHTavPa2TZIDENx1qxI7WvRHEA6Uwwe1evxyMg8YL6KPqe32CopZXgAQAUdBBE/l4sQw/EPQ+FNJcjs+DFI6wxsVGq738LtSXJ/c8EbGD0OOPIBqAAyk+weyr19yTt6ITxMjFG3XehJUa2hNTHdcOWVTJo4urno69D764EMGN9msviLXvRiCyATcgLXNBSEnrameQnKhGxz7KdWFoFQsrbmir+J+mq0j81qK9Mf7aU5JBZiMRqaY+cwGYWKqeJA3FKYHKi23zptjIqQmVnLBgeSrp5RsdayssjQNI3AGQgkDUr1tUcvvxkUeivkQeXXa39tC5vcV+kPzXxFiPfQQMUqtYWO5+NKtfKC34LTm5mTxlPKXgeTCwVVHhrQjRnmVD+oSwW4Gt99KIWZorBVFiOJuP6tzTjHxsJceKZQpyI+DWUEkm9yoBsSRtTbjgmxNNjH8xxhQqIyRITtyP0r8qtORLCI1IvLExDBhbS2laTgmH6QCI6yHk6cbt6h6szgdTakWefWeQqi+RmvIu21+Itp8RU3tFiCw5MT8OZCO6huOttakGjlBEZ5eIpbMuRIy2GllBB95ozFj9MlmIUMblR0otJIqZJILtfeifQ+yjsSGOYC2/W1F/p/9w2oyywjLRMVfanU2eZYjBCllIs5OpNht4ClSY8ryqsQJdiAoHtphMpjurqL3N2F9TVbIjNZ6OkpO19Bapfp2Tr6ciyzqvqPDGSzKgsSSdtL6gUz9PEfuOOJyBCWHNjsF9poPP7aqZTMJAOOu41HRgeoNaK8RJy/n2mNrieOSjHkZivIXuQCfcafYYAaOc6kCykai/wBX2mhcbtU57eJuJtIzPbrw2U2rSdiwZAkWRIto7WWMDRr7tY1Hl4DoDZMhsmR52u8YW0SnzctW8NTyoKZLEgLxBbz21BtqSTWpzO0JLOkoJGOtiygnTieVh76Q9/xUSKXJwrLEt/VjB2c25Fajq5KmZ/IzURLfe020/hQP52d2trr93f7K8m5hwQnK4AG++9GxQKncIGVfTuoZhuAaWESLPOtfY8/bjZLLcxFkPW38603n/wCofT4UsTusMYCgC/Wwq39VHyvQ7L8izoSiBgbjQjYjeo5JkWKxJa/QnX505jxhuRQvcsc+g1h40SmYmkBewTfQAmtBidjxpcaOZoNRbmisWI5amyXtb3Vm/VBkCML67bWp3h50UMKoh5MDsGPEDfVSfsrRhXJr8bGUYrLJ5kItxPQW/lV0UsarwH+Py2pR23v8bERyNzhbdGN3S/3lc/Uvv1FB9+7zldqzA2NgPNBoWnflwcW2XhsffST1AX7NQ8SzQsDpyv8AZWRkR1xpo528zlkkVRYctdSPnWsxclMvt2PloCiTIHVTuAwBsay3fHwl/c2JiJzWSfi8jg+Tz3AFvtqXrMNcHVZn82F8ObkqcogRyBNzp0vQqyvLlGeQ2JOi/wBKjYU87/DFFkMuPYq44sx+pjsSvsFIVThLY73/AIVFz5E23Clx4GXM35A1d+Yb29KGRgwtVnE/KiU2CkBaHyQGjYFb6bVR+bFSE4kNuVvGo7I6GYzumPJFO9l4A6hfCgVyJkOjWp73lY/UK3Y3OrEaUhljYagfGtaOUgWUMmmfJGwJ1tsb6i/srYftv92RMq4eawZNk5bgezxFYU71wuCCDYjY0uq+Ayz7XFlYuTF/wlSg0BW1tPdSPuGUkOohDTqvGOZtBY3vyfw3rC9v/cWfgyrIrliNGF/qH91d3HvWZ3NzyuikWKA6W9nuotN40JdV7O7h3P8AMZhkXzKiiOM9NN2+Jr3Fj5ed73NDxQAbijYmCWtpUeoRVPIZGgA2tV1h8qEjmuas9Tx6UIYgh8hlFShmEikN10ub2A9ulUP8KPX/AOZ/i3P4P4m33qOCiPNZg11tx0A1NhQWQxMY06EUc/8A5D/q+Hx8aAyfxW3361tUFtgbC1QNTPwrw/CtDM4UVjRlt/hQw26Uww/o6UWVFuwr0Iz2C163wonF3H00Bl2LgXF2or9NTxojH2G3woj+FZ/tI8H/2Q=='

# When changes are made in a code block, only that block is
# evaluated. Turning this `off` will cause an evaluation of all
# code in the book on *every* keystroke. Only for articles.
@incrementalEvaluation = on

# Dummy definitions for standalone execution
if exports?
  view = (obj) -> show(obj); obj
  runOnDemand = confirm = prompt = ->

○•○

I do not enlighten those who are not eager to learn, nor arouse those who are not anxious to give an explanation themselves. If I have presented one corner of the square and they cannot come back to me with the other three, I should not go over the points again.

Confucius

Besides explaining CoffeeScript, this book tries to be an introduction to the basic principles of programming. Programming, it turns out, is hard. The fundamental rules are, most of the time, simple and clear. But programs, while built on top of these basic rules, tend to become complex enough to introduce their own rules, their own complexity. Because of this, programming is rarely simple or predictable. As Donald Knuth, who is something of a founding father of the field, says, it is an art.

To get something out of this book, more than just passive reading is required. Try to stay sharp, make an effort to solve the exercises, and only continue on when you are reasonably sure you understand the material that came before.

○•○

The computer programmer is a creator of universes for which he alone is responsible. Universes of virtually unlimited complexity can be created in the form of computer programs.

Joseph Weizenbaum, Computer Power and Human Reason

A program is many things. It is a piece of text typed by a programmer, it is the directing force that makes the computer do what it does, it is data in the computer’s memory, yet it controls the actions performed on this same memory. Analogies that try to compare programs to objects we are familiar with tend to fall short, but a superficially fitting one is that of a machine. The gears of a mechanical watch fit together ingeniously, and if the watchmaker was any good, it will accurately show the time for many years. The elements of a program fit together in a similar way, and if the programmer knows what he is doing, the program will run without crashing.

A computer is a machine built to act as a host for these immaterial machines. Computers themselves can only do stupidly straightforward things. The reason they are so useful is that they do these things at an incredibly high speed. A program can, by ingeniously combining many of these simple actions, do very complicated things.

To some of us, writing computer programs is a fascinating game. A program is a building of thought. It is costless to build, weightless, growing easily under our typing hands. If we get carried away, its size and complexity will grow out of control, confusing even the one who created it. This is the main problem of programming. It is why so much of today’s software tends to crash, fail, screw up.

When a program works, it is beautiful. The art of programming is the skill of controlling complexity. The great program is subdued, made simple in its complexity.

○•○

Today, many programmers believe that this complexity is best managed by using only a small set of well-understood techniques in their programs. They have composed strict rules about the form programs should have, and the more zealous among them will denounce those who break these rules as bad programmers.

What hostility to the richness of programming! To try to reduce it to something straightforward and predictable, to place a taboo on all the weird and beautiful programs. The landscape of programming techniques is enormous, fascinating in its diversity, still largely unexplored.

It is certainly littered with traps and snares, luring the inexperienced programmer into all kinds of horrible mistakes, but that only means you should proceed with caution, keep your wits about you. As you learn, there will always be new challenges, new territory to explore. The programmer who refuses to keep exploring will surely stagnate, forget his joy, lose the will to program (and become a manager).

As far as I am concerned, the definite criterion for a program is whether it is correct. Efficiency, clarity, and size are also important, but how to balance these against each other is always a matter of judgement, a judgement that each programmer must make for himself. Rules of thumb are useful, but one should never be afraid to break them.

○•○

In the beginning, at the birth of computing, there were no programming languages. Programs looked something like this:

00110001 00000000 00000000 00110001 00000001 00000001
00110011 00000001 00000010 01010001 00001011 00000010
00100010 00000010 00001000 01000011 00000001 00000000
01000001 00000001 00000001 00010000 00000010 00000000
01100010 00000000 00000000

That is a program to add the numbers from one to ten together, and print out the result (1 + 2 + … + 10 = 55). It could run on a very simple kind of computer. To program early computers, it was necessary to set large arrays of switches in the right position, or punch holes in strips of cardboard and feed them to the computer. You can imagine how this was a tedious, error-prone procedure. Even the writing of simple programs required much cleverness and discipline, complex ones were nearly inconceivable.

Of course, manually entering these arcane patterns of bits (which is what the 1s and 0s above are generally called) did give the programmer a profound sense of being a mighty wizard. And that has to be worth something, in terms of job satisfaction.

Each line of the program contains a single instruction. It could be written in English like this:

1 Store the number 0 in memory location 0
2 Store the number 1 in memory location 1
3 Store the value of memory location 1 in location 2
4 Subtract the number 11 from the value in location 2
5 If the value in memory location 2 is the number 0,
    continue with instruction 9
6 Add the value of memory location 1 to location 0
7 Add the number 1 to the value of memory location 1
8 Continue with instruction 3
9 Output the value of memory location 0

While that is more readable than the binary soup, it is still rather unpleasant. It might help to use names instead of numbers for the instructions and memory locations:

Set 'total' to 0
Set 'count' to 1
[loop]
Set 'compare' to 'count'
Subtract 11 from 'compare'
If 'compare' is zero, continue at [end]
Add 'count' to 'total'
Add 1 to 'count'
Continue at [loop]
[end]
Output 'total'

At this point it is not too hard to see how the program works. Can you? The first two lines give two memory locations their starting values: total will be used to build up the result of the program, and count keeps track of the number that we are currently looking at. The lines using compare are probably the weirdest ones. What the program wants to do is see if count is equal to 11, in order to decide whether it can stop yet. Because the machine is so primitive, it can only test whether a number is zero, and make a decision (jump) based on that. So it uses the memory location labelled compare to compute the value of count - 11, and makes a decision based on that value. The next two lines add the value of count to the result, and increment count by one every time the program has decided that it is not 11 yet. Here is the same program in CoffeeScript:

total = 0
count = 1
while count <= 10
  total += count
  count += 1
total

This gives us a few more improvements. Most importantly, there is no need to specify the way we want the program to jump back and forth anymore. The magic word while takes care of that. It continues executing the lines indented below it as long as the condition it was given holds: count <= 10, which means ‘count is less than or equal to 10’. Apparently, there is no need anymore to create a temporary value and compare that to zero. This was a stupid little detail, and the power of programming languages is that they take care of stupid little details for us.

This can also be expressed in a shorter form in CoffeeScript:

total = 0
total += count for count in [1..10]
total

The for and in words goes through the range of numbers from 1 to 10 [1..10], assigning each number in turn to count. Each value in count is then added to total.

Finally, here is what the program could look like if we happened to have the convenient operation sum available, which computes the sum of a collection of numbers similar to the mathematical notation ${\sum }_{n=1}^{10}n$:

sum [1..10]

View Solution

# Summation using a reduce function
sum = (v) -> _.reduce v, ((a,b) -> a+b), 0
sum [1..10]

Another possibility is to have functions attached to datatypes. Here a sum function is attached to an array, giving the sum of the elements in the array.

[1..10].sum()

View Solution

# Summation using reduce attached to Array
Array::sum = -> @reduce ((a,b) -> a+b), 0
show [1..10].sum()
delete Array::sum

The moral of this story, then, is that the same program can be expressed in long and short, unreadable and readable ways. The first version of the program was extremely obscure, while the last ones are almost English: show the sum of the numbers from 1 to 10. (We will see in later chapters how to build things like sum.)

A good programming language helps the programmer by providing a more abstract way to express himself. It hides uninteresting details, provides convenient building blocks (such as the while construct), and, most of the time, allows the programmer to add building blocks himself (such as the sum operation).

○•○

JavaScript is the language that is, at the moment, mostly being used to do all kinds of clever and horrible things with pages on the World Wide Web. JavaScript is also used for scripting in a variety of applications and operating systems. Of special note is server-side JavaScript (SSJS), where the server portion of a web application is written in JavaScript, so a full application can be expressed in one programming language. CoffeeScript generates standard JavaScript code and can therefore be used in environments where standard JavaScript is accepted. It means that both browser portions and server portions can be written in CoffeeScript.

CoffeeScript is a new language so it remains to be seen how popular it becomes for general application development, but if you are interested in programming, CoffeeScript is definitely a useful language to learn. Even if you do not end up doing much web programming, the mind-bending programs in this book will always stay with you, haunt you, and influence the programs you write in other languages.

There are those who will say terrible things about JavaScript. Many of these things are true. When I was for the first time required to write something in JavaScript, I quickly came to despise the language. It would accept almost anything I typed, but interpret it in a way that was completely different from what I meant. This had a lot to do with the fact that I did not have a clue what I was doing, but there is also a real issue here: JavaScript is ridiculously liberal in what it allows. The idea behind this design was that it would make programming in JavaScript easier for beginners. In actuality, it mostly makes finding problems in your programs harder, because the system will not point them out to you.

However, the flexibility of the language is also an advantage. It leaves space for a lot of techniques that are impossible in more rigid languages, and it can be used to overcome some of JavaScript’s shortcomings. After learning it properly, and working with it for a while, I have really learned to like this language. CoffeeScript repairs many of the confusing and cumbersome aspects of JavaScript, while keeping its underlying flexibility and beauty. It is doubleplusgood.

○•○

Most chapters in this book contain quite a lot of code⁵. In my experience, reading and writing code is an important part of learning to program. Try to not just glance over these examples, but read them attentively and understand them. This can be slow and confusing at first, but you will quickly get the hang of it. The same goes for the exercises. Do not assume you understand them until you have actually written a working solution.

Because of the way the web works, it is always possible to look at the JavaScript programs that people put in their web-pages. This can be a good way to learn how some things are done. Because most web programmers are not ‘professional’ programmers, or consider JavaScript programming so uninteresting that they never properly learned it, a lot of the code you can find like this is of a very bad quality. When learning from ugly or incorrect code, the ugliness and confusion will propagate into your own code, so be careful who you learn from. Another source of programs are CoffeeScript projects hosted on open source services such as github.

○•○

Values of the type number are, as you might have deduced, numeric values. They are written the way numbers are usually written:

144

Enter that in the console, and the same thing is printed in the output window. The text you typed in gave rise to a number value, and the console took this number and wrote it out to the screen again. In a case like this, that was a rather pointless exercise, but soon we will be producing values in less straightforward ways, and it can be useful to ‘try them out’ on the console to see what they produce.

This is what 144 looks like in bits⁷:

01000000 01100010 00000000 00000000 00000000 00000000 00000000 00000000

The number above has 64 bits. Numbers in CoffeeScript always do. This has one important repercussion: There is a limited amount of different numbers that can be expressed. With three decimal digits, only the numbers 0 to 999 can be written, which is 10³ = 1000 different numbers. With 64 binary digits, 2⁶⁴ different numbers can be written. This is a lot, more than 10¹⁹ (a one with nineteen zeros).

Not all whole numbers below 10¹⁹ fit in a CoffeeScript number though. For one, there are also negative numbers, so one of the bits has to be used to store the sign of the number. A bigger issue is that non-whole numbers must also be represented. To do this, 11 bits are used to store the position of the decimal dot within the number.

That leaves 52 bits⁸. Any whole number less than 2⁵², which is over 10¹⁵, will safely fit in a CoffeeScript number. In most cases, the numbers we are using stay well below that, so we do not have to concern ourselves with bits at all. Which is good. I have nothing in particular against bits, but you do need a terrible lot of them to get anything done. When at all possible, it is more pleasant to deal with bigger things.

Fractional numbers are written by using a dot.

9.81

For very big or very small numbers, one can also use ‘scientific’ notation by adding an e, followed by the exponent of the number:

2.998e8

Which is 2.998 ⋅ 10⁸ = 299 800 000.

Calculations with whole numbers (also called integers) that fit in 52 bits are guaranteed to always be precise. Unfortunately, calculations with fractional numbers are generally not. Like π (pi) can not be precisely expressed by a finite amount of decimal digits, many numbers lose some precision when only 64 bits are available to store them. This is a shame, but it only causes practical problems in very specific situations⁹. The important thing is to be aware of it, and treat fractional digital numbers as approximations, not as precise values.

○•○

The main thing to do with numbers is arithmetic. Arithmetic operations such as addition or multiplication take two number values and produce a new number from them. Here is what they look like in CoffeeScript:

100 + 4 * 11

The + and * symbols are called operators. The first stands for addition, and the second for multiplication. Putting an operator between two values will apply it to those values, and produce a new value.

Does the example mean ‘add 4 and 100, and multiply the result by 11’, or is the multiplication done before the adding? As you might have guessed, the multiplication happens first. But, as in mathematics, this can be changed by wrapping the addition in parentheses:

(100 + 4) * 11

For subtraction, there is the - operator, and division can be done with /. When operators appear together without parentheses, the order in which they are applied is determined by the precedence of the operators. The first example shows that multiplication has a higher precedence than addition. Division and multiplication always come before subtraction and addition. When multiple operators with the same precedence appear next to each other (1 - 1 + 1) they are applied left-to-right.

Try to figure out what value this produces, and then copy it to the next field to see if you were correct…

115 * 4 - 4 + 88 / 2

Touch or click in the following field to write in it. To evaluate some CoffeeScript, either just type it in Auto Evaluation mode or press ↑ / ↩ (Shift/Enter) while in the field in manual mode.

# Compose a solution here

These rules of precedence are not something you should worry about. When in doubt, just add parentheses.

There is one more arithmetic operator which is probably less familiar to you. The % symbol is used to represent the modulo operation. X modulo Y is the remainder of dividing X by Y. For example 314 % 100 is 14, 10 % 3 is 1, and 144 % 12 is 0. Modulo has the same precedence as multiplication and division.

○•○

The next data type is the string. Its use is not as evident from its name as with numbers, but it also fulfills a very basic role. Strings are used to represent text, the name supposedly derives from the fact that it strings together a bunch of characters. Strings are written by enclosing their content in quotes:

'Patch my boat with chewing gum.'

Almost anything can be put between quotes, and CoffeeScript will make a string value out of it. But a few characters are tricky. You can imagine how putting quotes between quotes might be hard.

'The programmer pondered: "0x2b or not 0x2b"'

CoffeeScript implements both single quoted and double quoted strings, which can be handy when you have only one kind of quote in a string.

"Aha! It's 43 if I'm not a bit off"

Double quoted strings can contain interpolated values, small snippets of CoffeeScript code between #{ and }. The code is evaluated and inserted into the string.

"2 + 2 gives #{2 + 2}"

Newlines, the things you get when you press enter, can not be put between quotes in the normal form of strings. A string can span multiple lines to help avoid overly long lines in the program but the line breaks are not shown in the output.

'Imagine if this was a
 very long line of text'

○•○

CoffeeScript has triple-quoted strings aka heredocs to make it easy to have strings that span multiple lines where the line breaks are preserved in the output. Indentation before the quotes are ignored so the following lines can be aligned nicely.

'''First comes A
   then comes B'''

The triple double quoted variant allows for interpolated values.

"""Math 101:
     1
   + 1
   ---
     #{1 + 1}"""

Still to be able to have special characters in a string, the following trick is used: Whenever a backslash (‘\’) is found inside quoted text, it indicates that the character after it has a special meaning. A quote that is preceded by a backslash will not end the string, but be part of it. When an ‘n’ character occurs after a backslash, it is interpreted as a newline. Similarly, a ‘t’ after a backslash means a tab character.

'This is the first line\nAnd this is the second'

There are of course situations where you want a backslash in a string to be just a backslash, not a special code. If two backslashes follow each other, they will collapse right into each other, and only one will be left in the resulting string value:

'A newline character is written like "\\n".'

○•○

Strings can not be divided, multiplied, or subtracted. The + operator can be used on them. It does not add, but it concatenates, it glues two strings together.

'con' + 'cat' + 'e' + 'nate'

There are more ways of manipulating strings, but these are discussed later.

○•○

Not all operators are symbols, some are written as words. For example, the typeof operator, which produces a string value naming the type of the value you give it.

typeof 4.5

The other operators we saw all operated on two values, typeof takes only one. Operators that use two values are called binary operators, while those that take one are called unary operators. The minus operator can be used both as a binary and unary operator¹⁰:

-(10 - 2)

○•○

Then there are values of the boolean type. There are two of these: true and false. CoffeeScript has some aliases for them: true can be written as yes or on. false as no or off. These alternatives can in some cases make a program easier to read. Here is one way to produce a true value:

3 > 2

And false can be produced like this:

3 < 2

I hope you have seen the > and < signs before. They mean, respectively, ‘is greater than’ and ‘is less than’. They are binary operators, and the result of applying them is a boolean value that indicates whether they hold in this case. You can chain comparisons to test if something is within an interval. These comparisons give respectively true and false:

100 < 115 < 200

100 < 315 < 200

Strings can be compared in the same way:

'Aardvark' < 'Zoroaster'

The way strings are ordered is more or less alphabetic. More or less… Uppercase letters are always ‘less’ than lowercase ones, so 'Z' < 'a' is true, and non-alphabetic characters (’ !’, ‘@’, etc) are also included in the ordering. The actual way in which the comparison is done is based on the Unicode standard. This standard assigns a number to virtually every character one would ever need, including characters from Greek, Arabic, Japanese, Tamil, and so on. Having such numbers is practical for storing strings inside a computer — you can represent them as a list of numbers. When comparing strings, CoffeeScript just compares the numbers of the characters inside the string, from left to right.

Other similar operators are >= (‘is greater than or equal to’), <= (‘is less than or equal to’), == (‘is equal to’), and != (‘is not equal to’). Equal to can also be written in text as is and not equal to as isnt.

'Itchy' isnt 'Scratchy'

○•○

There are also some useful operations that can be applied to boolean values themselves. CoffeeScript supports three logical operators: and, or, and not. These can be used to ‘reason’ about booleans.

The logical and operator can also be written as &&. It is a binary operator, and its result is only true if both of the values given to it are true.

true and false

Logical or with alias ||, is true if either of the values given to it is true:

true or false

not can be written as an exclamation mark, !, it is a unary operator that flips the value given to it, !true is false, and not false is true.

Exercise 1

((4 >= 6) || ('grass' != 'green')) and !(((12 * 2) == 144) and true)

Is this true? For readability, there are a lot of unnecessary parentheses in there. This simple version means the same thing:

(4 >= 6 or 'grass' isnt 'green') and not(12 * 2 is 144 and true)

# Compose a solution here

(false or true) and not (false and true)
true and not false
true

It is not always obvious when parentheses are needed. In practice, one can usually get by with knowing that of the operators we have seen so far, or has the lowest precedence, then comes and, then the comparison operators ( >, ==, etcetera), and then the rest. This has been chosen in such a way that, in simple cases, as few parentheses as possible are necessary.

1; not false

caught = 5 * 5

caught = 4 * 4

luigiDebt = 140
luigiDebt = luigiDebt - 35

show 'Also, your hair is on fire.'

show Math.max 2, 4

show 100 + Math.max 7, 4
show Math.max(7, 4) + 100
show Math.max(7, 4 + 100)
show Math.max 7, 4 + 100

show Math.PI
show console if console?
show showDocument

show 1 + 2 + 3 + 4 + 5 + view 6 + 7

confirm 'Shall we, then?', (answer) -> show answer

Prompt

prompt can be used to ask an ‘open’ question. The first argument is the question, the second one is the text that the user starts with. A line of text can be typed into the window, and the function will — in a browsers’ default implementation — return this as a string. As with confirm the interactive environment offers a similar function, that takes a third argument which will receive the answer.

prompt 'Tell us everything you know', '...',
  (answer) -> show 'So you know: ' + answer

prompt 'Pick a number', '', (answer) ->
  theNumber = Number answer
  show 'Your number is the square root of ' +
    (theNumber * theNumber)

show 0
show 2
show 4
show 6
show 8
show 10
show 12

currentNumber = 0
while currentNumber <= 12
  show currentNumber
  currentNumber = currentNumber + 2

counter = 0

while counter <= 12 then counter = counter + 2

Exercise 2

Use the techniques shown so far to write a program that calculates and shows the value of 2¹⁰ (2 to the 10th power). You are, obviously, not allowed to use a cheap trick like just writing 2 * 2 * ...

If you are having trouble with this, try to see it in terms of the even-numbers example. The program must perform an action a certain amount of times. A counter variable with a while loop can be used for that. Instead of printing the counter, the program must multiply something by 2. This something should be another variable, in which the result value is built up.

Do not worry if you do not quite see how this would work yet. Even if you perfectly understand all the techniques this chapter covers, it can be hard to apply them to a specific problem. Reading and writing code will help develop a feeling for this, so study the solution, and try the next exercise.

# Compose a solution here
runOnDemand ->
  # Start lines below with at least 2 spaces

result = 1
counter = 0
while counter < 10
  result = result * 2
  counter = counter + 1
show result

NOTE When solving the exercises beware of never ending loops (loops where the condition does not change). A problem loop can look like this: while counter then counter. Since the counter is not changed the loop will go on forever. If one is present then your browser will become unresponsive and you will have to reload the page or restart the browser.

Such a loop can occur accidentally while entering a solution. To make the problem less likely, write your code after the line runOnDemand ->. Start each line with two spaces (or more). When your solution is ready, press the Run button.

Exercise 3

With some slight modifications, the solution to the previous exercise can be made to draw a triangle. And when I say ‘draw a triangle’ I mean ‘print out some text that almost looks like a triangle when you squint’.

Print out ten lines. On the first line there is one ‘#’ character. On the second there are two. And so on.

How does one get a string with X ‘#’ characters in it? One way is to build it every time it is needed with an ‘inner loop’ — a loop inside a loop. A simpler way is to reuse the string that the previous iteration of the loop used, and add one character to it.

# Compose a solution here
runOnDemand ->
  # Start lines below with at least 2 spaces

line = ''
counter = 0
while counter < 10
  line = line + '#'
  show line
  counter = counter + 1

You will have noticed the spaces I put in front of some statements. These are required: The level of indentation decides which block a line belongs to. The role of the indentation inside blocks is to make the structure of the code clearer to a reader. Because new blocks can be opened inside other blocks, it can become hard to see where one block ends and another begins if they were not indented. When lines are indented, the visual shape of a program corresponds to the shape of the blocks inside it. I like to use two spaces for every open block, but tastes differ. If a line becomes too long, then you can split it between two words or place a \ at the end of the line and continue on the next.

for number in [0..12] by 2 then show number

# For with indented body
for number in [0..12] by 2
  show number

# For with prepended body
show number for number in [0..12] by 2

# The variable counter, which is about to be defined,
# is going to start with a value of 0, which is zero.
counter = 0
# Now, we are going to loop, hold on to your hat.
while  counter < 100 # counter is less than one hundred
  ###
  Every time we loop, we INCREMENT the value of counter
  Seriously, we just add one to it.
  ###
  counter++
# And then, we are done.

  fuzzylittleturtle                 FuzzyLittleTurtle
  fuzzy_little_turtle               fuzzyLittleTurtle

Exercise 4

Rewrite the solutions of the previous two exercises to use for instead of while.

# Compose a solution here

result = 1
for counter in [0...10]
  result = result * 2
show result

line = ''
for counter in [0...10]
  line = line + '#'
  show line

A program often needs to ‘update’ a variable with a value that is based on its previous value. For example counter = counter + 1. CoffeeScript provides a shortcut for this: counter += 1. This also works for many other operators, for example result *= 2 to double the value of result, or counter -= 1 to count downwards. counter++ and counter-- are shorter versions of counter += 1 and counter -= 1.

for counter in [0..20]
  if counter % 3 is 0 and counter % 4 is 0
    show counter

for counter in [0..20]
  if counter % 4 is 0
    show counter
  if counter % 4 isnt 0
    show '(' + counter + ')'

for counter in [0..20]
  if counter % 4 is 0
    show counter
  else
    show '(' + counter + ')'

for counter in [0..20]
  if counter > 15
    show counter + '**'
  else if counter > 10
    show counter + '*'
  else
    show counter

Exercise 5

Write a program to ask yourself, using prompt, what the value of 2 + 2 is. If the answer is ‘4’, use show to say something praising. If it is ‘3’ or ‘5’, say ‘Almost!’. In other cases, say something mean. Refer back↑ for the little bit of magic needed with prompt.

# Compose a solution here

prompt 'You! What is the value of 2 + 2?', '',
  (answer) ->
    if answer is '4'
      show 'You must be a genius or something.'
    else if answer is '3' or answer is '5'
      show 'Almost!'
    else
      show 'You are an embarrassment.'

The logic tests in a program can become complicated. To help write conditions clearly CoffeeScript provides a couple of variations on the if statement: The body of an if statement can be placed before the condition. And an if not can be written as unless.

fun = on
show 'The show is on!' unless fun is off

current = 20
loop
  if current % 7 is 0
    break
  current++
show current

current = 20
current++ until current % 7 is 0
show current

Exercise 6

Pick a lucky number from 1 to 6 then keep rolling a simulated die, until your lucky number comes up. Count the number of rolls. Use a loop and optionally a break. Casting a die can be simulated with:

roll = Math.floor Math.random() * 6 + 1

Note that loop is the same as while true and both can be used to create a loop that does not end on its own account. Writing while true is a useful trick but a bit silly, you ask the program to loop as long as true is true, so the preferred way is to write loop.

# Compose a solution here

luckyNumber = 5 # Choose from 1 to 6
show "Your lucky number is #{luckyNumber}"
count = 0
loop
  show roll = Math.floor Math.random() * 6 + 1
  count++
  if roll is luckyNumber then break
show "Luck took #{count} roll(s)"

luckyNumber = 3 # Choose from 1 to 6
show 'Your lucky number is ' + luckyNumber
count = 0
until roll is luckyNumber
  show roll = Math.floor Math.random() * 6 + 1
  count++
show 'You are lucky ' +
    Math.floor(100/count) + '% of the time'

In the second solution to the previous exercise roll has not been set to a value the first time through the loop. It is only assigned a value in the next statement. What happens when you take the value of this variable?

show mysteryVariable
mysteryVariable = 'nothing'

In terms of tentacles, this variable ends in thin air, it has nothing to grasp. When you ask for the value of an empty place, you get a special value named undefined. Functions which do not return an interesting value, such as the show function also return an undefined value. Most things in CoffeeScript however return a value, even most statements.

show show 'I am a side effect.'

There is a similar value, null, whose meaning is ‘this variable is defined, but it does not have a value’. The difference in meaning between undefined and null is mostly academic, and usually not very interesting. In practical programs, it is often necessary to check whether something ‘has a value’. In these cases, the expression something? may be used, the ? is called the existential operator. It returns true unless something is null or undefined. It also comes in an existential assignment form ?= which will only assign to a variable that is either null or undefined.

show iam ? undefined
iam ?= 'I want to be'
show iam
iam ?= 'I am already'
show iam if iam?

show false == 0
show '' == 0
show '5' == 5

show `null === undefined`
show `false === 0`
show `'' === 0`
show `'5' === 5`

show 'Apollo' + 5
show null + 'ify'
show '5' * 5
show 'strawberry' * 5

show Number('5') * 5

prompt 'What is your name?', '',
  (input) -> show 'Well hello ' + (input or 'dear')

false or show 'I am happening!'
true  or show 'Not me.'

○•○

Pure functions, for a start, are the things that were called functions in the mathematics classes that I hope you have been subjected to at some point in your life. Taking the cosine or the absolute value of a number is a pure function of one argument. Addition is a pure function of two arguments.

The defining properties of pure functions are that they always return the same value when given the same arguments, and never have side effects. They take some arguments, return a value based on these arguments, and do not monkey around with anything else.

In CoffeeScript, addition is an operator, but it could be wrapped in a function like this (and as pointless as this looks, we will come across situations where it is actually useful):

add = (a, b) -> a + b
add 2, 2

add is the name of the function. a and b are the names of the two arguments. a + b is the body of the function.

The construct -> is used when creating a new function. When it is assigned to a variable name, the resulting function will be stored under this name. Before the -> comes a list of argument names in parentheses. If a function does not take any arguments, then the parentheses are not needed. After the -> follows the body of the function. The body can follow the -> on the same line or indented on the following line.

The last statement in a function determines its value. The keyword return, followed by an expression, can also be used to determine the value the function returns. When control comes across a return statement, it immediately jumps out of the current function and gives the returned value to the code that called the function. A return statement without an expression after it will cause the function to return undefined.

A body can, of course, have more than one statement in it. Here is a function for computing powers (with positive, integer exponents):

power = (base, exponent) ->
  result = 1
  for count in [0...exponent]
    result *= base
  result
power 2, 10

If you solved Exercise 2↑, this technique for computing a power should look familiar. Creating a variable (result) and updating it are side effects. Did I not just say pure functions had no side effects? A variable created inside a function exists only inside the function. This is fortunate, or a programmer would have to come up with a different name for every variable he needs throughout a program. Because result only exists inside power, the changes to it only last until the function returns, and from the perspective of code that calls it there are no side effects.

Exercise 7

Write a function called absolute, which returns the absolute value of the number it is given as its argument. The absolute value of a negative number is the positive version of that same number, and the absolute value of a positive number (or zero) is that number itself.

# Compose a solution here

absolute = (number) ->
  if number < 0
    -number
  else
    number
absolute -144

Pure functions have two very nice properties. They are easy to think about, and they are easy to re-use.

If a function is pure, a call to it can be seen as a thing in itself. When you are not sure that it is working correctly, you can test it by calling it directly from the console, which is simple because it does not depend on any context¹³. It is easy to make these tests automatic — to write a program that tests a specific function. Non-pure functions might return different values based on all kinds of factors, and have side effects that might be hard to test and think about.

Because pure functions are self-sufficient, they are likely to be useful and relevant in a wider range of situations than non-pure ones. Take show, for example. This function’s usefulness depends on the presence of a special place on the screen for printing output. If that place is not there, the function is useless. We can imagine a related function, let’s call it format, that takes a value as an argument and returns a string that represents this value. This function is useful in more situations than show.

Of course, format does not solve the same problem as show, and no pure function is going to be able to solve that problem, because it requires a side effect. In many cases, non-pure functions are precisely what you need. In other cases, a problem can be solved with a pure function but the non-pure variant is much more convenient or efficient.

Thus, when something can easily be expressed as a pure function, write it that way. But never feel dirty for writing non-pure functions.

runOnDemand -> # Create the Run button further down
  testAbsolute = (name, property) ->
    testPure absolute, [arbInt], name, property

  testAbsolute 'returns positive integers',
    (c, arg, result) ->
      result >= 0

  testAbsolute 'positive returns positive',
    (c, arg, result) ->
      c.guard arg >= 0
      result is arg

  testAbsolute 'negative returns positive',
    (c, arg, result) ->
      c.guard arg < 0
      result is -arg

  test()

My results:
Pass: returns positive integers (pass=100, invalid=0)
Pass: positive returns positive (pass=100, invalid=103)
Pass: negative returns positive (pass=100, invalid=90)

runOnDemand ->
  testPure power, [arbInt, arbInt],
    'power equals Math.pow for integers',
    (c, base, exponent, result) ->
      result is c.note Math.pow base, exponent
  test()

My results:
fail: power equals Math.pow for integers
pass=9, invalid=0
shrinkedArgs=3,-2,9,0.1111111111111111
Failed case:
[ -9,
  -9,
  -387420489,
  -2.581174791713197e-9 ]

runOnDemand ->
  testPure power, [arbWholeNum, arbWholeNum],
    'power equals Math.pow for positive integers',
    (c, base, exponent, result) ->
      result is c.note Math.pow base, exponent
  test()

My results:
fail: power equals Math.pow for positive integers
pass=28, invalid=0
shrinkedArgs=9,18,150094635296999100,150094635296999140
Failed case:
[ 27,
  27,
  4.434264882430377e+38,
  4.434264882430378e+38 ]

Exercise 8

Modify the function intensify in the following program until it passes the test properties. You can find descriptions of many qc definitions such as arbConst in the qc reference↓. A predefined function c.noteVerbose can help by both recording a result if the test fails and displaying values as they are tested.

intensify = (n) ->
  2

runOnDemand ->
  testPure intensify, [arbInt],
    'intensify grows by 2 when positive',
    (c, arg, result) ->
      c.guard arg > 0
      arg + 2 is result

  testPure intensify, [arbInt],
    'intensify grows by 2 when negative',
    (c, arg, result) ->
      c.guard arg < 0
      arg - 2 is result

  testPure intensify, [arbConst(0)],
    'only non-zero intensify grows',
    (c, arg, result) ->
      result is 0

  test()

intensify = (n) ->
  if n > 0
    n + 2
  else if n < 0
    n - 2
  else
    n

Writing test declarations before writing a function can be a good way of specifying it. The test declarations in these examples are much larger than the functions they are testing. In Binary Heaps↓ is a more realistic example of a class and tests for it. Declarative testing is well suited to testing algorithms and reusable libraries. There are many other test tools that you can choose depending on your preference and task¹⁷. The main point here is that a reasonable level of testing is part of writing code.

yell = (message) ->
  view message + '!!'
  return
yell 'Yow'

dino = 'I am alive'
reptile = 'I am A-OK'
meteor = (reptile) ->
  show reptile            # Argument
  dino = 'I am extinct'
  reptile = 'I survived'
  possum = 'I am new'
show dino                 # Outer
meteor 'What happened?'
show dino                 # Outer changed
show reptile              # Outer unchanged
try show possum catch e
  show e.message          # Error undefined

variable = 'first'                    # Definition

showVariable = ->
  show 'In showVariable, the variable holds: ' +
        variable                      # second

testIt = ->
  variable = 'second'                 # Assignment
  show 'In test, the variable holds ' +
       variable + '.'                 # second
  showVariable()

show 'The variable is: ' + variable   # first
testIt()
show 'The variable is: ' + variable   # second

andHere = ->
  try show aLocal                     # Not defined
  catch e then show e.message
isHere = ->
  aLocal = 'aLocal is defined'
  andHere()
isHere()

isHere = ->
  andHere = ->
    try show aLocal                   # Is defined
    catch e then show e.message
  aLocal = 'aLocal is defined'
  andHere()
isHere()

varWhich = 'top-level'
parentFunction = ->
  varWhich = 'local'
  childFunction = ->
    show varWhich
  childFunction
child = parentFunction()
child()

makeAddFunction = (amount) ->
  add = (number) -> number + amount

addTwo = makeAddFunction 2
addFive = makeAddFunction 5
show addTwo(1) + addFive(1)

powerRec = (base, exponent) ->
  if exponent is 0
    1
  else
    base * powerRec base, exponent - 1
show 'power 3, 3 = ' + powerRec 3, 3

timeIt = (func) ->
  start = new Date()
  for i in [0...1000000] then func()
  show "Timing: #{(new Date() - start)*0.001}s"

add = (n, m) -> n + m # Baseline comparison

runOnDemand ->
  timeIt -> p = add 9,18                # 0.042s
  timeIt -> p = Math.pow 9,18           # 0.049s
  timeIt -> p = power 9,18              # 0.464s
  timeIt -> p = powerRec 9,18           # 0.544s

chicken = ->
  show 'Lay an egg'
  egg()

egg = ->
  show 'Chick hatched'
  chicken()

# WARNING! Clicking `Run` may cause your
# browser to enter a catatonic state
runOnDemand ->
  try show chicken() + ' came first.'
  catch error then show error.message

findSequence = (goal) ->
  find = (start, history) ->
    if start is goal
      history
    else if start > goal
      null
    else
      find(start + 5, '(' + history + ' + 5)') ? \
      find(start * 3, '(' + history + ' * 3)')
  find 1, '1'
show findSequence 24

makeAddFunction = (amount) ->
  (number) -> number + amount

show makeAddFunction(11) 3

Exercise 9

Write a function greaterThan, which takes one argument, a number, and returns a function that represents a test. When this returned function is called with a single number as argument, it returns a boolean: true if the given number is greater than the number that was used to create the test function, and false otherwise.

# Compose a solution here

greaterThan = (x) ->
  (y) -> y > x

greaterThanTen = greaterThan 10
show greaterThanTen 9

Try the following:

yell 'Hello', 'Good Evening', 'How do you do?'

The function yell defined earlier in this chapter only accepts one argument. Yet when you call it like this, the computer does not complain at all, but just ignores the other arguments.

yell()

You can, apparently, even get away with passing too few arguments. When an argument is not passed, its value inside the function is undefined.

In the next chapter, we will see a way in which a function body can get at the exact list of arguments that were passed to it. This can be useful, as it makes it possible to have a function accept any number of arguments. A debugging function console.log makes use of this:

console?.log 'R', 2, 'D', 2

To see the output from console.log you have to enable and open your browser’s built-in developer tools. The question mark is to prevent Internet Explorer 9 from throwing an error if Developer Tools (F12) has not been activated.

Of course, the downside of a variable number of arguments is that it is also possible to accidentally pass the wrong number of arguments to functions that expect a fixed amount of them and never be told about it.

○•○

First, let me tell you about properties. A lot of CoffeeScript values have other values associated with them. These associations are called properties. Every string has a property called length, which refers to a number, the amount of characters in that string.

Properties can be accessed in two ways:

text = 'purple haze'
show text['length']
show text.length

The second way is a shorthand for the first, and it only works when the name of the property would be a valid variable name — when it does not have any spaces or symbols in it and does not start with a digit character.

Numbers, booleans, the value null, and the value undefined do not have any properties. Trying to read properties from such a value produces an error. Try the following code, if only to get an idea about the kind of error-message you get in such a case (which, for some browsers, can be rather cryptic).

nothing = null
try show nothing.length catch error then show error.message

The properties of a string value can not be changed. There are quite a few more than just length, as we will see, but you are not allowed to add or remove any.

This is different with values of the type object. Their main role is to hold other values. They have, you could say, their own set of tentacles in the form of properties. You are free to modify these, remove them, or add new ones.

An object can be written like this:

cat =
  colour: 'grey'
  name: 'Spot'
  size: 46
# Or: cat = {colour: 'grey', name: 'Spot', size: 46}
cat.size = 47
show cat.size
delete cat.size
show cat.size
show cat

Like variables, each property attached to an object is labelled by a string. The first statement creates an object in which the property 'colour' holds the string 'grey', the property 'name' is attached to the string 'Spot', and the property 'size' refers to the number 46. The second statement gives the property named size a new value, which is done in the same way as modifying a variable.

The keyword delete cuts off properties. Trying to read a non-existent property gives the value undefined.

If a property that does not yet exist is set with the = operator, it is added to the object.

empty = {}
empty.notReally = 1000
show empty.notReally

Properties whose names are not valid variable names have to be quoted when creating the object, and approached using brackets:

thing = {'gabba gabba': 'hey', '5': 10}
show thing['5']
thing['5'] = 20
show thing[2 + 3]
delete thing['gabba gabba']
show thing

As you can see, the part between the brackets can be any expression. It is converted to a string to determine the property name it refers to. One can even use variables to name properties:

propertyName = 'length'
text = 'mainline'
show text[propertyName]

The operator of can be used to test whether an object has a certain property. It produces a boolean.

chineseBox = {}
chineseBox.content = chineseBox
show 'content' of chineseBox
show 'content' of chineseBox.content
show chineseBox

○•○

When object values are shown in the interactive environment, all layers of properties are shown. You can give an extra boolean argument, shallow, to show to only its own top-most properties. This is also used to limit the display of objects with circular references such as for the chineseBox above.

abyss = {lets:1, go:deep:down:into:the:abyss:7}
show abyss
show abyss, on

Exercise 10

The solution for the cat problem talks about a ‘set’ of names. A set is a collection of values in which no value may occur more than once. If names are strings, can you think of a way to use an object to represent a set of names?

Show how a name can be added to this set, how one can be removed, and how you can check whether a name occurs in it.

# Compose a solution here

set = {'Spot': true}
# Add 'White Fang' to the set
set['White Fang'] = true
# Remove 'Spot'
delete set['Spot']
# See if 'Asoka' is in the set
show 'Asoka' of set

Object values, apparently, can change. The types of values discussed in Basic CoffeeScript↑ are all immutable, it is impossible to change an existing value of those types. You can combine them and derive new values from them, but when you take a specific string value, the text inside it can not change. With objects, on the other hand, the content of a value can be modified by changing its properties.

When we have two numbers, 120 and 120, they can for all practical purposes be considered the precise same number. With objects, there is a difference between having two references to the same object and having two different objects that contain the same properties. Consider the following code:

object1 = {value: 10}
object2 = object1
object3 = {value: 10}

show object1 is object2
show object1 is object3

object1.value = 15
show object2.value
show object3.value

object1 and object2 are two variables grasping the same value. There is only one actual object, which is why changing object1 also changes the value of object2. The variable object3 points to another object, which initially contains the same properties as object1, but lives a separate life.

CoffeeScript’s is/== operator, when comparing objects, will only return true if both values given to it are the precise same value. Comparing different object with identical contents will give false. This is useful in some situations, but unpractical in others¹⁹.

mailArchive = {
  'the first e-mail': 'Dear nephew, ...'
  'the second e-mail': '...'
  # and so on ...
}

mailArchive = {
  0: 'Dear nephew, ... (mail number 1)'
  1: '(mail number 2)'
  2: '(mail number 3)'
}

for current of mailArchive
  show 'Processing e-mail #' + current +
       ': ' + mailArchive[current]

mailArchive = ['mail one', 'mail two', 'mail three']

for current in [0...mailArchive.length]
  show 'Processing e-mail #' + current +
       ': ' + mailArchive[current]

Exercise 11

Write a function range that takes one argument, a positive number, and returns an array containing all numbers from 0 up to and including the given number.

An empty array can be created by simply typing []. Also remember that adding properties to an object, and thus also to an array, can be done by assigning them a value with the = operator. The length property is automatically updated when elements are added.

# Compose a solution here

range = (upto) ->
  result = []
  i = 0
  while i <= upto
    result[i] = i
    i++
  result
show range 4

range = (upto) -> i for i in [0..upto]
show range 4
range = (upto) -> [0..upto]
show range 4

In CoffeeScript most statements can also be used as expressions. That means for example that the values from a for comprehension can be collected in a variable and used later.

numbers = (number for number in [0..12] by 2)
show numbers

doh = 'Doh'
show typeof doh.toUpperCase
show doh.toUpperCase()

mack = []
mack.push 'Mack'
mack.push 'the'
mack.push 'Knife'
show mack.join ' '
show mack.pop()
show mack

retrieveMails = -> [
  "Nephew,\n\nI bought a computer as soon as I received your letter. It took me two days to make it do 'internet', but I just kept calling the nice man at the computer shop, and in the end he came down to help personally. Send me something back if you receive this, so I know whether it actually works.\n\nLove,\nAunt Emily"
  "Dear Nephew,\n\nVery good! I feel quite proud about being so technologically minded, having a computer and all. I bet Mrs. Goor down the street wouldn't even know how to plug it in, that witch.\n\nAnyway, thanks for sending me that game, it was great fun. After three days, I beat it. My friend Mrs. Johnson was quite worried when I didn't come outside or answer the phone for three days, but I explained to her that I was working with my computer.\n\nMy cat had two kittens yesterday! I didn't even realize the thing was pregnant. I've listed the names at the bottom of my letter, so that you will know how to greet them the next time you come over.\n\nSincerely,\nAunt Emily\n\nborn 15/02/1999 (mother Spot): Clementine, Fireball"
  "[... and so on ...]\n\nborn 21/09/2000 (mother Spot): Yellow Emperor, Black Leclère"
  "...\n\nborn 02/04/2001 (mother Clementine): Bugeye, Wolverine, Miss Bushtail"
  "...\n\ndied 12/12/2002: Clementine\n\ndied 15/12/2002: Wolverine"
  "...\n\nborn 15/11/2003 (mother Spot): White Fang"
  "...\n\nborn 10/04/2003 (mother Miss Bushtail): Yellow Bess"
  "...\n\ndied 30/05/2004: Yellow Emperor"
  "...\n\nborn 01/06/2004 (mother Miss Bushtail): Catharina, Fat Igor"
  "...\n\nborn 20/09/2004 (mother Yellow Bess): Doctor Hobbles the 2nd, Noog"
  "...\n\nborn 15/01/2005 (mother Yellow Bess): The Moose, Liger\n\ndied 17/01/2005: Liger"
  "Dear nephew,\n\nYour mother told me you have taken up skydiving. Is this true? You watch yourself, young man! Remember what happened to my husband? And that was only from the second floor!\n\nAnyway, things are very exciting here. I have spent all week trying to get the attention of Mr. Drake, the nice gentleman who moved in next\ndoor, but I think he is afraid of cats. Or allergic to them? I am\ngoing to try putting Fat Igor on his shoulder next time I see him, very curious what will happen.\n\nAlso, the scam I told you about is going better than expected. I have already gotten back five 'payments', and only one complaint. It is starting to make me feel a bit bad though. And you are right that it is probably illegal in some way.\n\n(... etc ...)\n\nMuch love,\nAunt Emily\n\ndied 27/04/2006: Black Leclère\n\nborn 05/04/2006 (mother Lady Penelope): Red Lion, Doctor Hobbles the 3rd, Little Iroquois"
  "...\n\nborn 22/07/2006 (mother Noog): Goblin, Reginald, Little Maggie"
  "...\n\ndied 13/02/2007: Spot\n\ndied 21/02/2007: Fireball"
  "...\n\nborn 05/02/2007 (mother Noog): Long-ear Johnson"
  "...\n\nborn 03/03/2007 (mother Catharina): Asoka, Dark Empress, Rabbitface"
]

mailArchive = retrieveMails()

for email, i in mailArchive
  show "Processing e-mail ##{i} #{email[0..15]}..."
  # Do more things...

words = 'Cities of the Interior'
show words.split ' '

Exercise 12

split and join are not precisely each other’s inverse. string.split(x).join(x) always produces the original value, but array.join(x).split(x) does not. Can you give an example of an array where .join(' ').split(' ') produces a different value?

# Compose a solution here

array = ['a', 'b', 'c d']
show array.join(' ').split(' ')

Paragraphs that do not start with either “born” or “died” can be ignored by the program. How do we test whether a string starts with a certain word? The method charAt can be used to get a specific character from a string. x.charAt(0) gives the first character, 1 is the second one, and so on. One way to check whether a string starts with “born” is:

paragraph = 'born 15-11-2003 (mother Spot): White Fang'
show paragraph.charAt(0) is 'b' and
     paragraph.charAt(1) is 'o' and
     paragraph.charAt(2) is 'r' and
     paragraph.charAt(3) is 'n'

But that gets a bit clumsy — imagine checking for a word of ten characters. There is something to be learned here though: when a line gets ridiculously long, it can be spread over multiple lines. The result can be made easier to read by lining up the start of the new line with the first element on the original line that plays a similar role. You can also end a line with \ to indicate that it continues on the next line.

Strings also have a method called slice. It copies out a piece of the string, starting from the character at the position given by the first argument, and ending before (not including) the character at the position given by the second one. It is the same as using a range as an index. This allows the check to be written in a shorter way.

show paragraph.slice(0, 4) is 'born'
show paragraph[0...4] is 'born'

Exercise 13

Write a function called startsWith that takes two arguments, both strings. It returns true when the first argument starts with the characters in the second argument, and false otherwise.

# Compose a solution here

startsWith = (string, pattern) ->
  string.slice(0, pattern.length) is pattern
# or
startsWith = (string, pattern) ->
  string[0...pattern.length] is pattern
show startsWith 'rotation', 'rot'

What happens when charAt, slice or a range are used to take a piece of a string that does not exist? Will the startsWith still work when the pattern is longer than the string it is matched against?

show 'Pip'.charAt 250
show 'Nop'.slice 1, 10
show 'Pin'[1...10]

charAt will return '' when there is no character at the given position, and slice or the range will simply leave out the part of the new string that does not exist.

So yes, startsWith should work. When startsWith('Idiots', 'Most honoured colleagues') is called, the call to slice will, because string does not have enough characters, always return a string that is shorter than pattern. Because of that, the comparison with is will return false, which is correct.

It helps to always take a moment to consider abnormal (but valid) inputs for a program. These are usually called corner cases, and it is very common for programs that work perfectly on all the ‘normal’ inputs to screw up on corner cases²⁰.

Exercise 14

Can you write a function catNames that takes a paragraph as an argument and returns an array of names?

Strings have an indexOf method that can be used to find the (first) position of a character or sub-string within that string. Also, when slice is given only one argument, it will return the part of the string from the given position all the way to the end. With a range either the start or end can be left out: 'shorthand'[...5] ⇒ 'short' and 'shorthand'[5...] ⇒ 'hand'.

It can be helpful to use CoffeeScript interactively to ‘explore’ functions. Try 'foo: bar'.indexOf(':') and see what you get.

# Compose a solution here

catNames = (paragraph) ->
  colon = paragraph.indexOf ':'
  paragraph[colon+2...].split ', '

show catNames 'born 20/09/2004 (mother Yellow Bess): ' +
              'Doctor Hobbles the 2nd, Noog'

All that remains now is putting the pieces together. One way to do that looks like this:

mailArchive = retrieveMails()
livingCats = 'Spot': true

for email, i in mailArchive
  paragraphs = email.split '\n'
  for paragraph in paragraphs
    if startsWith paragraph, 'born'
      names = catNames paragraph
      for name in names
        livingCats[name] = true
    else if startsWith paragraph, 'died'
      names = catNames paragraph
      for name in names
        delete livingCats[name]

show livingCats, on

That is quite a big dense chunk of code. We will look into making it a bit lighter in a moment. But first let us look at our results. We know how to check whether a specific cat survives:

if 'Spot' in livingCats
  show 'Spot lives!'
else
  show 'Good old Spot, may she rest in peace.'

But how do we list all the cats that are alive? The of keyword is somewhat similar to the in keyword when it is used together with for:

for cat of livingCats
  show cat

A loop like that will go over the names of the properties in an object, which allows us to enumerate all the names in our set.

addToSet = (set, values) ->
  for i in [0..values.length]
    set[values[i]] = true

removeFromSet = (set, values) ->
  for i in [0..values.length]
    delete set[values[i]]

livingCats = 'Spot': true

for email in mailArchive
  paragraphs = email.split '\n'
  for paragraph in paragraphs
    if startsWith paragraph, 'born'
      addToSet livingCats, catNames paragraph
    else if startsWith paragraph, 'died'
      removeFromSet livingCats, catNames paragraph

show livingCats, on

findLivingCats = ->
  mailArchive = retrieveMails()
  livingCats = 'Spot': true

  handleParagraph = (paragraph) ->
    if startsWith paragraph, 'born'
      addToSet livingCats, catNames paragraph
    else if startsWith paragraph, 'died'
      removeFromSet livingCats, catNames paragraph

  for email in mailArchive
    paragraphs = email.split '\n'
    for paragraph in paragraphs
      handleParagraph paragraph

  livingCats

howMany = 0
for cat of findLivingCats()
  howMany++
show 'There are ' + howMany + ' cats.'

whenWasIt = year: 1980, month: 2, day: 1

whenWasIt = new Date 1980, 1, 1
show whenWasIt

show new Date
show new Date 1980, 1, 1
show new Date 2007, 2, 30, 8, 20, 30

today = new Date();
show "Year: #{today.getFullYear()}
 month: #{today.getMonth()}
 day: #{today.getDate()}"
show "Hour: #{today.getHours()}
 minutes: #{today.getMinutes()}
 seconds: #{today.getSeconds()}"
show "Day of week: #{today.getDay()}"

today = new Date()
show today.getTime()

wallFall = new Date 1989, 10, 9
gulfWarOne = new Date 1990, 6, 2
show wallFall < gulfWarOne
show wallFall is wallFall
# but
show wallFall is new Date 1989, 10, 9

wallFall1 = new Date 1989, 10, 9
wallFall2 = new Date 1989, 10, 9
show wallFall1.getTime() is wallFall2.getTime()

now = new Date()
show now.getTimezoneOffset()

Exercise 15

'died 27/04/2006: Black Leclère'

The date part is always in the exact same place of a paragraph. How convenient. Write a function extractDate that takes such a paragraph as its argument, extracts the date, and returns it as a date object.

# Compose a solution here

extractDate = (paragraph) ->
  numberAt = (start, length) ->
    Number paragraph[start...start + length]
  new Date numberAt(11, 4),     # Year
           numberAt( 8, 2) - 1, # Month
           numberAt( 5, 2)      # Day

show extractDate 'died 27-04-2006: Black Leclère'

Storing cats will work differently from now on. Instead of just putting the value true into the set, we store an object with information about the cat. When a cat dies, we do not remove it from the set, we just add a property death to the object to store the date on which the creature died.

This means our addToSet and removeFromSet functions have become useless. Something similar is needed, but it must also store birth-dates and, later, the mother’s name.

catRecord = (name, birthdate, mother) ->
  name:   name
  birth:  birthdate
  mother: mother

addCats = (set, names, birthdate, mother) ->
  for name in names
    set[name] = catRecord name, birthdate, mother

deadCats = (set, names, deathdate) ->
  for name in names
    set[name].death = deathdate

catRecord is a separate function for creating these storage objects. It might be useful in other situations, such as creating the object for Spot. ‘Record’ is a term often used for objects like this, which are used to group a limited number of values.

'born 15/11/2003 (mother Spot): White Fang'

extractMother = (paragraph) ->
  start = paragraph.indexOf '(mother '
  start += '(mother '.length
  end = paragraph.indexOf ')'
  paragraph[start...end]

show extractMother \
  'born 15/11/2003 (mother Spot): White Fang'

Exercise 16

The thing that extractMother does can be expressed in a more general way. Write a function between that takes three arguments, all of which are strings. It will return the part of the first argument that occurs between the patterns given by the second and the third arguments. That is:

between 'born 15/11/2003 (mother Spot): White Fang',
        '(mother ', ')' ⇒ 'Spot'
between 'bu ] boo [ bah ] gzz', '[ ', ' ]' ⇒ 'bah'

To make that second test work, it can be useful to know that indexOf can be given a second, optional parameter that specifies at which point it should start searching.

# Compose a solution here

between = (string, start, end) ->
  startAt = string.indexOf start
  startAt += start.length
  endAt = string.indexOf end, startAt
  string[startAt...endAt]
show between 'bu ] boo [ bah ] gzz', '[ ', ' ]'

Having between makes it possible to express extractMother in a simpler way:

extractMother = (paragraph) ->
  between paragraph, '(mother ', ')'

findCats = ->
  mailArchive = retrieveMails()
  cats = {'Spot': catRecord 'Spot',
    new Date(1997, 2, 5), 'unknown'}

  handleParagraph = (paragraph) ->
    if startsWith paragraph, 'born'
      addCats cats, catNames(paragraph),
              extractDate(paragraph),
              extractMother(paragraph)
    else if startsWith paragraph, 'died'
      deadCats cats, catNames(paragraph),
               extractDate(paragraph)

  for email in mailArchive
    paragraphs = email.split '\n'
    for paragraph in paragraphs
      handleParagraph paragraph
  cats

catData = findCats()

show catData['Clementine'], on
show catData[catData['Clementine'].mother], on

formatDate = (date) -> "#{date.getDate()}/" +
                       "#{date.getMonth() + 1}/" +
                       "#{date.getFullYear()}"
catInfo = (data, name) ->
  unless name of data
    return "No cat by the name of #{name} is known."
  cat = data[name]
  message = "#{name}," +
            " born #{formatDate cat.birth}" +
            " from mother #{cat.mother}"
  if "death" of cat
    message += ", died #{formatDate cat.death}"
  "#{message}."

show catInfo catData, "Fat Igor"

Exercise 17

The formatDate function used by catInfo does not add a zero before the month and the day part when these are only one digit long. Write a new version that does this.

# Compose a solution here

formatDate = (date) ->
  pad = (number) ->
    if number < 10
      "0" + number
    else
      number
  "#{pad date.getDate()}/" +
  "#{pad date.getMonth() + 1}/" +
  "#{date.getFullYear()}"

show formatDate new Date 2000, 0, 1

The property ‘dot’ accessor that we have been using comes in a handy form combined with the existential operator. Instead of object.element we can write object?.element if object is defined then we get the value as before. But if it is null then we get undefined instead of an error.

Exercise 18

Write a function oldestCat which, given an object containing cats as its argument, returns the name of the oldest living cat.

# Compose a solution here

oldestCat = (data) ->
  oldest = null
  for name of data
    cat = data[name]
    unless 'death' of cat
      if oldest is null or oldest.birth > cat.birth
        oldest = cat
  oldest?.name
show oldestCat catData

for cat, info of catData # Test with dead cats
  delete catData[cat] unless 'death' of info
show oldestCat catData

Now that we are familiar with arrays, I can show you something related. Whenever a function is called, a special variable named arguments is added to the environment in which the function body runs. This variable refers to an object that resembles an array. It has a property 0 for the first argument, 1 for the second, and so on for every argument the function was given. It also has a length property.

This object is not a real array though, it does not have methods like push, and it does not automatically update its length property when you add something to it. Why not, I never really found out, but this is something one needs to be aware of.

argumentCounter = ->
  show "You gave me #{arguments.length} arguments."

argumentCounter "Death", "Famine", "Pestilence"

Some functions can take any number of arguments. These typically loop over the values in the arguments object to do something with them. We can create a print function that uses show to print each of its arguments.

print = ->
  show arg for arg in arguments
  return

print 'From here to', 1/0

Others can take optional arguments which, when not given by the caller, get some sensible default value.

add = (number, howmuch) ->
  if  arguments.length < 2
    howmuch = 1
  number + howmuch

show add 6
show add 6, 4

Exercise 19

Extend the range function from Exercise 11↑ to take a second, optional argument. If only one argument is given, it behaves as earlier and produces a range from 0 to the given number. If two arguments are given, the first indicates the start of the range, the second the end.

# Compose a solution here

range = (start, end) ->
  if arguments.length < 2
    end = start
    start = 0
  result = []
  for i in [start..end]
    result.push i
  result

show range 4
show range 2, 4

CoffeeScript has a few of features that can make it simpler to work with arguments. You can set default values directly in the argument list. The show function is defined like:

show = (obj, shallow = off, symbol = '→') ->
  showHere currentTag, obj, shallow, symbol
  return # Suppress display of the return value

When the arguments starting from shallow are not present in a call, they get the value after the =. No checks are needed in the body where the arguments are used.

For variable arguments you can use ... commonly called splats. The ellipsis can indicate extra arguments in a function definition or a call. Do you remember the testPure function? It was used with both absolute which takes one argument and power which takes two. In its definition (c, a...) says that a... is a variable argument list. The variable arguments are used two times, in the call to func and in the call to property.

testPure = (func, types, name, property) ->
  declare name, types, (c, a...) ->
    c.assert property c, a..., c.note func a...

Finally the or= operator can be used in options or= defaults as shorthand for options or (options = defaults).

Exercise 20

You may remember this line of code from the introduction:

sum [1..10]

All we need to make this line work is a sum function. This function takes an array of numbers, and returns their sum. Write it, it should be easy. Check that it also works with range.

# Compose a solution here

sum = (numbers) ->
  total = 0
  for num in numbers
    total += num
  total

show sum [1..10]
show sum range 1, 10

The previous chapter showed the functions Math.max and Math.min. With what you know now, you will notice that these are really the properties max and min of the object stored under the name Math. This is another role that objects can play: A warehouse holding a number of related values.

There are quite a lot of values inside Math, if they would all have been placed directly into the global environment they would, as it is called, pollute it. The more names have been taken, the more likely one is to accidentally overwrite the value of some variable. For example, it is not a far shot to want to name something max.

Most languages will stop you, or at least warn you, when you are defining a variable with a name that is already taken. Not JavaScript.

In any case, one can find a whole outfit of mathematical functions and constants inside Math. All the trigonometric functions are there — cos, sin, tan, acos, asin, atan. π and e, which are written with all capital letters (PI and E), which was, at one time, a fashionable way to indicate something is a constant. pow is a good replacement for the power functions we have been writing, it also accepts negative and fractional exponents. sqrt takes square roots. max and min can give the maximum or minimum of two values. round, floor, and ceil will round numbers to the closest whole number, the whole number below it, and the whole number above it respectively.

There are a number of other values in Math, but this text is an introduction, not a reference. References are what you look at when you suspect something exists in the language, but need to find out what it is called or how it worked exactly. A useful reference for predefined global objects like the Math object exist at the Mozilla Developer Network.

An interesting object is Array when you look through its reference notice that many definitions for example forEach are marked Requires JavaScript 1.6 or another version number. JavaScript 1.5 corresponds to ECMA–262 3^rd Edition from December 1999.

More than a decade later this is still the standard that most JavaScript engines implement — including V8, the engine that via JavaScript compiles CoffeeScript to native machine code. It is fair to say that JavaScript is evolving at a glacial pace. Fortunately CoffeeScript and Underscore leapfrogs the JavaScript process and gives you language and library advances that you can use without waiting for existing browsers and engines to be upgraded.

for name of Math
  show name

for name of ['Huey', 'Dewey', 'Loui']
  show name

array = ['Heaven', 'Earth', 'Man']
array.length = 2
show array

○•○

It is important to decide into which of these categories a certain problem falls. For example, consider our old power function:

power = (base, exponent) ->
  result = 1
  for count in [0...exponent]
    result *= base
  result

When some geek tries to call power 'Rabbit', 4, that is quite obviously a programmer error, but how about power 9, 0.5? The function can not handle fractional exponents, but, mathematically speaking, raising a number to the ½ power is perfectly reasonable ( Math.pow can handle it). In situations where it is not entirely clear what kind of input a function accepts, it is often a good idea to explicitly state the kind of arguments that are acceptable in a comment.

○•○

If a function encounters a problem that it can not solve itself, what should it do? In Data Structures↑ we wrote the function between:

between = (string, start, end) ->
  startAt = string.indexOf start
  startAt += start.length 
  endAt = string.indexOf end, startAt
  string[startAt...endAt]

If the given start and end do not occur in the string, indexOf will return -1 and this version of between will return a lot of nonsense:

show between 'Your mother!', '{-', '-}'

When the program is running, and the function is called like that, the code that called it will get a string value, as it expected, and happily continue doing something with it. But the value is wrong, so whatever it ends up doing with it will also be wrong. And if you are unlucky, this wrongness only causes a problem after having passed through twenty other functions. In cases like that, it is extremely hard to find out where the problem started.

In some cases, you will be so unconcerned about these problems that you do not mind the function misbehaving when given incorrect input. For example, if you know for sure the function will only be called from a few places, and you can prove that these places give it decent input, it is generally not worth the trouble to make the function bigger and uglier so that it can handle problematic cases.

But most of the time, functions that fail ‘silently’ are hard to use, and even dangerous. What if the code calling between wants to know whether everything went well? At the moment, it can not tell, except by re-doing all the work that between did and checking the result of between with its own result. That is bad. One solution is to make between return a special value, such as false or undefined, when it fails.

between = (string, start, end) ->
  startAt = string.indexOf start
  if startAt is -1 then return
  startAt += start.length
  endAt = string.indexOf end, startAt
  if endAt is -1 then return
  string[startAt...endAt]

show between 'bu ] boo [ bah ] gzz', '[ ', ' ]'
show between 'bu [ boo bah gzz', '[ ', ' ]'

You can see that error checking does not generally make functions prettier. But now code that calls between can do something like:

prompt "Tell me something", "", (answer) ->
  parenthesized = between answer, "(", ")"
  if parenthesized?
    show "You parenthesized '#{parenthesized}'."

○•○

In many cases returning a special value is a perfectly fine way to indicate an error. It does, however, have its downsides. Firstly, what if the function can already return every possible kind of value? For example, consider this function that gets the last element from an array:

lastElement = (array) ->
  if array.length > 0
    array[array.length - 1]
  else
    undefined
show lastElement [1, 2, undefined]

So did the array have a last element? Looking at the value lastElement returns, it is impossible to say.

The second issue with returning special values is that it can sometimes lead to a whole lot of clutter. If a piece of code calls between ten times, it has to check ten times whether undefined was returned. Also, if a function calls between but does not have a strategy to recover from a failure, it will have to check the return value of between, and if it is undefined, this function can then return undefined or some other special value to its caller, who in turn also checks for this value.

Sometimes, when something strange occurs, it would be practical to just stop doing what we are doing and immediately jump back to a place that knows how to handle the problem.

Well, we are in luck, a lot of programming languages provide such a thing. Usually, it is called exception handling.

○•○

The theory behind exception handling goes like this: It is possible for code to raise (or throw) an exception, which is a value. Raising an exception somewhat resembles a super-charged return from a function — it does not just jump out of the current function, but also out of its callers, all the way up to the top-level call that started the current execution. This is called unwinding the stack. You may remember the stack of function calls that was mentioned in Functions↑. An exception zooms down this stack, throwing away all the call contexts it encounters.

If they always zoomed right down to the base of the stack, exceptions would not be of much use, they would just provide a novel way to blow up your program. Fortunately, it is possible to set obstacles for exceptions along the stack. These ‘catch’ the exception as it is zooming down, and can do something with it, after which the program continues running at the point where the exception was caught. An example:

lastElement = (array) ->
  if array.length > 0
    array[array.length - 1]
  else
    throw 'Can not take the last element' +
          ' of an empty array.' 

lastElementPlusTen = (array) ->
  lastElement(array) + 10

try
  show lastElementPlusTen []
catch error
  show 'Something went wrong: ' + error

throw is the keyword that is used to raise an exception. The keyword try sets up an obstacle for exceptions: When the code in the block after it raises an exception, the catch block will be executed. The variable named in parentheses after the word catch is the name given to the exception value inside this block.

Note that the function lastElementPlusTen completely ignores the possibility that lastElement might go wrong. This is the big advantage of exceptions — error-handling code is only necessary at the point where the error occurs, and the point where it is handled. The functions in between can forget all about it. Well, almost.

○•○

Consider the following: A function processThing wants to set a top-level variable currentThing to point to a specific thing while its body executes, so that other functions can have access to that thing too. Normally you would of course just pass the thing as an argument, but assume for a moment that that is not practical. When the function finishes, currentThing should be set back to null.

currentThing = null

processThing = (thing) ->
  if currentThing isnt null
    throw 'Oh no! We are already processing a thing!'

  currentThing = thing
  # do complicated processing...
  currentThing = null

But what if the complicated processing raises an exception? In that case the call to processThing will be thrown off the stack by the exception, and currentThing will never be reset to null. try statements can also be followed by a finally keyword, which means ‘no matter what happens, run this code after trying to run the code in the try block’. If a function has to clean something up, the cleanup code should usually be put into a finally block:

processThing = (thing) ->
  if currentThing isnt null
    throw 'Oh no! We are already processing a thing!'

  currentThing = thing
  try
    # do complicated processing...
  finally
    currentThing = null

○•○

A lot of errors in programs cause the CoffeeScript environment to raise an exception. For example:

try
  show Sasquatch
catch error
  show 'Caught: ' + error.message

In cases like this, special error objects are raised. These always have a message property containing a description of the problem. You can raise similar objects using the new keyword and the Error constructor:

try
  throw new Error 'Fire!'
catch error
  show error.toString()

○•○

When an exception goes all the way to the bottom of the stack without being caught, it gets handled by the environment. What this means differs between different browsers and engines, sometimes a description of the error is written to some kind of log, sometimes a window pops up describing the error.

The errors produced by entering code in the CoffeeScript REPL are caught by the console, and displayed along with a stack trace.

○•○

Most programmers consider exceptions purely an error-handling mechanism. In essence, though, they are just another way of influencing the control flow of a program. For example, they can be used as a kind of break statement in a recursive function. Here is a slightly strange function which determines whether an object, and the objects stored inside it, contain at least seven true values:

FoundSeven = {}
hasSevenTruths = (object) ->
  counted = 0
  count = (object) ->
    for name of object
      if object[name] is true
        if (++counted) is 7
          throw FoundSeven
      if typeof object[name] is 'object'
        count object[name]
  try
    count object
    return false
  catch exception
    if exception isnt FoundSeven
      throw exception
    return true

The inner function count is recursively called for every object that is part of the argument. When the variable counted reaches seven, there is no point in continuing to count, but just returning from the current call to count will not necessarily stop the counting, since there might be more calls below it. So what we do is just throw a value, which will cause the control to jump right out of any calls to count, and land at the catch block.

But just returning true in case of an exception is not correct. Something else might be going wrong, so we first check whether the exception is the object FoundSeven, created specifically for this purpose. If it is not, this catch block does not know how to handle it, so it raises it again.

testdata =
  a: true
  b: true
  c: false
  d:
    a: true
    b: false
    c: true
    d:
      a: true
      b:
        a: true
    e:
      a: false
      b: true
      c: true
show hasSevenTruths testdata

This is a pattern that is also common when dealing with error conditions — you have to make sure that your catch block only handles exceptions that it knows how to handle. Throwing string values, as some of the examples in this chapter do, is rarely a good idea, because it makes it hard to recognise the type of the exception. A better idea is to use unique values, such as the FoundSeven object, or to introduce a new type of objects, as described in Object Orientation↓.

○•○

Functional programming, which is the subject of this chapter, produces abstraction through clever ways of combining functions. A programmer armed with a repertoire of fundamental functions and, more importantly, the knowledge on how to use them, is much more effective than one who starts from scratch. Unfortunately, a standard CoffeeScript environment comes with deplorably few essential functions, so we have to write them ourselves or, which is often preferable, make use of somebody else’s code (more on that in Modularity↓).

In this chapter we write a set of useful functions to understand how they work and solve problems with them to understand how to use them. In later chapters we will use the larger set of functions in the Underscore library that comes with CoffeeScript.

There are other popular approaches to abstraction, most notably object-oriented programming, the subject of Object Orientation↓.

○•○

In programming a fundamental operation is performing an action on every element of an array. Many programming languages have borrowed their way of doing this from the C programming language:

size_t i;
size_t N = sizeof(thing) / sizeof(thing[0]);
for (i = 0; i < N; ++i) {
  do_something(thing[i]);
}

That is very ugly, an eyesore if you have any good taste at all. It has been improved somewhat in derived languages like C++ and JavaScript. Other programming languages can have very different approaches²¹. In CoffeeScript it becomes the reasonably pleasant:

# Say we have:
thing = [5..7]
doSomething = show

# then
for i in [0...thing.length] then doSomething thing[i]
# or better - you can see the generated code with: show -> \
for element in thing then doSomething element

Still do we have to do this over and over or can it be abstracted?

The problem is that, whereas most functions just take some values, combine them, and return something, such a loop contains a piece of code that it must execute. It is easy to write a function that goes over an array and prints out every element:

printArray = (array) ->
  for element in array
    show element
  return

printArray [7..9]

But what if we want to do something else than print? Since ‘doing something’ can be represented as a function, and functions are also values, we can pass our action as a function value:

forEach = (array, action) ->
  for element in array
    action element
  #return

forEach ['Wampeter', 'Foma', 'Granfalloon'], show
runOnDemand -> show forEach # View generated code

In CoffeeScript most statements are expressions that return a value, that is also the case with the for statement. A return statement at the end of forEach will make it return undefined. Here forEach is allowed to return its value, when we get to the map function you will see why.

By making use of an anonymous function, something just like a for loop can be written as:

sum = (numbers) ->
  total = 0
  forEach numbers, (number) -> total += number
  total
show sum [1, 10, 100]

Note that the variable total is visible inside the anonymous function because of the scoping rules. Also note that this version is hardly shorter than the for loop.

You do get a variable bound to the current element in the array, number, so there is no need to use numbers[i] anymore, and when this array is created by evaluating some expression, there is no need to store it in a variable, because it can be passed to forEach directly.

The cat-code in Data Structures↑ contains a piece like this:

paragraphs = email.split '\n'
for paragraph in paragraphs
  handleParagraph paragraph

This can now be written as…

forEach email.split('\n'), handleParagraph

On the whole, using more abstract (or ‘higher level’) constructs results in more information and less noise: The code in sum reads ‘for each number in numbers add that number to the total’, instead of… ‘there is this variable that starts at zero, and it counts upward to the length of the array called numbers, and for every value of this variable we look up the corresponding element in the array and add this to the total’.

○•○

What forEach does is take an algorithm, in this case ‘going over an array’, and abstract it. The ‘gaps’ in the algorithm, in this case, what to do for each of these elements, are filled by functions which are passed to the algorithm function.

Functions that operate on other functions are called higher-order functions. By operating on functions, they can talk about actions on a whole new level. The makeAddFunction function from Functions↑ is also a higher-order function. Instead of taking a function value as an argument, it produces a new function.

Higher-order functions can be used to generalise many algorithms that regular functions can not easily describe. When you have a repertoire of these functions at your disposal, it can help you think about your code in a clearer way: Instead of a messy set of variables and loops, you can decompose algorithms into a combination of a few fundamental algorithms, which are invoked by name, and do not have to be typed out again and again.

Being able to write what we want to do instead of how we do it means we are working at a higher level of abstraction. In practice, this means shorter, clearer, and more pleasant code.

○•○

Another useful type of higher-order function modifies the function value it is given:

negate = (func) ->
  (x) -> not func x

isNotNaN = negate isNaN
show isNotNaN NaN

The function returned by negate feeds the argument it is given to the original function func, and then negates the result. But what if the function you want to negate takes more than one argument? You can get access to any arguments passed to a function with the arguments array, but how do you call a function when you do not know how many arguments you have?

Functions²² have a method called apply, which is used for situations like this. It takes two arguments. The role of the first argument will be discussed in Object Orientation↓, for now we just use null there. The second argument is an array containing the arguments that the function must be applied to.

show Math.min.apply null, [5, 6]

negate = (func) ->
  -> not func.apply null, arguments

morethan = (x,y) -> x > y
lessthan = negate morethan
show lessthan 5, 7

Now you know the underlying arguments mechanism remember that you can also use splats…

show Math.min [5, 6]...

negate = (func) ->
  (args...) -> not func args...

morethan = (x,y) -> x > y
lessthan = negate morethan
show lessthan 5, 7

○•○

Let us look at a few more basic algorithms related to arrays. The sum function is really a variant of an algorithm which is usually called reduce or foldl:

reduce = (array, combine, base) ->
  forEach array, (element) ->
    base = combine base, element
  base

add = (a, b) -> a + b
sum = (numbers) -> reduce numbers, add, 0
show sum [1, 10, 100]

reduce combines an array into a single value by repeatedly using a function that combines an element of the array with a base value. This is exactly what sum did, so it can be made shorter by using reduce… except that addition is an operator and not a function in CoffeeScript, so we first had to put it into a function.

Exercise 21

Write a function countZeroes, which takes an array of numbers as its argument and returns the amount of zeroes that occur in it. Use reduce.

Then, write the higher-order function count, which takes an array and a test function as arguments, and returns the amount of elements in the array for which the test function returned true. Re-implement countZeroes using this function.

# Compose a solution here

countZeroes = (array) ->
  counter = (total, element) ->
    total++ if element is 0
    total
  reduce array, counter, 0

bits = [1, 0, 1, 0, 0, 1, 1, 1, 0]
show countZeroes bits

count = (test, array) ->
  reduce array, ((total, element) ->
    total + if test element then 1 else 0), 0

equals = (x) ->
  (element) -> x is element

countZeroes = (array) ->
  count equals(0), array

show countZeroes bits

One other generally useful ‘fundamental algorithm’ related to arrays is called map. It goes over an array, applying a function to every element, just like forEach. But instead of discarding the values returned by function, it builds up a new array from these values.

map = (array, func) ->
  result = []
  forEach array, (element) ->
    result.push func element
  result

show map [0.01, 2, 9.89, Math.PI], Math.round

Note that the last argument is called func, not function, this is because function is a keyword and thus not a valid variable name. And then:

# Leave out result since forEach already returns it
map = (array, func) ->
  forEach array, (element) ->
    func element

# Leave out func arguments
map = (array, func) ->
  forEach array, func

# Leave out forEach arguments
map = forEach

show map [0.01, 2, 9.89, Math.PI], Math.round

The reduction shows how nicely functions and expressions can be used to shorten a function. If we were concerned with the performance of forEach then inserting a return at the end of its definition would prevent it from collecting the results of the for comprehension and we would have to provide an implementation in map.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>A quote</title>
  </head>
  <body>
    <h1>A quote</h1>
    <blockquote>
      <p>The connection between the language in which we
      think/program and the problems and solutions we can
      imagine is very close. For this reason restricting
      language features with the intent of eliminating
      programmer errors is at best dangerous.</p>
      <p>-- Bjarne Stroustrup</p>
    </blockquote>
    <p>Mr. Stroustrup is the inventor of the C++
    programming language, but quite an insightful
    person nevertheless.</p>
    <p>Also, here is a picture of an ostrich:</p>
    <img src="../img/ostrich.jpg"/>
  </body>
</html>

# You could access a picture with its URL
imageSource = 'http://autotelicum.github.com/Smooth-CoffeeScript'
linkOstrich = "#{imageSource}/img/ostrich.jpg"

# But I will use a predefined image to avoid a server round-trip
showDocument """
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>A quote</title>
  </head>
  <body>
    <h1>A quote</h1>
    <blockquote>
      <p>The connection between the language in which we
      think/program and the problems and solutions we can
      imagine is very close. For this reason restricting
      language features with the intent of eliminating
      programmer errors is at best dangerous.</p>
      <p>-- Bjarne Stroustrup</p>
    </blockquote>
    <p>Mr. Stroustrup is the inventor of the C++
    programming language, but quite an insightful
    person nevertheless.</p>
    <p>Also, here is a picture of an ostrich:</p>
    <img src="#{ostrich}"/>
  </body>
</html>
""", 565, 420

recluseFile = """
% The Book of Programming

%% The Two Aspects

Below the surface of the machine, the program moves.
Without effort, it expands and contracts. In great harmony, 
electrons scatter and regroup. The forms on the monitor
are but ripples on the water. The essence stays invisibly
below.

When the creators built the machine, they put in the
processor and the memory. From these arise the two aspects
of the program.

The aspect of the processor is the active substance. It is
called Control. The aspect of the memory is the passive 
substance. It is called Data.

Data is made of merely bits, yet it takes complex forms.
Control consists only of simple instructions, yet it
performs difficult tasks. From the small and trivial, the
large and complex arise.

The program source is Data. Control arises from it. The
Control proceeds to create new Data. The one is born from
the other, the other is useless without the one. This is
the harmonious cycle of Data and Control.

Of themselves, Data and Control are without structure. The
programmers of old moulded their programs out of this raw
substance. Over time, the amorphous Data has crystallised
into data types, and the chaotic Control was restricted
into control structures and functions.

%% Short Sayings

When a student asked Fu-Tzu about the nature of the cycle
of Data and Control, Fu-Tzu replied 'Think of a compiler,
compiling itself.'

A student asked 'The programmers of old used only simple
machines and no programming languages, yet they made
beautiful programs. Why do we use complicated machines
and programming languages?'. Fu-Tzu replied 'The builders
of old used only sticks and clay, yet they made beautiful
huts.'

A hermit spent ten years writing a program. 'My program can
compute the motion of the stars on a 286-computer running
MS DOS', he proudly announced. 'Nobody owns a 286-computer
or uses MS DOS anymore.', Fu-Tzu responded.

Fu-Tzu had written a small program that was full of global
state and dubious shortcuts. Reading it, a student asked
'You warned us against these techniques, yet I find them in
your program. How can this be?' Fu-Tzu said 'There is no
need to fetch a water hose when the house is not on fire.'
{This is not to be read as an encouragement of sloppy
programming, but rather as a warning against neurotic
adherence to rules of thumb.}

%% Wisdom

A student was complaining about digital numbers. 'When I
take the root of two and then square it again, the result
is already inaccurate!'. Overhearing him, Fu-Tzu laughed.
'Here is a sheet of paper. Write down the precise value of
the square root of two for me.'

Fu-Tzu said 'When you cut against the grain of the wood,
much strength is needed. When you program against the grain
of a problem, much code is needed.'

Tzu-li and Tzu-ssu were boasting about the size of their
latest programs. 'Two-hundred thousand lines', said Tzu-li,
'not counting comments!'. 'Psah', said Tzu-ssu, 'mine is
almost a *million* lines already.' Fu-Tzu said 'My best
program has five hundred lines.' Hearing this, Tzu-li and
Tzu-ssu were enlightened.

A student had been sitting motionless behind his computer
for hours, frowning darkly. He was trying to write a
beautiful solution to a difficult problem, but could not
find the right approach. Fu-Tzu hit him on the back of his
head and shouted '*Type something!*' The student started
writing an ugly solution. After he had finished, he
suddenly understood the beautiful solution.

%% Progression

A beginning programmer writes his programs like an ant
builds her hill, one piece at a time, without thought for
the bigger structure. His programs will be like loose sand.
They may stand for a while, but growing too big they fall
apart{Referring to the danger of internal inconsistency
and duplicated structure in unorganised code.}.

Realising this problem, the programmer will start to spend
a lot of time thinking about structure. His programs will
be rigidly structured, like rock sculptures. They are solid,
but when they must change, violence must be done to them
{Referring to the fact that structure tends to put
restrictions on the evolution of a program.}.

The master programmer knows when to apply structure and
when to leave things in their simple form. His programs
are like clay, solid yet malleable.

%% Language

When a programming language is created, it is given
syntax and semantics. The syntax describes the form of
the program, the semantics describe the function. When the
syntax is beautiful and the semantics are clear, the
program will be like a stately tree. When the syntax is
clumsy and the semantics confusing, the program will be
like a bramble bush.

Tzu-ssu was asked to write a program in the language
called  Java, which takes a very primitive approach to
functions. Every morning, as he sat down in front of his
computer, he started complaining. All day he cursed,
blaming the language for all that went wrong. Fu-Tzu
listened for a while, and then reproached him, saying
'Every language has its own way. Follow its form, do not
try to program as if you were using another language.'
"""
show # 'The End'

paragraphs = recluseFile.split "\n\n"
show "Found #{paragraphs.length} paragraphs."

Exercise 22

Write a function processParagraph that, when given a paragraph string as its argument, checks whether this paragraph is a header. If it is, it strips of the ‘%’ characters and counts their number. Then, it returns an object with two properties, content, which contains the text inside the paragraph, and type, which contains the tag that this paragraph must be wrapped in, 'p' for regular paragraphs, 'h1' for headers with one ‘%’, and 'hX' for headers with X ‘%’ characters.

# Compose a solution here

processParagraph = (paragraph) ->
  header = 0
  while paragraph[0] is '%'
    paragraph = paragraph.slice 1
    header++
  type: if header is 0 then 'p' else 'h' + header,
  content: paragraph

show processParagraph paragraphs[0]

This is where we can try out the map function we saw earlier.

paragraphs = map recluseFile.split('\n\n'),
                 processParagraph
show paragraph for paragraph in paragraphs[0..2]

And bang, we have an array of nicely categorised paragraph objects. We are getting ahead of ourselves though, we forgot step 3 of the algorithm:

Process the text of the paragraphs themselves, splitting them into normal parts, emphasised parts, and footnotes.

Which can be decomposed into:

1. If the paragraph starts with an asterisk, take off the emphasised part and store it.
2. If the paragraph starts with an opening brace, take off the footnote and store it.
3. Otherwise, take off the part until the first emphasised part or footnote, or until the end of the string, and store it as normal text.
4. If there is anything left in the paragraph, start at 1 again.

Exercise 23

Build a function splitParagraph which, given a paragraph string, returns an array of paragraph fragments. Think of a good way to represent the fragments, they need type and content properties.

The method indexOf, which searches for a character or sub-string in a string and returns its position, or -1 if not found, will probably be useful in some way here.

This is a tricky algorithm, and there are many not-quite-correct or way-too-long ways to describe it. If you run into problems, just think about it for a minute. Try to write inner functions that perform the smaller actions that make up the algorithm.

# Compose a solution here

splitParagraph = (text) ->
  # Find character position or end of text
  indexOrEnd = (character) ->
    index = text.indexOf character
    if index is -1 then text.length else index

  # Return and remove text upto next special
  # character or end of text
  takeNormal = ->
    end = reduce map(['*', '{'], indexOrEnd),
                 Math.min, text.length
    part = text.slice 0, end
    text = text.slice end
    part

  # Return and remove text upto character
  takeUpTo = (character) ->
    end = text.indexOf character, 1
    if end is -1
      throw new Error 'Missing closing ' +
                      '"' + character + '"'
    part = text.slice 1, end
    text = text.slice end + 1
    part

  fragments = [];

  while text isnt ''
    if text[0] is '*'
      fragments.push
        type: 'emphasised',
        content: takeUpTo '*'
    else if text[0] is '{'
      fragments.push
        type: 'footnote',
        content: takeUpTo '}'
    else
      fragments.push
        type: 'normal',
        content: takeNormal()
  fragments

takeNormalAlternative = ->
  nextAsterisk = text.indexOf '*'
  nextBrace = text.indexOf '{'
  end = text.length
  if nextAsterisk isnt -1
    end = nextAsterisk
  if nextBrace isnt -1 and nextBrace < end
    end = nextBrace
  part = text.slice 0, end
  text = text.slice end
  part

We can now wire processParagraph to also split the text inside the paragraphs, my version can be modified like this:

processParagraph = (paragraph) ->
  header = 0
  while paragraph[0] is '%'
    paragraph = paragraph.slice 1
    header++
  type: if header is 0 then 'p' else 'h' + header,
  content: splitParagraph paragraph

# Adhoc test
paragraphs = map recluseFile.split('\n\n'),
                 processParagraph
show paragraph for paragraph in paragraphs[0..2]

Mapping that over the array of paragraphs gives us an array of paragraph objects, which in turn contain arrays of fragment objects. The next thing to do is to take out the footnotes, and put references to them in their place. Something like this:

extractFootnotes = (paragraphs) ->
  footnotes = []
  currentNote = 0
  replaceFootnote = (fragment) ->
    if fragment.type is 'footnote'
      ++currentNote
      footnotes.push fragment
      fragment.number = currentNote
      type: 'reference', number: currentNote
    else
      fragment

  forEach paragraphs, (paragraph) ->
    paragraph.content = map paragraph.content,
                            replaceFootnote
  footnotes

show 'Footnotes from the recluse:'
show extractFootnotes paragraphs
show paragraphs[20]

The replaceFootnote function is called on every fragment. When it gets a fragment that should stay where it is, it just returns it, but when it gets a footnote, it stores this footnote in the footnotes array, and returns a reference to it instead. In the process, every footnote and reference is also numbered.

url = "http://www.gokgs.com/"
text = "Play Go!"
linkText = "<a href=\"#{url}\">#{text}</a>"
show _.escape linkText
# Without the _.escape it becomes a link
show linkText

linkObject =
  name: 'a'
  attributes:
    href: 'http://www.gokgs.com/'
  content: ['Play Go!']

tag = (name, content, attributes) ->
  name: name
  attributes: attributes
  content: content

link = (target, text) ->
  tag "a", [text], href: target

show link "http://www.gokgs.com/", "Play Go!"

htmlDoc = (title, bodyContent) ->
  tag "html", [tag("head", [tag "title", [title]]),
               tag "body", bodyContent]

show htmlDoc "Quote", "In his house at R'lyeh " +
                      "dead Cthulu waits dreaming."

Exercise 24

Looking back at the example HTML document if necessary, write an image function which, when given the location of an image file, will create an img HTML element.

# Compose a solution here

image = (src) ->
  tag 'img', [], src: src

show image linkOstrich

When we have created a document, it will have to be reduced to a string. But building this string from the data structures we have been producing is very straightforward. The important thing is to remember to transform the special characters in the text of our document…

escapeHTML = (text) ->
  replacements = [[/&/g, '&']
                  [/"/g, '"']
                  [/</g, '&lt;']
                  [/>/g, '&gt;']]
  forEach replacements, (replace) ->
    text = text?.replace replace[0], replace[1]
  text

show escapeHTML '< " & " >'

The replace method of strings creates a new string in which all occurrences of the pattern in the first argument are replaced by the second argument, so 'Borobudur'.replace(/r/g, 'k') gives 'Bokobuduk'. Do not worry about the pattern syntax here — we will get to that in Regular Expressions↓. The escapeHTML function puts the different replacements that have to be made into an array, so that it can loop over them and apply them to the argument one by one.

Double quotes are also replaced, because we will also be using this function for the text inside the attributes of HTML tags. Those will be surrounded by double quotes, and thus must not have any double quotes inside of them.

Calling replace four times means the computer has to go over the whole string four times to check and replace its content. This is not very efficient. If we cared enough, we could write a more complex version of this function, something that resembles the splitParagraph function we saw earlier, to go over it only once. For now, we are too lazy for this. Again, Regular Expressions↓ shows a much better way to do this.

renderHTML = (element) ->
  pieces = []

  renderAttributes = (attributes) ->
    result = []
    if attributes
      for name of attributes 
        result.push ' ' + name + '="' +
          escapeHTML(attributes[name]) + '"'
    result.join ''

  render = (element) ->
    # Text node
    if typeof element is 'string'
      pieces.push escapeHTML element
    # Empty tag
    else if not element.content or
                element.content.length is 0
      pieces.push '<' + element.name +
        renderAttributes(element.attributes) + '/>'
    # Tag with content
    else
      pieces.push '<' + element.name +
        renderAttributes(element.attributes) + '>'
      forEach element.content, render
      pieces.push '</' + element.name + '>'

  render element
  pieces.join ''

show renderHTML link 'http://www.nedroid.com', 'Drawings!'