Originally published at: http://www.sitepoint.com/accelerate-javascript-development-coffeescript/
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.
Installation
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.
Compilation
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 app.coffee
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 app.coffee
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:
$(".messages").show('slow');
Indentation matters a lot in CoffeeScript. You should indent with two spaces or a tab:
if hasBody alert "Hello Body" else alert "No Body"