Since my last post My first Atom package I have been playing around with CoffeeScript and I thought I would share some of my thoughts about why you should be using CoffeeScript and what you have to gain.

The problem I didn't know I had

My first reaction to using CoffeeScript was that it was a nice and expressive way to write JavaScript. It wasn't until I went back to write some regular JavaScript that I realized that in JavaScript I'm forced to write some unnecessary characters. In CoffeeScript you don't need to use any curly braces and you don't need to write any function keywords.

Perhaps this doesn't seems to be much of an argument for switching to CoffeeScript but actual i makes your code much more readable because of much less noise in the code. If you find a technique that makes your code more readable that is a huge win. Now whenever I write JavaScript I'm constantly annoyed about how much extra characters I'm forced to write.

Get started

To get started with CoffeeScript you need to install a compiler. If you are a node.js person you can install a CoffeeScript compiler by running the following command:

npm install -g coffee-script

Then you can tell the compiler to compile your .coffee file by running:

coffee -c myFile.coffee

There are several options you can pass to the compiler and they are well documented on the CoffeeScript page.

If you like to write your code in Visual Studio you can use a great extension called Web Essentials. There is also a range of extensions for Sublime which gives you both color coding and compilation.

What is CoffeeScript?

Before I continue to talk about why you should be using CoffeeScript I thought we should take a quick look at what CoffeeScript is and what it looks like.

CoffeeScript is a language that compiles down to JavaScript so in the end you will still deliver pure JavaScript to the client and there is now interpretation at runtime. In my experience CoffeeScript will generate event better JavaScript that I can write by hand.

I have done some F# earlier and like F# CoffeeScript is tab indentation sensitive so for me CoffeeScript is a little like writing F# for the browser.

Functions

As I mentioned earlier in this post you don't need to use the function keyword in CoffeeScript, in fact you will get a compiler error if you do. So how do you declare a function in CoffeeScript?

A simple add function would look like this:

add = (x, y) -> x + y

The JavaScript equivalent would look like this:

function add(x, y){
    return x + y;
}

And you can of course call other functions from you CoffeeScript functions:

myFunction = (x,y) -> add x y

And here's the JavaScript version:

function myFunction(x, y){
    return add(x, y);
}

If/else statements

As you probably know in JavaScript there is a difference in using two or three equals signs. Normal convention in JavaScript is to always use three equals signs to avoid any problems you might encounter otherwise. But there is nobody but you to make sure that you remember this practice. With CoffeeScript you get this behavior automatically and there is even some syntax tricks to help you write more readable code.

For example you can write if statements which is very easy to read:

if 1 is 1 then alert 'True'

This is equivalent to write:

if(1 === 1){
    alert('True');
}

There is also other keywords you can use in a if statement like: and, or and isnt. So you can write statements like:

if 1 is 1 and 2 is 2 or 3 isnt 4 then alert 'True'

In JavaScript this would look something like this:

if(1 === 1 && 2 === 2 || 3 !== 4){
    alert('True');
}

A couple of years ago if you had asked me what I thought about this syntax I would propably have said that it looked a bit "chatty" but now honestly I think that this if statement is much more readable and especially if you are new to programming this syntax may make more sense to write.

Loops

In CoffeeScript a loop is very simple:

languages = ['C#', 'Java', 'F#']
for lang in languages
  alert lang

That is in my opinion a very simple way to declare and use a loop and this piece of code will compile down to the following JavaScript code:

var lang, languages, _i, _len;

languages = ['C#', 'Java', 'F#'];

for (_i = 0, _len = languages.length; _i < _len; _i++) {
  lang = languages[_i];
  alert(lang);
}

There is more and powerful stuff you can do with loops in CoffeeScript like applying a function on each item in an array, if you are interested in learning more about loops in CoffeeScript please view the documentation.

Wait, what about Typescript?

I'm a .NET guy and my job is to work with ASP.NET MVC and C# so why am I writing a blog post about why you should use CoffeeScript? Well for me Typescript is to opinionated about how to write your client side code. You either write normal JavaScript with added type checking or you write OO code for the client. I won't lie I really like JavaScript and for me CoffeeScript hides the pain of writing a lot of extra characters but lets me enjoy the dynamic nature of JavaScript with all the good and bad.

If you like to use a more OO like approach when you are programming in JavaScript there is support for using classes in CoffeeScript to.

One argument which is being used for TypeScript is "Why should I change my way to program just because I'm targeting the browser" and I really don't buy that. Scott Hanselman said "JavaScript is the new assembler of the web" and I agree with that, and I think that in the future we will see more of languages like TypeScript and CoffeeScript which builds on top of JavaScript and compiles down to pure JavaScript. But that doesn't mean that you can ignore JavaScript today, you need to understand it both the good parts as well as the bad parts in order to know what is going on beneath the surface.

For now I'm not convinced that TypeScript is for me but I like being proved wrong and maybe I will be.

Wrapping up

I have talked a little bit of my thoughts about CoffeeScript and why you should use it so I thought I would wrap up this post by listing some pros and cons with CoffeeScript.

Pros

  • Simple and easy to read syntax
  • Less noise in the code
  • Compiles to better JavaScript then you would write your self

Cons

  • Learning curve, you will spend some time in the beginning with the .coffee file and the .js file side by side. Which on the other hand will let you learn a great deal of JavaScript.
  • I have also had some issues when writing CoffeeScript in Visual Studio with mixed tabs and the compiler not generating the output I was expecting but thats a editor and extension issue.

As I have mentioned earlier I feel like I have become more productive at the same time as I'm writing less but more readable code with CoffeeScript and that's enough to convince me to start using CoffeeScript instead of pure JavaScript.

If you liked this post or disagree with me or if you have any questions please leave a comment below or ping me on Twitter: @Ridderholt.