CoffeeScript has become increasingly popular over the last couple of years due to its adoption by the Node.js and Rails communities. Let’s take a look why it’s become the go-to language when people are wanting to write JavaScript in their apps.

What is CoffeeScript?

CoffeeScript is a language that gets compiled to JavaScript. Code in .coffee files are not interpreted at run time, like JavaScript, but are compiled into .js files.

Whether you’re writing for JavaScript for the Node.js or any given browser’s implementation, CoffeeScript can be written for any and all flavors of JavaScript.

Why CoffeeScript?

In the past, JavaScript hasn’t had the most stellar of reputations due to the copy-and-paste mentality of the 90’s and early 2000’s, it seemed that only a few had any idea what was going on. It was looked down on as a not so “serious” language. However, JavaScript as a language has a lot to offer and has some super features.

CoffeeScript makes use of the powerful features of JavaScript without learning the less known features of JavaScript by adding “syntactic sugar” to JavaScript. CoffeeScript doesn’t have the semi-colons and curly braces, similar syntax to the likes of Python and Ruby.

This means you can write less code and do things faster. It also makes it easier to read and maintain.

Due to optimizations CoffeeScript uses, when it’s compiled down, the resulting JavaScript is just as performant or in some instances it’s even more performant over hand-written code.

You can learn a lot about JavaScript by looking at the JavaScript that CoffeeScript compiles down to. If there’s something new that you see there, research it and see why CoffeScript compiles that way rather than what you’re used to seeing.

Installing CoffeeScript

Let’s install CoffeeScript so you can follow along. CoffeeScript is a Node.js package. So it depends on Node.js and the package manager (npm).

On OS X

Node.js can be installed using Homebrew, an open source Package Manager for OS X. You can review the installation process of Homebrew here.

Make sure you’re Homebrew is up to date by typing brew update in your terminal.

The Homebrew formula for Node.js is node. So to install Node.js you type in brew install node into your terminal. Follow any additional instructions that appear if you need to alter PATHs or anything like that.

Then type npm install -g coffee-script to install it globally.

On Windows

Visit Node.js’ website and press the “Install” button. It should auto-detect your flavor of Windows you’re using and an installer will start to download.

Go through the install process.

Once it’s installed open up your Command Prompt and type npm install -g coffee-script to install it globally.

And finally

Type coffee -v in your command line to see it’s been installed correctly.

Command Line Usage

The coffee compiler can be used in several ways. Here’s a couple to see what’s available.

Run and Compile

The following command will compile all your .coffee files in a folder called coffeescripts to .js files in a parallel tree structure in the javascripts folder.

coffee -o javascripts/ -c coffeescripts/

Warning

The option -c means to compile and -o means the output folder. Note the ordering is output then compile. This is because if you switch the order it doesn’t work!

Watcher

Running the above command every time you want to compile CoffeeScript files so there’s another handy option to use, -w.

coffee -w -o javascripts/ -c coffeescripts/

The watcher listens to changes to the files in the coffeescripts folder and compiles them on the fly.

If you add a new file to the coffeescripts folder should compile, however if you add a new folder and a CoffeeScript file inside that it won’t be compiled. This could change in later versions.

Joining Files

You can also compile all your .coffee files down to a single JavaScript file. This will reduce the number of HTTP request a browser has to make and improve performance. To do this use the -j option like so:

As long as you indent with some white space, the structure gets nested as you’d expect.

Ranges

Ranges are declared by two integer separated by two periods, wrapped in square brackets.

days = [1..7]

Ranges aren’t a standard object type in Javascript so they get compiled down to arrays.

To get a sub-section of an array you can pass in a range too. Want to get days from tuesday_to_friday where Monday is 1 and Sunday is 7? Since arrays are indexed zero-based, we’d start at 1 and end at 4.

You can use ranges to countdown too for example [10..0] would be 10 to 0.

Splat

A splat is a convenient way to accept multiple values as arguments to methods.

In the following example we want to award kudos points to a group of forum users for the number of posts in a given week.

The first person gets 10 points, the second gets 6, the third gets 2 and every one else will get a single point.

Let’s create a function, giveKudos With first, second, and third as parameters. For the rest well use a splat, which is the name of the variable followed by 3 periods. Within the giveKudos method let’s call an unimplemented addKudosToUser which takes two parameters, the user and the points to be added. We’re not going to worry about the implementation it’s just for illustrative purposes.

Another cool feature of looping over things in CoffeeScript is that the loop returns an array of the results of that loop. Let’s say I want to count from 0 to 100 in multiples of 10. All I do is prepend my loop with a variable assignment like so:

multiples = for num in [0..10]
num * 10

Adding parentheses you can bring it on to one line too!

multiples = (num * 10 for num in [0..10])

Conclusion

Woah! That was a lot to take in but as you can see CoffeeScript is full of tasty sugary syntax. Why not give it a bash in your next JavaScript project and see what it compiles down to under the hood?