Accelerate Your JavaScript Development with CoffeeScript

Originally published at:
CoffeeScript Logo

CoffeeScript is a tiny language which compiles into JavaScript. Its expressive, yet terse syntax dramatically increases the readability of your code, which in turn makes it easier to maintain and less likely to contain bugs. In the words of its creator, Jeremy Ashkenas, CoffeeScript allows you to “write what you mean, instead of writing within the limits of historical accident”.

An additional benefit to writing CoffeeScript is that the JavaScript it compiles to will run in older versions of Internet Explorer. CoffeeScript also lets you forget about common JS pitfalls, such as trailing commas and automatic semicolon insertion.

And it’s gaining in popularity! Spurred on by its adoption in the Rails community (Rails 3.1+ ships with built-in CoffeeScript support), CoffeeScript recently entered the Tiobe index of the top 100 programming languages, where it was raked in 64th place. This was ahead of Dart (66th place) and TypeScript (not listed), both of which also compile to JavaScript.

So are you ready to give CoffeeScript a try? In this article I will demonstrate how to install it, as well as its basic concepts.


You can install CoffeeScript globally using the Node Package Manager (npm) by typing the following command in to your terminal:

npm install coffee-script -g

You should install it globally so you can later access it in terminal with the command coffee.

If you need a primer on using npm, then please refer to this recently published SitePoint article.


CoffeeScript files have the .coffee file extension. These files are either manually compiled, or you set a watcher that will compile your script each time it is saved with different contents.

To compile manually, go to the directory where the script is:

cd E:\apps\something\logic

And run the following command:

coffee  -c

This will create an app.js file in the same directory which you can then include in your project.

However, you most likely want app.js to be refreshed each time you save the file. Therefore you compile it and add a watcher by typing:

coffee -cw

Please note that in the latest version of CoffeeScript (1.9.1) there is a bug that causes the watcher not to work. All of the following examples were tested using CoffeeScript v 1.9.0.

CoffeeScript Basics

In CoffeeScript you do not have to declare variables as you do in JavaScript, although often you would need to set an initial value. We also do not have to type semi-colons ( ; ) at the end of a line.

This means that you write:

hasBody = true

instead of :

var hasBody = true;

You can also call functions without using parentheses, but that is desirable only for outermost function calls. Therefore, you can do the following:

$(".messages") .show 'slow' 

instead of:


Indentation matters a lot in CoffeeScript. You should indent with two spaces or a tab:

if hasBody
  alert "Hello Body"
  alert "No Body"

Continue reading this article on SitePoint

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.