CoffeeScript is an abstraction of regular JavaScript. In fact under the hood it still is just JavaScript and it compiles directly into JavaScript. In fact, on the CoffeeScript homepage they say that the Golden Rule of CoffeeScript is “It’s just JavaScript”. So why would you want to use CoffeeScript if, basically, you are just using JavaScript?

JavaScript is notoriously a bit finicky. There are a lot of gotcha’s that if you have been working with JavaScript for a while you will already know and how to get around them. So would CoffeeScript be good for you? Maybe. It may help you write a little bit quicker, but you will have the initial learning curve of learning CoffeeScript and you could probably write the equivalent JavaScript in much less time. Who then would benefit from learning CoffeeScript? Anyone who’s JavaScript foo isn’t the strongest, new developers or people just breaking into the wide world of client side development.

I would argue that still learning JavaScript is very important, but using CoffeeScript is a great way to do that because you can see what the CoffeeScript compiles into and learn best practices from that. CoffeeScript is mostly just syntactic sugar but the script that you write with CoffeeScript may be faster than the script you handwrite. Now that I have gotten those disclaimers out of the way, let’s drink the kool-aid…err coffee.

Basics

CoffeeScript is a whitespace based language, so all the indentations do matter. Since there are no curly braces or semi colons please pay attention to the spaces. The CoffeeScript complies into the JavaScript below it.

CoffeeScript

sugar = true
cream = false
lumps =0
 
if sugar 
    lumps =2 
 
makeCoffee = (s, c, l) ->
    msg = "Here is your coffee with "    
 
    if s
        msg += l + " lumps" 
 
    if c
        msg += " and cream"
 
    alert msg
 
makeCoffee(sugar, cream, lumps)

JavaScript

(function() {
  var cream, lumps, makeCoffee, sugar;

  sugar = true;

  cream = false;

  lumps = 0;

  if (sugar) {
    lumps = 2;
  }

  makeCoffee = function(s, c, l) {
    var msg;
    msg = "Here is your coffee with";
    if (s) {
      msg += l + " lumps";
    }
    if (c) {
      msg += " and cream";
    }
    return alert(msg);
  };

  makeCoffee(sugar, cream, lumps);

}).call(this);

One of the first things that you will notice is that there are no semi colons, when writing in CoffeeScript everything is based off of spaces, so you don’t have to worry about those pesky semicolons. There are also no variable types you don’t have to have var in front of your declarations. Moving down the source on the left we have an if-statement. There isn’t a whole lot there, no parentheses around the test, and no curly braces around the if-block. If we keep moving down we are defining a function named makeCoffee that takes 3 arguments. The -> denotes that this is going to be a function, and everything under that is the actual function body. After the function definition we are actually calling the makeCoffee function.

Looping in CoffeeScript

CoffeeScript

range = [1..15]
 
for i in range 
    if i % 3  == 0 
        console.log 'fizz'
        
    if i % 5 == 0
        console.log 'buzz'
 
    if i % 3 != 0 and i % 5 != 0
        console.log i
    
    console.log 

JavaScript

(function() {
  var i, range, _i, _len;

  range = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

  for (_i = 0, _len = range.length; _i < _len; _i++) {
    i = range[_i];
    if (i % 3 === 0) {
      console.log('fizz');
    }
    if (i % 5 === 0) {
      console.log('buzz');
    }
    if (i % 3 !== 0 && i % 5 !== 0) {
      console.log(i);
    }
    console.log;
  }

}).call(this);

The first line in the CoffeeScript is defining my range of values. The .. between my two numbers means to be inclusive, so the 15 is included in my range. If I added three dots … it wouldn’t be inclusive, so my range would stop at 14. I am just doing a quick fizzbuzz loop and writing out the results to a console window. The for-loop is very familiar, and shouldn’t be too hard to understand. But what amazes me is how that little bit of code translates into so much more.

Existential Coffee

Determining whether or not a variable exists isn’t trivial in regular JavaScript. It gets me a little verklempt. I’ll give you a topic…An undefined variable is neither variable nor invariable. Talk amongst yourselves.

Ok, we’re back…You can check if it the variable has a value, or if it is undefined, but that is somewhat lacking. So CoffeeScript gives you the existential operator (?) which allows you to check if a variable exists and act accordingly. Below, I am asking if cups is defined, and if it isn’t I am assigning the value of 10 to cupsOfcoffee and then putting that in an alert box.

CoffeeScript

cupsOfcoffee =  cups ? "10"
alert cupsOfcoffee

JavaScript

(function() {
  var cupsOfcoffee;

  cupsOfcoffee = typeof cups !== "undefined" && cups !== null ? cups : "10";

  alert(cupsOfcoffee);

}).call(this);

That little question mark turns out to be quite powerful, and translates to a very good null check for the variable cups. Very cool stuff.

Summary

There is a lot more to CoffeeScript that this simple overview, but I just wanted to show you some basics. For a full listing of what CoffeeScript can do I recommend checking out their site.

  • CoffeeScript is a lightweight framework over top of JavaScript
  • Creates fast and readable script that translates directly into JavaScript.
  • CoffeeScript may not be as useful for experienced JavaScript developers but for people just learning client side development it may significantly decrease the time it takes to create an app.



This is post can also be found at TCSC.com

Tagged with: