CoffeeScript Programming with jQuery, Rails, and Node.js

As you might have noticed, CoffeeScript does away with all the trailing semicolons at the end of a line. You can still use a semicolon if you want to put two expressions on a single line. It also does away with enclosing braces (also known as curly brackets) for code blocks such as if statements, switch, and the try..catch block.

You might be wondering how the parser figures out where your code blocks start and end. The CoffeeScript compiler does this by using syntactical whitespace. This means that indentation is used for delimited code blocks instead of braces.

This is perhaps one of the most controversial features of the language. If you think about it, in almost all languages, programmers tend to already use indentation of code blocks to improve readability, so why not make it part of the syntax? This is not a new concept, and was mostly borrowed from Python. If you have any experience with significant whitespace language, you will not have any trouble with CoffeeScript indentation.

If you don't, it might take some getting used to, but it makes for code that is wonderfully readable and easy to scan, while shaving off quite a few keystrokes. I'm willing to bet that if you do take the time to get over some initial reservations you might have, you might just grow to love block indentation.

You'll see that the clause of the if statement does not need be enclosed within parentheses. The same goes for the alert function; you'll see that the single string parameter follows the function call without parentheses as well. In CoffeeScript, parentheses are optional in function calls with parameters, clauses for if..else statements, as well as while loops.

Although functions with arguments do not need parentheses, it is still a good idea to use them in cases where ambiguity might exist. The CoffeeScript community has come up with a nice idiom: wrapping the whole function call in parenthesis. The use of the alert function in CoffeeScript is shown in the following table:

alert square 2 * 2.5 + 1

alert (square 2 * 2.5) + 1

alert(square(2 * 2.5 + 1));

alert((square(2 * 2.5)) + 1);

Functions are first class objects in JavaScript. This means that when you refer to a function without parentheses, it will return the function itself, as a value. Thus, in CoffeeScript you still need to add parentheses when calling a function with no arguments.

By making these few tweaks to the syntax of JavaScript, CoffeeScript arguably already improves the readability and succinctness of your code by a big factor, and also saves you quite a lot of keystrokes.

But it has a few other tricks up its sleeve. Most programmers who have written a fair amount of JavaScript would probably agree that one of the phrases that gets typed the most frequently would have to be the function definition function(){}. Functions are really at the heart of JavaScript, yet not without its many warts.

You might have noted that in both the functions, we left out the return keyword. By default, CoffeeScript will return the last expression in your function. It will try to do this in all the paths of execution. CoffeeScript will try turning any statement (fragment of code that returns nothing) into an expression that returns a value. CoffeeScript programmers will often refer to this feature of the language by saying that everything is an expression.

This means you don't need to type return anymore, but keep in mind that this can, in many cases, alter your code subtly, because of the fact that you will always return something. If you need to return a value from a function before the last statement, you can still use return.

Function arguments can also take an optional default value. In the following code snippet you'll see that the optional value specified is assigned in the body of the generated Javascript:

square = (n=1) ->
  alert(n * n)

var square;

square = function(n) {
  if (n == null) {
    n = 1;
  }
  return alert(n * n);
};

In JavaScript, each function has an array-like structure called arguments with an indexed property for each argument that was passed to the function. You can use arguments to pass in a variable number of parameters to a function. Each parameter will be an element in arguments and thus you don't have to refer to parameters by name.

Although the arguments object acts somewhat like an array, it is in not in fact a "real" array and lacks most of the standard array methods. Often, you'll find that arguments doesn't provide the functionality needed to inspect and manipulate its elements like they are used with an array.

This has forced many programmers to use a hack by making Array.prototype.slice copy the argument object elements, or to use the jQuery.makeArray method to create a standard array, which can then be used like normal.

CoffeeScript borrows this pattern of creating an array from arguments that are represented by splats , denoted with three dots (...). These are shown in the following code snippet:

CoffeeScript:

gpaScoreAverage = (scores...) ->
   total = scores.reduce (a, b) -> a + b
   total / scores.length

alert gpaScoreAverage(65,78,81)
scores = [78, 75, 79]
alert gpaScoreAverage(scores...)

JavaScript:

var gpaScoreAverage, scores,
  __slice = [].slice;

gpaScoreAverage = function() {
  var scores, total;
  scores = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
  total = scores.reduce(function(a, b) {
    return a + b;
  });
  return total / scores.length;
};

alert(gpaScoreAverage(65, 78, 81));
scores = [78, 75, 79];
alert(gpaScoreAverage.apply(null, scores));

Notice that in the function definition, the parameter is followed by .... This tells CoffeeScript to allow for variable arguments. The function can then be invoked using either a list of parameters or an array followed by ....

In JavaScript, you create local variables by prefixing their declarations with a var keyword. If you omit it, the variable will be created in the global scope.

You'll see throughout these examples that that we didn't need to use the var keyword, and that CoffeeScript created the actual variable declarations at the top of the function in the generated JavaScript.

If you're an experienced JavaScripter, you might be wondering how you would then go about creating global variables. The simple answer is you can't.

Many people (probably including the authors of CoffeeScript) would argue that this is a good thing, because in most cases global variables should be avoided. Don't fret though, as there are ways to create top-level objects that we'll get to in a moment. But this does lead us neatly onto another benefit of CoffeeScript.

When you declare a var normally at the top level of your script in JavaScript, it will still be available globally. This can also cause havoc when you include a bunch of different JavaScript files, since you might overwrite variables declared in earlier scripts.

In JavaScript and subsequently CoffeeScript, functions act as closures, meaning that they create their own variable scope as well as having their enclosing scope variables available to them.

Throughout the years, a common pattern started to emerge where library authors wrap their entire script in an anonymous closure function that they assign to a single variable.

The CoffeeScript compiler does something similar, and will wrap scripts in an anonymous function to avoid leaking its scope. In the following sample, the JavaScript is the output of running the CoffeeScript compiler:

greet = -> salutation = 'Hi!'

(var greet;
greet = function() {
  var salutation;
  return salutation = 'Hi!';
}).call(this);

Here you can see how CoffeeScript has wrapped the function definition in its own scope.

There are, however, certain cases where you would want a variable to be available throughout your application. Usually attaching a property to an existing global object can do this. When you're in the browser, you can just create a property on the global window object.

In browser-side JavaScript, the window object represents an open window. It's globally available to all other objects and thus can be used as a global namespace or container for other objects.

While we are on the subject of objects, let's talk about another part of JavaScript that CoffeeScript makes much better: defining and using objects.

What about object inheritance? Although it's possible, normally this is such a pain in JavaScript that most programmers don't even bother, or use a third-party library with non-standard semantics.

In this example you can see how CoffeeScript makes object inheritance elegant:

CoffeeScript:

class Car extends Vehicle
  constructor: -> 
    @odometer = 0
  drive: (km) ->
    @odometer += km
    super km
car = new Car
car.drive 5
car.drive 8

alert "Odometer is at #{car.odometer}"

JavaScript:

Car = (function(_super) {
  __extends(Car, _super);
  function Car() {
    this.odometer = 0;
  }
  Car.prototype.drive = function(km) {
    this.odometer += km;
    return Car.__super__.drive.call(this, km);
  };
  return Car;
})(Vehicle);

car = new Car;
car.drive(5);
car.drive(8);
alert("Odometer is at " + car.odometer);

This example does not contain all the JavaScript code that will be generated by the compiler, but has enough to highlight the interesting parts. The extends operator is used to set up the inheritance chain between two objects and their constructors. Notice how much simpler the call to the parent class becomes with super.

As you can see, @odometer was translated to this.odometer. The @ symbol is just a shortcut for this. We'll talk about it further on in this chapter.

The class syntax is, in my opinion, where you'll find the greatest difference between CoffeeScript and its compiled JavaScript. However, most of the time it just works and once you understand it you'll rarely have to worry about the details.

If you're an experienced JavaScript programmer who still likes to do all of this yourself, you don't need to use class. CoffeeScript still provides the helpful shortcut to get at prototypes through the :: symbol, which will be replaced by .prototype in the generated JavaScript, as shown in the following code snippet:

Vehicle::stop=->  alert'Stopped'

Vehicle.prototype.stop(function() {
  return alert('Stopped');
});

Often in JavaScript, you will need to make use of a reserved word, or a keyword that is used by JavaScript. This often happens with keys for literal objects as data in JavaScript, like class or for, which you then need to enclose in quotes. CoffeeScript will automatically quote reserved words for you, and generally you don't even need to worry about it.

tag = 
  type: 'label' 
  name: 'nameLabel'
  for: 'name'
  class: 'label'

var tag;

tag = {
  type: 'label',
  name: 'nameLabel',
  "for": 'name',
  "class": 'label'
};

Notice that we don't need the braces to create object literals and can use indentation here as well. While using this style, as long as there is only one property per line, we can drop the trailing commas too.

We can also write array literals in this way:

