If you’re a web developer buidling applications that heavily rely on Javascript chances are you’ve heard about CoffeeScript. If you don’t, you’re probably going to love it.
CoffeeScript outputs Javascript. It seamlessly provide a elegant syntax by borrowing ideas from in Python and Ruby while keeping Javascript’s spirit intact.
And did you know that it’s currently the eleventh popular language on Github?
But wait, another language ?
Striclty speaking, CoffeeScript is a language like any other. But behind the curtains, it feels more like SASS to CSS than a truly different language to learn.
It’s quick an easy to learn, it’s light enough to not get in your way and it’s fully interoperable with Javascript. These three key points are responsible for CoffeeScript now being popular.
Another important point is that once compiled, CoffeeScript line numbering often matches to the original. It’s not always true, as some some compact CoffeeScript constructs translates into more verbose forms, but it’s nowhere comparable to the mess usually obtained from others whatever-to-javascript compilers.
It may be off by twenty lines on a long script, given small differences accumulates, but finding the original code that compiled to what is seen in Firebug is really easy as you’ll see along this article. Sourcemap is on its way, thanks to CoffeeScriptRedux
Anyway, let’s get started:
Translates to :
Just from this example can be notice the first borrowings. CoffeeScript uses tabs to handle code blocks, getting rid of curly braces like Python. There’s also the implicit return borrowed from Ruby.
The function keyword is replaced by the ->, arguments are placed at the before the keyword, in a mathematical fashion.
It also comes with very useful additions, like automatic lexical scoping. Declaring variables is implicit and it behaves exactly like the original one, given a value is affected to the variable.
The resulting Javascript is more verbose than the first example but it’s still easy to understand what’s going in both versions. That’s one of the strongest point CofeeScript has, it outputs readable Javascript, the very same one that may had been written manually.
WTF Javascript
Next to simplifying Javascript, CoffeeScript also improves it. Just have a look at how much Javascript’s == operator is a strange beast, meaning non-sense is to be expected.
Direclty quoted from Douglas Crowford’s brilliant JavaScript: The Good Parts
The trick in Javascript to avoid those is to rely on === which kindly returns false if types of operands aren’t the same or compare them as expected.
CoffeeScript throws == out through the window, == being translated to ===. Given the amount of bugs it avoids, it’s already a damn good reason to adopt CoffeeScript.
Release the kraken
Hordes of little additions that makes a programmer’s life much more easier are baked in:
CoffeeScript ain’t magical, some constructs leads to some plumbing like splats require slicing in this case. The point here is, you never read the compiled Javascript except when debugging. Slicing is sufficiently clear here to identify its CoffeeScript counterpart, allowing to easily find the original line that caused the problem.
There’s also shortened syntax, to build one liners that don’t looks like egyptian glyphs :
It’s just Javascript, with less boilerplate. while can be placed after its block, in a do-while fasion. It also comes with its negated brother, until. Of course, both also comes in a traditionnal way where the block is after the keyword.
Loop Comprehensions
To ice the cake, CoffeeScript borrows a killer feature from Python, list comprehensions :
Besides the automatical naming that prefixes underscores, it’s pretty close to the javascript that may had been written by hand. Of course it can be wrote in a more traditionnal fashion :
And many others
The list of supported constructs is available on the [official website](http://cffeescript.com) and it fits a single page. That’s how light CoffeeScript is.
You’ll find a better syntax to declare objects (hashes), array slicing and ranges, new operators and aliases, a clean syntax for class inheritance with a super keyword and even a provides a => instead of -> to handle this in callbacks.
It’s worth noticing that if => is used instead of -> in class definitions, it will bind the method to the current instance, allowing it to be passed around callbacks without having to manually binding before.
Going further
CoffeeScript is Javascript on acid. Yet it’s still Javascript. Same behavior, same logic without all the rough edges.
That also means you can **use any Javascript library**. And it works the
other way around, you can write some CoffeeScript code that will be used
by Javascript, transparently.
For example, using jQuery :
It had been packaged for every major framework in most popular
languages, so it can be quickly installed : Rails, Django 1 and 2, Symfony, Play.
And to learn more about Coffeescript, just wander on its official
website.
