An Introduction to CoffeeScript

Tweet

Imagine a desperate situation: you are in the land of Braughsir (adjacent to the kingdoms of Marrcup and Knoad), and in order to rescue a beautiful royalty of your preferred gender you must walk a hundred miles.

Every few steps you have to spin around. And there are mines. Dropped-semicolon mines, unclosed-brace mines, global variable mines, all magical mines waiting to silently explode and blow off your leg 10 minutes after you trip over them.

Now imagine a fairy comes to help you. It promises to halve the distance, enclose the mines in walls, and give you rocket skates. Rocket skates! This fairy is CoffeeScript. You will accept its offer. However, now that you’re convinced, you’ll need rational reasons that you can tell your boss. No worries, we have those!

Reason 1: It writes better JavaScript than you do.

The first thing you should know about CoffeeScript is that it’s just JavaScript with a shiny layer of paint. Usually you write your CoffeeScript then feed it to a compiler, which spits out JavaScript. In this article, we’ll rip off that layer of paint manually, to show the plain old JavaScript underneath.

Let’s take our first example:

x = 5

If you’re coming from a language like Ruby or Python, you’ll think nothing of this. If you’re coming from JavaScript, you’ll be a little nervous. Why? Well, here’s what that statement looks like in well-written JavaScript.

var x;
x = 5;

If you forget either the var or the semicolon, JavaScript will sometimes, but not always, stop working, sometimes in another seemingly unrelated part of the code. So unlike statically compiled languages like Java, beginners and experts alike are allowed to make stupid syntax mistakes, and unlike other dynamic languages like Ruby and Python, it’s extremely easy to make these mistakes and they often fail silently.

CoffeeScript shares the clarity of the dynamic languages, while also being able to catch your most egregious errors at compile-time, like a static language. And gotchas like missing vars and dropped semicolons? Automatically handled for you. The JavaScript code that it builds for you even passes JavaScriptLint (a style guide) without warnings.

Even if you could write code that perfect, why would you want to waste those brain cycles? If CoffeeScript did nothing else besides generate clean and fast JavaScript, it would be worth it so that I could concentrate on more important things than remembering to type out semicolons. Fortunately, CoffeeScript can do a lot more.

Reason 2: It’s JavaScript, but with less characters.

We’ll keep on going with the simple changes because those are the easiest to notice, and we don’t want you distracted with them later when we go over the more important elements. Here’s a simple example function taken from the CoffeeScript website.

square = (x) -> x * x

What’s happening here? We’re declaring a function called square, which is equal to the expression (x) -> x * x. What is this expression doing?  The important part here is the ->. Everything to the left is variables we’re feeding into the function, and everything to the right is what we’re doing with those variables. Here we suck in a variable x, and multiply it by itself. Then we call it square as a shorthand, so that we can just call square whenever we want to multiply something by itself. square(4) turns into 4 * 4, which turns into 16. JavaScript does the exact same operation, but it takes a lot longer to do it:

var square;

square = function(x) {
  return x * x;
};

Notice that nothing that was added in the JavaScript version has anything to do with squaring numbers. It’s all just noise. CoffeeScript is the noise-blocking headphones of programming languages. However, sometimes the curly braces aren’t just noise. After all, sometimes you want to write a multi-line function. How will you keep track of where it ends without curly braces? Check out another example taken from the CoffeeScript home page:

if happy and knowsIt
  clapsHands()
  chaChaCha()
else
  showIt()

You’ll notice that even though there are multiple lines, CoffeeScript still doesn’t have curly braces. It gets away with that because it is whitespace delimited. If you’re familiar with Python, Haml, or Sass, then you already know what this means. Basically, instead of using curly braces to control the flow, it looks at how many spaces and tabs are at the beginning of the line. Going in one more tab is basically like putting an opening curly brace, and going back one tab is like putting a closing curly brace. If this sounds complicated, don’t worry; 95% of the time, this is how well-styled JavaScript is spaced anyway.

Everything we’ve talked about so far has been basic JavaScript with a lot of tiny impediments removed. This is, indeed, one of the biggest and easiest to realize value propositions provided by CoffeeScript, but there is so much more, starting with classes.

Reason 3: It’s JavaScript, with a traditional class system

Every object-oriented language’s class system has quirks. JavaScript’s classes aren’t even called classes. They’re called “prototypes”. And yes, if you come from any other language, you will be confused, at least temporarily. Good news! CoffeeScript fixes that. Here’s a quick class and superclass arrangement:

No longer do we have a line-for-line translation of CoffeeScript to JavaScript. This is because there’s a lot of contortions that must be done to fit a traditional class system into JavaScript’s prototype system. Without CoffeeScript, your mind would have to perform these contortions on its own. Here’s a basic but more complete example with CoffeeScript classes, so you can start using them right away:

CoffeeScript in the Wild

Lots of the examples I’ve used have been taken from the CoffeeScript homepage. They have a nice translator there, which will take your CoffeeScript and immediately show you what the corresponding JavaScript will look like.

However, if you’re going to use it in real life, you’re going to need a little something more. If you’re using Ruby on Rails, rename your .js files to either .coffee or .js.coffee. Now you’re done. It will even minify and concatenate your JavaScript files for you. If you aren’t using Ruby on Rails, then you’re going to have to download and install node.js and its corresponding CoffeeScript package. Then set it to watch your CoffeeScript files.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Steve

    ´CoffeScript is an interesting development indeed. However, as an experienced Java and JavaScript developer, my main reservations are; CoffeScript syntax may well avoid the curlies and semicolons in favour of white spacw, but this does not make code any more readable in the long term if the app is large. Curlies and Semi Colons, have a purpose in addition to functionality, they provide readability, which aids in the creation, and maintenance of code, clear an concisely. White space delimitated languages such as python as well as CoffeScript, are critisized most in large applications, in which the indentation can become so profuse, its almost inpossible to follow the flow of the function.

    Next, the use of CoffeeScript outside Rails apps ans such like requires the inclusion of Node.js, this adds an entire additional learning curve for the budding developer, its is not at all facile to implement, and also requires a server-client environment, where normally a javascript developer, could simply code on the client side. In my opinion this obfuscates the entire learning process of JasvaScript.

  • Jeffrey Biles

    You make a very good point about how requiring the use of Node.js complicates the process. However, it’s just as valid a point that C is a bad language not only because it requires a compiler but because it obfuscates the entire learning process of assembler language. More comments in this vein from brendan eich, and douglas crockford here: http://www.hanselman.com/blog/JavaScriptisAssemblyLanguagefortheWebPart2MadnessorjustInsanity.aspx At this point, the real problem is that coffeescript tooling is less desirable than javascript tooling.

    Curlies and semicolons are a style choice. I can see that you’ve never done significant work in a language without them, so your comfort with them and discomfort without them is understandable. For me personally, they are merely clutter.

    As far as your complaint about whitespace delimitation: If you require four or five indentations to make something work, then that function is likely doing too much and is a good candidate for being broken up into smaller, more reusable functions. I’d hazard a guess that these same functions that are difficult to write with whitespace are also difficult to test.

    That’s not to say there aren’t negatives to coffeescript. There are a few situations where the whitespace delimitation has a fight with the javascript syntax, making some lines longer and more confusing than they would be in javascript. Making reusable modules is unintuitive, even more so than javascript. And, like you mentioned, the tooling isn’t quite as mature as the javascript tooling.