dwarfs = [
  "Sneezy"
  "Sleepy"
  "Dopey"
  "Doc"
  "Happy"
  "Bashful"
  "Grumpy"
]

var dwarfs;

dwarfs = ["Sneezy", "Sleepy", "Dopey", "Doc", "Happy", "Bashful", "Grumpy"];

These features combined make writing JSON a breeze. Compare the following samples to see the difference:

CoffeeScript:

"firstName": "John"
"lastName": "Smith"
"age": 25
"address": 
  "streetAddress": "21 2nd Street"
  "city": "New York"
  "state": "NY"
  "postalCode": "10021"
"phoneNumber": [
  {"type": "home", "number": "212 555-1234"}
  {"type": "fax", "number": "646 555-4567"}
]

JavaScript:

({
  "firstName": "John",
  "lastName": "Smith",
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021"
  },
  "phoneNumber": [
    {
      "type": "home",
      "number": "212 555-1234"
    }, {
      "type": "fax",
      "number": "646 555-4567"
    }
  ]
});

For a language that deals with a lot of strings, JavaScript has always been pretty bad at building strings up from parts. Variables and expression values are often meant to be inserted inside a string somewhere, and this is usually done by concatenation using the + operator. If you've ever tried concatenating a couple of variables in a string, you'll know this soon becomes burdensome and hard to read.

CoffeeScript has a built-in string interpolation syntax, which is similar to many other scripting languages, but was specifically borrowed from Ruby. This is shown in the following code snippet:

greet = (name, time) -> 
  "Good #{time} #{name}!"

alert (greet 'Pete', 'morning')

var greet;

greet = function(name, time) {
  return "Good " + time + " " + name + "!";
};

alert(greet('Pete', 'morning'));

You can write any expression within #{} and its string value will be concatenated. Note that you can only use string interpolation in double-quoted strings, "". Single-quoted strings are literal and will be represented exactly how they are.

The equality operator == (and its inverse !=) in JavaScript is fraught with dangers, and a lot of times doesn't do what you would expect. This is because it will first try to coerce objects of a different type to be the same before comparing them.

It's also not transitive, meaning it might return different values of true or false depending on if a type is on the left or right of the operator. Please refer to the following code snippet:

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

Because of its inconsistent and strange behavior, respected members in the JavaScript community advise avoiding it altogether and to rather use the identity operator, === in its place. This operator will always return false if two objects are of a different type, which is consistent to how == works in many other languages.

CoffeeScript will always convert == to === and != to !===, as shown in the following implementation:

'' == '0'
0 == ''  
0 == '0' 
false == 'false'
false == '0'    
false == undefined
false == null     
null == undefined 

'' === '0';
0 === '';
0 === '0';
false === 'false';
false === '0';
false === void 0;
false === null;
null === void 0;

When you're trying to check if a variable exists and has a value (is not null or undefined) in JavaScript, you need to use this quirky idiom:

typeof a !== "undefined" && a !== null 

CoffeeScript has a nice shortcut for this, the existential operator ?, which will return false unless a variable is undefined or null.

broccoli = true;
if carrots? && broccoli?
  alert 'this is healthy'

var broccoli;

broccoli = true;

if ((typeof carrots !== "undefined" && carrots !== null) && (broccoli != null)) {
  alert('this is healthy');
}

In this example, since the compiler already knows that broccoli is defined, the ? operator will only check if it has a null value, while it will check if carrots is undefined as well as null.

The existential operator has a method call variant: ?. or just the "soak", which will allow you to swallow the method calls on null objects in a method chain, as shown here:

street = person?.getAddress()?.street

var street, _ref;

street = typeof person !== "undefined" && person !== null ? (_ref = person.getAddress()) != null ? _ref.street : void 0 : void 0;

If all of the values in the chain exist, you should get the expected result. If any of them should be null or undefined, you will get an undefined value, instead of TypeError being thrown.

Although this is a powerful technique, it can also be easily abused and make the code hard to reason with. If you have long method chains it may become hard to know just exactly where the null or undefined value came from.

The Law of Demeter , a well-known object orientation design principle, can be used to minimize this kind of complexity and improve decoupling in your code. It can be summarized as follows:

Now that we have spent some time going over some of the inadequacies and annoyances of JavaScript that CoffeeScript fixes, let's dwell on some of the other powerful features that CoffeeScript adds; some borrowed from other scripting languages and some that are unique to the language.

The while loop is still present and works more or less the same, except that it can be used as an expression, meaning it will return an array of values:

CoffeeScript:

multiplesOf = (n, times) -> 
  times++
  (n * times while times -= 1 > 0).reverse()

