Starting out with CoffeeScript

DZone 's Guide to

Starting out with CoffeeScript

· Web Dev Zone ·
Free Resource

I went to a Java conference this past weekend and there were several topics of interest. One of the speakers was talking about Underscore and his examples were all done in CoffeeScript. I had previously looked at CoffeeScript and messed around with it but after seeing it in action I decided to give it full second look. If you work with JavaScript in the browser or Nodejs on the server then CoffeeScript will work for you regardless and it makes it easier to work with than just plain JavaScript.

Keep in mind that you don’t need to use CoffeeScript, if you love JavaScript then you can keep using it of course. I’ll simply write up this article to introduce you to a few neat things CoffeeScript has to offer. Keep in mind this is but a tiny fraction of what you could gain by using CoffeeScript.

CoffeeScript apps are executed as JavaScript apps. The CoffeeScript source is converted to the equivalent JavaScript before it’s executed. So in the end your still just executing JavaScript but making full use of everything CoffeeScript offers.

A few interesting things:

  • One of the things I’ve learned is if your coming from the world of Python then you might just love CoffeeScript right from the start because CoffeeScript does away with semicolons and curly braces. Indentation is meaningful (like Python, Jade, or HAML).
  • Return statements don’t require a return keyword since the last expression is what gets returned. You can use a return statement in CoffeeScript but this is rare.
  • At the conference one of things that caught my eye was when you create new variables in CoffeeScript they are defined in the local scope, this means it’s impossible to accidentally assign a variable into the global scope (thus polluting it – this is not a good thing). You have to be very explicit in order to put a CoffeeScript variable into global scope.

I like that fact you can use the keyword or rather than || as well as the keyword and instead of &&.

A simple example in CoffeeScript:

value1 = true
value2 = true
if value1 and value2
   alert true
   alert false

The same code but in JavaScript:

value1 = true;
value2 = true;
if (value1 && value2) {
} else {

I can create a simple function in CoffeeScript that takes one parameter and then says hello:

sayHello = (name) -> alert "Hello #{name}"
sayHello 'Chad'

The same code but in JavaScript:

var sayHello;
sayHello = function(name) {
  return alert("Hello " + name);

Note: Double-quoted strings allow for interpolated values using #{ … } and single-quoted strings are literal.

Let’s create a function that takes two arguments one of which will have a default value in it. Here is the CoffeeScript:

sayHello = (name, greeting = "Hello") ->
  alert "#{greeting} #{name}!"
sayHello 'Chad', 'Bonjour'
sayHello 'Chad'

I call the function twice. The first time I supply the second argument. The next time I call it I leave it to the default. So the result is Bonjour Chad the first time and the second time its Hello Chad.

Here is the above example in JavaScript:

var sayHello;
sayHello = function(name, greeting) {
  if (greeting == null) {
    greeting = "Hello";
  alert(greeting + " " + name + "!");
sayHello('Chad', 'Bonjour');

How about we try out the automatic return functionality of CoffeeScript:

positiveOrNegative = (value) ->
  if value > 0
alert positiveOrNegative 123
alert positiveOrNegative -123

Here is the JavaScript:

var positiveOrNegative;
positiveOrNegative = function(value) {
  if (value > 0) {
    return "Positive";
  } else {
    return "Negative";

Continuing On…

You can find a good guide here and also a fun way to test your CoffeeScript interactively here (click on the Try CoffeeScript tab). The interactive tool will create the corresponding JavaScript for you as you type.

There are a couple published books available already:

More books are on the way later this year.



Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}