CoffeeScript 101

CoffeeScript is basically a syntactically sugared re-write of JavaScript. The language has a 1-to-1 relationship with JavaScript but with a handful of symantic upgrades. It’s important to remember CoffeeScript is just JavaScript, if you are ever leary of how to do something in CoffeeScript no biggie just write it in JavaScript.

Installing CoffeeScript

The easiest way to install CoffeeScript is through NPM, but first you have to have Node.js installed. The easiest way to install Node is through Homebrew if your on a Mac. I have no idea how you do this on a linux box and god forbid if you’re using windows. If you want to compile from source there are instructions on the node.js github repository that explains the install.

Once you have node up and running you are going to want to install Node Package Manager, otherwise known as NPM. Just copy the curl command into a terminal and you now should have NPM installed. Run the command below to install CoffeeScript.

1

npm install -g coffee-script

Start Brewing A Cup

Lets create a new document and call it test.coffee. In terminal change directory to where you have you created test.coffee and then run this command.

1

coffee --watch --compile test.coffee

This command will re-compile test.coffee to test.js everytime test.coffee is saved. Pretty neat. So to start at the very basics this is what a variable looks like in CoffeeScript.

1

mySpecialVar = test

Yep that’s it. No var statement. Lets see what actually got compiled by opening up the by-product of the automatic compiling of test.coffee. In test.js you should see the following.

1
2
3
4

(function() {
  var mySpecialVar;
  mySpecialVar = "test";
}).call(this);

Woah, what the hell happened? Well the CoffeeScript compiler tries to put best practices in the JavaScript to work. So CoffeeScript doesn’t allow you to create global variables in the global namespace, it does this by wrapping everything in a self envoking anonymous function AKA a function that calls it’s self. It also adds the var keyword.

Another thing you will notice is the call(this) at the end of the function. This ensures that the compiled script has the same “this” as the scope where it’s placed. This is needed because functions normally don’t inherit their “this” object from the surrounding context. If that makes no sense at all take a look at Mozilla Docs on .call.

Conditionals

So the next thing we will cover is conditional statments. So lets write some more CoffeeScript.

1
2
3

..
if 1 > 0
    alert "Oh willy"

Notice we omit the parenthese that we would normally see in JavaScript. Also take note the indentation on the alert. Since white space is imporant in CoffeeScript just like in python, we have to indent to say that the alert statment belongs inside of the if block. White space defines what is included in the code block and where the code block ends. Let’s take a look at the compiled source.

1
2
3
4

..
if (1 > 0) {
    alert("Oh willy");
}

Pretty cool. We write pretty looking code and in return we get the parenthese and curly braces hell that everyone has grown to love.

Objects & Arrays

So lets look at data structures before we get into functions. Arrays didn’t really get too much love in CoffeeScript but its still worth to go over.

1

ary = [1, 2, 3, 4, 5]

Yep, pretty boring. Lets look at objects now.

1
2
3
4
5

obj = 
    settings:
        title: "New Title"
        meta : "some meta"
        page : 1

Thats a little bit better. It’s a familar syntax but once again we loose the curlies. Let’s look at the output.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(function() {
  var ary, mySpecialVar, obj;
  mySpecialVar = "test";
  if (1 < 0) {
    alert("Oh willy");
  }
  ary = ["2", "2"];
  obj = {
    settings: {
      title: "New Title",
      meta: "some meta",
      page: 1
    }
  };
}).call(this);

Just what you would expect. One thing to note is that all of the variables are defined at the top of the function. This is because it is generally a good practice to set the variable name spaces at the top of a function so that other developers know what are variables and what are parameters passed into the function.

Functions

Functions are pretty easy to define.

1
2

doStuff = ->
    alert "Stuff Done"

Yep all of the magic is in the almighty arrow (->). This outputs this nastyness.

1
2
3

doStuff = function() {
    return alert("Stuff Done");
};

It’s important to note that CoffeeScript does not allow you to name functions like you would in plain JavaScript this is because of an issue with IE8…go Microsoft. Another thing you didn’t write is the return on the alert. Return is added to the last object in the function. A little odd to get used to seeing this and in the cases where you are do not want to return a result by adding true or null to the buttom of the function.

Passing parameters into a function is pretty easy.

1
2

doStuffParams = (parm1, param2) ->
    console.log param1, param2

And the end result is the following.

1
2
3

doStuffParams = function(parm1, param2) {
    return console.log(param1, param2);
};

Well that’s all I wanted to share right now. It’s a lot to take in but for further reading you can check out the CoffeeScript documentation. In my next post I hope to put some of this to good use and write something like a Fibonacci Sequencer to actully show CoffeeScript in action.