CoffeeScript Goodies

A few weeks ago, it was announced that Ruby on Rails 3.1 will include jQuery, Sass (using SCSS) and CoffeeScript as default dependencies. Among these, CoffeeScript seems to be the controversial dependency, at least if you read the comments on the actual commit (check out the funny meme pictures).

In this blog post, I’ll try to summarize my thoughts on CoffeeScript. The examples on the CoffeeScript homepage are excellent and this post should be seen as my comments to some of these examples. So far, I have only played around with CoffeeScript, to get a feel for the language, and I have enjoyed it a lot, to say the least. In short, CoffeeScript is basically just a thin layer of syntactic sugar over JavaScript, removing JavaScript’s C-inheritage and compiling to JavaScript code that would validate with JSLint. The CoffeeScript syntax feels like a good mix of Ruby, Python and JavaScript, with a little addition of C# and Haskell.

What if I don’t know JavaScript?

“Do I need to learn JavaScript before CoffeeScript, if I don’t know JavaScript?” In the end, you should definitely learn JavaScript if you don’t know it, but I see no reason not to start with CoffeeScript and see how the generated JavaScript looks like, knowing that you have a knowledge gap in why the generated code looks like it does. Then, I think you should read JavaScript: the Good Parts and start to write JavaScript that passes JSLint. I guess it all boils down to if you want to learn something through an abstraction or not, and I believe you have enough experience to know for yourself how you learn most effectively. Remember to iterate, though.

Whitespace vs. semi-colons and curlies

The first thing you notice about CoffeeScript is that it lacks curly braces and semi-colons. Instead, CoffeeScript uses significant whitespace to delimit blocks of code, just like Python, Haskell and some other languages. If you’re not used to this, this feature of the language is going to bite you first.


Please notice how slick it is to define functions in CoffeeScript:

add = (x, y) -> x + y
square = (x) -> x * x

If you know C#, this syntax is very similar to C#’s lambda syntax:

var add = (x, y) => x + y
var square = x => x * x

(Note that writing parenthesis around the argument(s) is mandatory in CoffeeScript, which is not the case for single argument lambdas in C#.)

When calling a function, parentheses are optional and arguments are separated with commas (like Ruby):

two = add 1, 1
four = square 2

A Y combinator example

Since JavaScript has more in common with Lisp or Scheme than it has with C or Java, the lightweight syntax of function definition in CoffeeScript is a big win. Also, since almost everything is an expression in CoffeeScript, return is seen much more seldom in CoffeeScript code than in JavaScript code. This example may be extreme, but look at the difference between the Y combinator (Crockford’s version) written in both JavaScript and CoffeeScript:

// Y combinator in JavaScript
function Y(le) {
    return (function (f) {
        return f(f);
    }(function (f) {
        return le(function (x) {
            return f(f)(x);
# Y combinator in CoffeeScript
Y = (le) -> ((f) -> f(f))((f) -> le (x) -> f(f) x)

If needed, could be inserted to make the code a little bit more readable.

Y = (le) -> ((f) -> f(f))
    ((f) -> le((x) -> f(f)(x)))

(If we would have omitted the , then we would have gotten an compiler error, since Y would have been defined as only the first line of code and then CoffeeScript would have found the second line as mis-indented. You could also play around with placing the parenthesis differently, if you don’t like to use .)

Other features

Another CoffeeScript feature worth mentioning is array comprehensions. An array comprehension that prints the square of all the even numbers looks like this:

numbers = (num * num for num in [1..100] when num % 2 == 0)

As I see it, array comprehensions could be useful if you have very long lists and don’t want to take the penalty of calling a function on each item, as you would do in for example jQuery, underscore.js or the native Array.forEach (implemented in some browsers).

Other features that I like are the do keyword and the fat arrow (=>). Briefly, do helps you create closures in a loop, avoiding this problem. The fat arrow (=>) binds the value of this to the context that defines the function and not the context that calls the function (see why this is needed here).


As mentioned in this interview with Jeremy Ashkenas, the creator of CoffeeScript, the drawback of using CoffeeScript is that you introduce a compile step, which makes it harder to debug. Though, Mozilla is hoping to provide better support for languages that compile to JavaScript in the future. I hope the other browser vendors follow that initiative.

And, of course, if you choose to use CoffeeScript in a project, you have yet another language for a new member of the team to learn. For experienced web developers this may not be an issue, but for developers that don’t have that much experience in web development I guess that it could be frightening at first sight.


I really like my first impressions of CoffeeScript and I’m eager to learn more about it. Please do as I did and try the embedded CoffeeScript interpreter (under the “Try CoffeeScript” link) after reading the first examples.

And remember to have fun! :)


This Post Has One Comment

  1. Trevor Burnham

    Thanks for the excellent post—I wouldn’t have thought to distill the Y Combinator to a one-liner!

Leave a Reply