Streamline JavaScript development with CoffeeScript

CoffeeScript is JavaScript that reads like English and is easier on the eyes and mind to develop and maintain. Read this overview of the programming language.

One of my big takeaways after attending the recent codepaLOUsa conference was the momentum behind CoffeeScript; there were a couple of sessions dedicated to the language, and all other Web relevant sessions seemed to mention it. It was clear that I could no longer ignore CoffeeScript.

While I am far from a CoffeeScript expert, I do see the power and flexibility afforded by it. This week I take a few sips -- and gulps -- of CoffeeScript to help you learn about the language.

Relax, it's just JavaScript

When I've talked to a couple of developers about CoffeeScript, they immediately arched their eyebrows and shook their heads. It is hard to argue with their cynicism -- with so many languages on the landscape, who wants to learn another one? The key is to stress that CoffeeScript is just JavaScript. The net result is JavaScript as CoffeeScript compiles one-to-one to the equivalent JavaScript.

Do we need another JavaScript?

Many hard core developers of traditional programming languages turn their noses up at JavaScript due to it being viewed as client-side scripting language. Let's face it, JavaScript is very loose with what it allows, as you can use var anywhere and everywhere. Also, all of those braces, brackets, and semicolons can be difficult to follow.

CoffeeScript brings features of modern languages such as Ruby and Python to the JavaScript world -- in fact, it is included with Ruby on Rails. The result is a language that reads like English and is easier on the eyes and mind to develop and maintain. The following list provides a quick overview of the language:

  • Compiled: CoffeeScript is compiled into industry standard JavaScript.
  • Whitespace: Like Python, whitespace is important in CoffeeScript. As an example, ending a line is preferred over the semicolon. Furthermore, indentation (for nested objects) is a programming feature and not just a way to foster code readability.
  • Less code: The removal of many JavaScript features like braces and semicolons results in less code for you to write, with the by-product being code that is easier to read.
  • Encapsulation: CoffeeScript follows the Ruby mold, which provides standard code encapsulation.
  • Variables: That's right, no more being careless with the var keyword in JavaScript. Now you have to use variables accordingly.
  • Function declaration: The JavaScript function keyword is replaced by the -> symbol(s); it makes code easier to follow once you wrap your mind around it. It does take time to become accustomed to this feature.
  • JavaScript: Since JavaScript is the target, you should still know that language to properly use CoffeeScript.

Seeing is believing

A quick example from the CoffeeScript site provides an idea of how it works. The following three lines of code create a function called fill that accepts parameters and displays a line of text in an alert window using the parameters:

fill = (container, liquid = "coffee") ->

"Filling the #{container} with #{liquid}..."

alert fill("cup")

This CoffeeScript compiles to the following JavaScript equivalent:

(function() {

var fill;

fill = function(container, liquid) {

if (liquid == null) liquid = "coffee";

return "Filling the " + container + " with " + liquid + "...";




It wraps all of the code into one function and uses the call method to execute that function. Also, all of the necessary braces and semicolons are inserted. This is one of my favorite examples of the simplicity and elegance of CoffeeScript:

countdown = (num for num in [10..1])

That simple line of code compiles into the following JavaScript:

(function() {

var countdown, num;

countdown = (function() {

var _results;

_results = [];

for (num = 10; num >= 1; num--) {



return _results;



These are plenty more examples online. Plus, if you would rather try before you buy, the CoffeeScript site has the Try CoffeeScript link in one of the main tabs. This allows you to play with the language within your browser.

Getting it

The CoffeeScript compiler and environment are freely available for most operating systems. There are excellent CoffeeScript installation instructions available online.

Once installed, CoffeeScript is available via the command line, so have your favorite text editor available. Most documentation uses the .coffee extension for CoffeeScript source files, but the compiler does not adhere to this principle. A source file can be compiled into its JavaScript equivalent via this command:

coffee -compile source_file.extension

The result is a JavaScript source file named source_file.js.

You can get a list of command-line options with the -help command (coffee -help). If no options are specified, the code in the source file is executed.

The number of CoffeeScript resources available grows daily. The resources section of the project is a good place to start and a simple Google search will yield plenty of options. There are a number of books available; the online book Smooth CoffeeScript in particular is a great resource.

A new twist on an old approach

One consistent truth of using the Internet is: If you don't like something, then hang around long enough and something new will come around. Developers often complain about JavaScript, and most never consider it a real programming language, so CoffeeScript theoretically makes it more acceptable to this group of developers as well as the rest of the community that works with JavaScript on a daily basis.

While I have only been using CoffeeScript for a short time, the syntax and approach were easy to adopt in lieu of the JavaScript alternative. There is a learning curve, but the net result seems to be efficiency in the long run. Like all technologies, time will be the true test.

Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.