alert (multiplesOf 5, 10)

JavaScript:

var multiplesOf;

multiplesOf = function(n, times) {
  times++;
  return ((function() {
    var _results;
    _results = [];
    while (times -= 1 > 0) {
      _results.push(n * times);
    }
    return _results;
  })()).reverse();
};

alert(multiplesOf(5, 10));

Notice that in the previous code, the while body goes in front of the condition. This is a common idiom in CoffeeScript if the body is of only one line. You can do the same thing with if statements and list comprehensions.

We can improve the readability of the previous code slightly by using the until keyword, which is basically the negation of while, as shown here:

CoffeeScript:

multiplesOf = (n, times) -> 
  times++
  (n * times until --times == 0).reverse()

alert (multiplesOf 5, 10)

JavaScript:

var multiplesOf;

multiplesOf = function(n, times) {
  times++;
  return ((function() {
    var _results;
    _results = [];
    while (--times !== 0) {
      _results.push(n * times);
    }
    return _results;
  })()).reverse();
};

alert(multiplesOf(5, 10));

The for statement doesn't work like it does in JavaScript. CoffeeScript replaces it with list comprehensions, which were mostly borrowed from the Python language and also very similar to constructs that you'll find in functional languages such as Haskell. Comprehensions provide a more declarative way of filtering, transforming, and aggregating collections or performing an action for each element. The best way to illustrate them would be through some examples:

CoffeeScript:

flavors = ['chocolate', 'strawberry', 'vanilla']
alert flavor for flavor in flavors

favorites = ("#{flavor}!" for flavor in flavors when flavor != 'vanilla')

JavaScript:

var favorites, flavor, flavors, _i, _len;

flavors = ['chocolate', 'strawberry', 'vanilla'];

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

favorites = (function() {
  var _j, _len1, _results;
  _results = [];
  for (_j = 0, _len1 = flavors.length; _j < _len1; _j++) {
    flavor = flavors[_j];
    if (flavor !== 'vanilla') {
      _results.push("" + flavor + "!");
    }
  }
  return _results;
})();

Although they are quite simple, comprehensions have a very condensed form and do a lot in very little code. Let's break it down to its separate parts:

[action or mapping] for [selector] in [collection] when [condition] by [step]

Comprehensions are best read from right to left, starting from the in collection. The selector name is a temporary name that is given to each element as we iterate through the collection. The clause in front of the for keyword describes what you want to do with the selector name, by either calling a method with it as an argument, selecting a property or method on it, or assigning a value.

The when and by guard clauses are optional. They describe how the iteration should be filtered (elements will only be returned when their subsequent when condition is true), or which parts of the collection to select using by followed by a number. For example, by 2 will return every evenly numbered element.

We can rewrite our multiplesOf function by using by and when:

CoffeeScript:

multiplesOf = (n, times) -> 
  multiples = (m for m in [0..n*times] by n)
  multiples.shift()
  multiples

alert (multiplesOf 5, 10)

JavaScript:

var multiplesOf;

multiplesOf = function(n, times) {
  var m, multiples;
  multiples = (function() {
    var _i, _ref, _results;
    _results = [];
    for (m = _i = 0, _ref = n * times; 0 <= _ref ? _i <= _ref : _i >= _ref; m = _i += n) {
      _results.push(m);
    }
    return _results;
  })();
  multiples.shift();
  return multiples;
};

alert(multiplesOf(5, 10));

The [0..n*times] syntax is CoffeeScripts's range syntax, which was borrowed from Ruby. It will create an array with all the elements between the first and last number. When the range has two dots it will be inclusive, meaning the range will contain the specified start and end element. If it has three dots (…), it will only contain the numbers in between.

List comprehensions were one of the biggest new concepts to grasp when I started learning CoffeeScript. They are an extremely powerful feature, but it does take some time to get used to and think in comprehensions. Whenever you feel tempted to write a looping construct using the lower level while, consider using a comprehension instead. They provide just about everything you could possibly need when working with collections, and they are extremely fast compared to built-in ECMAScript array methods, such as .map() and .select().

You can use comprehensions to loop through key-value pairs in an object, using the of keyword, as shown in the following code:

CoffeeScript:

ages = 
  john: 25
  peter: 26
  joan: 23

alert "#{name} is #{age} years old" for name, age of ages

JavaScript:

var age, ages, name;

ages = {
  john: 25,
  peter: 26,
  joan: 23
};

for (name in ages) {
  age = ages[name];
  alert("" + name + " is " + age + " years old");
}