Home > Articles > Open Source > Ajax & JavaScript

CoffeeScript in a Nutshell, Part 3: CoffeeScript Functions and Classes

  • Print
  • + Share This
One of CoffeeScript's key strengths is that almost everything is an expression. In addition to learning about this concept in Part 3 of Jeff Friesen's four-part series on CoffeeScript, you explore CoffeeScript's new and improved operators, destructuring assignments, decisions, and loops (including 'for' comprehensions).
Like this article? We recommend

Like this article? We recommend

In Part 2 of this four-part CoffeeScript series, I introduced you to CoffeeScript's basic language features: comments; semicolons and significant whitespace; variables; string interpolation, multiline strings, and block strings; object literals; arrays and ranges; and functions. This article continues the series by focusing on expressions. You can download the code from this article here.

Almost Everything Is an Expression

CoffeeScript regards almost everything as an expression—a combination of operands (such as variables, literals, or function calls) and operators. As well as JavaScript expressions, CoffeeScript supports destructuring assignment, decision, and loop expressions.

When CoffeeScript code doesn't represent an expression, the compiler treats it as a statement. When it represents an expression, the compiler often places the code in a closure, which returns a value (possibly the undefined value) that can be assigned to a variable.

For example, the try/catch/finally construct can be treated as a statement or as an expression. Consider the following example. Notice the lack of braces (code within a try, catch, or finally block is indented) and the absence of parentheses around the catch parameter:

   x = y
catch err
   console.log err
   console.log "Error:\nType: #{err.type}\nArgs: #{err.arguments}\n"+
               "Message: #{err.message}\nStackTrace: #{err.stack}\n"

When run, this example results in a reference error because y isn't defined. After outputting the err object, its properties are examined and also output. The equivalent JavaScript code (slightly modified for readability) appears below:

try {
  x = y;
} catch (_error) {
  err = _error;
  console.log(("Error:\nType: " + err.type + "\nArgs: " + err["arguments"] + "\n") +
              ("Message: " + err.message + "\nStackTrace: " + err.stack + "\n"));

The compiler inferred that this try/catch/finally example is being used in a statement context and translated it as such. However, this construct can also appear in an expression context, as follows:

console.log try
              x = y
            catch err
              console.log err
              console.log "cleaning up"

When run, this example's catch block executes first, outputting [ReferenceError: y is not defined]. Then, the finally block executes, outputting cleaning up. Finally, undefined is returned and output. Consider the following equivalent JavaScript code:

console.log((function() {
  try {
    return x = y;
  } catch (_error) {
    err = _error;
    return console.log(err);
  } finally {
    console.log("cleaning up");

Because the closure doesn't explicitly return a value, undefined is returned.

New Operators

CoffeeScript introduces the Pythonesque chained comparison operator, which tests an expression to see whether it falls between a pair of limits. If it falls between the limits, this operator returns true; otherwise, it returns false. Consider the following example:

20 < age < 50

This operator returns true when age's value is greater than 20 and less than 50. The JavaScript equivalent appears below:

(20 < age && age < 50);

CoffeeScript also introduces the existential operator (?) to check for variable existence. This postfix operator returns true when a variable is defined and not null; otherwise, it returns false. Consider the following example:

console.log PI?

The JavaScript equivalent appears below:

console.log(PI != null);

CoffeeScript provides a handy variant of this operator that can be used instead of || to supply a default value when the variable is undefined or contains null. The following example demonstrates:

circumference = PI*(diameter ? 10) # multiply PI by diameter if defined and not null
                                   # otherwise, multiply PI by 10 (the default value)

The JavaScript equivalent (slightly modified for readability) appears below:

circumference = PI *
                (typeof diameter !== "undefined" && diameter !== null ? diameter : 10);

CoffeeScript offers two more variants of the existential operator: ?= and ?.. The ?= variant provides safer conditional assignment. If a variable (the left operand) is undefined or null, the right operand is assigned to the variable; otherwise, the variable keeps its value:

a = 2
a ?= 3
console.log "a = #{a}" # output: a = 2
b = undefined
b ?= 4
console.log "b = #{b}" # output: b = 4

The JavaScript equivalent appears below:

a = 2;

if (a == null) {
  a = 3;

console.log("a = " + a);

b = void 0;

if (b == null) {
  b = 4;

console.log("b = " + b);

The ?. variant soaks up all references in a properties chain. The expected result is returned when all properties exist; otherwise, undefined is returned. The following example attempts to invoke a nonexistent game object's setup() method and then output its title property value:

console.log game.setup().title

Unsurprisingly, a browser complains about game not existing and nothing is logged. In contrast, the following example invokes setup() only when game exists—undefined is logged to the console:

console.log game?.setup().title

The JavaScript equivalent appears below:

console.log(typeof game !== "undefined" && game !== null ? game.setup().title : void 0);

Improved Operators

CoffeeScript doesn't support JavaScript's == and != operators. Instead, it substitutes === for == and !== for !=. Consider the following example:

"abc" == "def" # evaluates to false
"abc" != "def" # evaluates to true

When you compile this CoffeeScript code into JavaScript, you'll see that "abc" == "def" is converted to "abc" === "def", and that "abc" != "def" is converted to "abc" !== "def". Why these conversions?

JavaScript's == (equality) and != (inequality) operators perform any needed type conversions before comparing, and these type conversions can cause trouble. For example, '' == '0' evaluates to false, 0 == '' evaluates to true, and 0 == '0' evaluates to true.

In contrast, ===/!=== (identity) don't perform type conversions. When types differ, === returns false and !=== returns true. Here, identity is faster than equality/inequality and may return a different (but always correct) result.

CoffeeScript provides several aliases for various operators, to promote source code readability. These aliases include and (&&), or (||), not (!), is (==), isnt (!=), yes (true), no (false), on (true), and off (false). Here are a few examples:

console.log x < 10 and y > 20    # equivalent to console.log x < 10 && y > 20
console.log x >= 10 or y <= 20   # equivalent to console.log x >= 10 || y <= 20
console.log not true             # equivalent to console.log !true
console.log age is 65            # equivalent to console.log age == 65
console.log age isnt 65          # equivalent to console.log age != 65
console.log choice is yes        # equivalent to console.log choice == true
console.log choice isnt no       # equivalent to console.log choice != false
console.log lightswitch is on    # equivalent to console.log lightswitch == true
console.log lightswitch isnt off # equivalent to console.log lightswitch != fals

Destructuring Assignments

A destructuring assignment is an expression that extracts multiple values from an object literal or array and assigns them to an array of variables. CoffeeScript breaks up and matches both sides against each other, assigning right-side values to left-side variables.

Destructuring assignment is useful for swapping the values in a pair of variables. This capability is demonstrated in the following example:

x = 1
y = 2
console.log "x = #{x} and y = #{y}" # output: x = 1 and y = 2
[x, y] = [y, x]
console.log "x = #{x} and y = #{y}" # output: x = 2 and y = 1

The equivalent JavaScript code appears below:

x = 1;

y = 2;

console.log("x = " + x + " and y = " + y);

_ref = [y, x], x = _ref[0], y = _ref[1];

console.log("x = " + x + " and y = " + y);

Destructuring assignment is also useful with functions that return multiple values, as demonstrated below:

circleInfo = (radius) ->
   [Math.PI*radius*radius, Math.PI*2*radius]
[area, circumference] = circleInfo 10
console.log "area = #{area}, circumference = #{circumference}"

The circleInfo function takes a single radius argument and returns a two-element array consisting of the area followed by the circumference based on this argument. Destructuring assignment extracts the radius and circumference to separate variables.

The JavaScript equivalent appears below:

circleInfo = function(radius) {
  return [Math.PI * radius * radius, Math.PI * 2 * radius];

_ref1 = circleInfo(10), area = _ref1[0], circumference = _ref1[1];

console.log("area = " + area + ", circumference = " + circumference);

Destructuring assignment is especially useful for extracting an object's deeply nested properties, as follows:

employees =
      name: "John Doe"
          "200 AnyStreet"
{accounts: {name, address: [street, city]}} = employees
console.log "name: #{name}, street: #{street}, city: #{city}"

This example outputs the following:

name: John Doe, street: 200 AnyStreet, city: AnyCity

The equivalent JavaScript code (slightly modified for readability) appears below:

employees = {
  accounts: {
    name: "John Doe",
    address: ["200 AnyStreet", "AnyCity"]

_ref2 = employees.accounts, name = _ref2.name,
        (_ref3 = _ref2.address, street = _ref3[0], city = _ref3[1]);

console.log("name: " + name + ", street: " + street + ", city: " + city);

Finally, destructuring assignment is useful with splats:

dataline = "230,452,89,92"
[numbers...] = dataline.split ","
console.log numbers # output: [ '230', '452', '89', '92' ]

This example splits dataline into four values that it assigns to elements of the numbers array. The equivalent JavaScript code appears below:

dataline = "230,452,89,92";

_ref4 = dataline.split(","), numbers = 1 <= _ref4.length ? __slice.call(_ref4, 0) : [];


Decision Statements and Expressions

CoffeeScript provides several decision constructs that you can use to determine the flow of execution, by evaluating Boolean expressions or choosing one of multiple possibilities.

if, if-else, unless, and unless-else

You can specify if and if-else in CoffeeScript in a manner that's similar to that in JavaScript. However, you don't have to surround the Boolean expression with parentheses, and you don't specify braces to delimit blocks of code. Consider the following examples:

numSales = 85
bonus = 0
if numSales > 50
   bonus = 100
   console.log "you get a bonus"

temp = 0
if temp <= 0
   console.log "freezing"
   console.log "not freezing"

Unsurprisingly, these examples output you get a bonus followed by freezing. The JavaScript equivalent appears below:

numSales = 85;

bonus = 0;

if (numSales > 50) {
  bonus = 100;
  console.log("you get a bonus");

temp = 0;

if (temp <= 0) {
} else {
  console.log("not freezing");

CoffeeScript provides unless as a convenient alternative to specifying if !Boolean expression. Simply substitute unless for if, which I demonstrate below:

value = 100
unless value < 0
   console.log Math.sqrt value

age = 65
unless age >= 65
   console.log "you aren't old enough to receive a pension"
   console.log "you are old enough to receive a pension"

These examples output 10 followed by you are old enough to receive a pension. The JavaScript equivalent appears below:

value = 100;

if (!(value < 0)) {

age = 65;

if (!(age >= 65)) {
  console.log("you aren't old enough to receive a pension");
} else {
  console.log("you are old enough to receive a pension");

The previous examples demonstrated if, if-else, unless, and unless-else as if they were statements. However, you'll often use them in expression contexts, as follows:

temp = 40
console.log if temp <= 0

value = -400
sqrt = if value < 0
          Math.sqrt -value
          Math.sqrt value
console.log sqrt

For brevity, I've shown only if and if-else examples. The first example results in undefined being output (because temp's value is greater than 0). The second example outputs 20.

The following JavaScript code shows you how these examples are implemented:

temp = 40;

console.log(temp <= 0 ? "freezing" : void 0);

value = -400;

sqrt = value < 0 ? Math.sqrt(-value) : Math.sqrt(value);


The compiler uses JavaScript's conditional operator (?:) to implement if, if-else, unless, and unless-else expressions. It specifies void 0 (which evaluates to undefined) for the else in each of if and unless.

if-then, if-then-else, unless-then, and unless-then-else

Suppose you want to specify if, if-else, unless, or unless-else on a single line. For example, suppose you would like to specify the following:

temp = 40
console.log if temp <= 0 "freezing" else "boiling"

The compiler complains when it encounters "freezing" adjacent to 0. However, it doesn't complain when you place the keyword then between them, as follows:

temp = 40
console.log if temp <= 0 then "freezing" else "boiling"

The JavaScript equivalent appears below:

temp = 40;

console.log(temp <= 0 ? "freezing" : "boiling");

You can use then in the context of if, if-else, unless, and unless-else provided that the code appears on a single line; otherwise, the compiler complains.

Postfix if and unless

CoffeeScript provides a handy postfix form of if and unless for executing code when a Boolean expression is true or false, respectively. The following example uses this form to calculate the square root of a's value, but only for values that are greater than or equal to 0:

x = 0
a = -200
x = Math.sqrt a if a >= 0
console.log "x = #{x}" # output: x = 0
a = 200
console.log "x = "+Math.sqrt a unless a < 0 # output: x = 14.142135623730951

The equivalent JavaScript code appears below:

x = 0;

a = -200;

if (a >= 0) {
  x = Math.sqrt(a);

console.log("x = " + x);

a = 200;

if (!(a < 0)) {
  console.log("x = " + Math.sqrt(a));


JavaScript's switch statement is somewhat problematic because of the need to supply break statements to avoid fall-through from one case to another. CoffeeScript's switch-when-else equivalent avoids this problem and has the following syntax:

switch condition
   when clause
   # ...
   [else default clause]

Specify switch followed by an expression that produces an integral value. Follow this with one or more when clauses that correspond to JavaScript cases, and an optional else default clause.

The following example demonstrates switch-when-else:

switch 5*Math.random()|0 # |0 converts 5*Math.random() result to integer
   when 0 then console.log "west"
   when 1 then console.log "east"
   when 2 then console.log "north"
   when 3 then console.log "south"
   else "unknown"

This example obtains a random integer between 0 and 4 inclusive. It then outputs a direction message based on the integer. The JavaScript equivalent is shown below:

switch (5 * Math.random() | 0) {
  case 0:
  case 1:
  case 2:
  case 3:

Although you can use switch-when-else in a statement context, you'll often use it in an expression context. Here's the expression equivalent of the previous example, which assigns the chosen message to variable dir:

direction = 5*Math.random()|0
dir = switch direction
         when 0 then "west"
         when 1 then "east"
         when 2 then "north"
         when 3 then "south"
         else "unknown"
console.log "dir = #{dir}"

The equivalent JavaScript code is shown below:

direction = 5 * Math.random() | 0;

dir = (function() {
  switch (direction) {
    case 0:
      return "west";
    case 1:
      return "east";
    case 2:
      return "north";
    case 3:
      return "south";
      return "unknown";

console.log("dir = " + dir);

Notice that the switch-when-else is wrapped in a closure. The compiler uses closures where necessary.

Like Ruby, switch-when-else can have multiple comma-separated values for each when clause. A when clause is executed when any of these values match. The following example demonstrates this capability:

value = 4
result = switch value
            when 0, 1 then 100
            when 2, 3 then 200
            else 300
console.log "result = #{result}" # output: result = 300

The JavaScript equivalent appears below:

value = 4;

result = (function() {
  switch (value) {
    case 0:
    case 1:
      return 100;
    case 2:
    case 3:
      return 200;
      return 300;

console.log("result = " + result);


CoffeeScript supports repeated execution via several loop constructs: while and two variants of the while construct, and the for comprehension.

while and Its Variants

You can specify while in a manner that's similar to that of JavaScript. However, you don't have to place the Boolean expression between parentheses, and you don't use braces to delimit a block. Consider the following example:

i = 0
while i < 5
   console.log i++

The JavaScript equivalent appears below:

i = 0;

while (i < 5) {

CoffeeScript supports two while variants: until and loop. The until variant is equivalent to while not and the loop variant is equivalent to while true. Consider these examples:

i = 0
until i == 5
   console.log i++

   x = Math.random()*5|0
   console.log x
   if x == 3 then break

The second example also demonstrates the break statement for breaking out of a loop. Here's the equivalent JavaScript code:

i = 0;

while (i !== 5) {

while (true) {
  x = Math.random() * 5 | 0;
  if (x === 3) {

You typically use while and its until and loop counterparts in expression contexts. For example, the following code fragment uses a while expression to return an array of abbreviated month names, which is then output:

monthNames = ["January",
index = -1
monthAbbrNames = while ++index != monthNames.length
                    monthNames[index].substring(0, 3)
console.log monthAbbrNames

Each iteration evaluates the monthNames[index].substring(0, 3) expression, and its value is appended to the monthAbbrNames array. The following equivalent JavaScript code (slightly modified for readability) makes this obvious:

monthNames = ["January", "February", "March", "April", "May", "June", "July",
              "August", "September", "October", "November", "December"];

index = -1;

monthAbbrNames = (function() {
  var _results;

  _results = [];
  while (++index !== monthNames.length) {
    _results.push(monthNames[index].substring(0, 3));
  return _results;


As with the previous switch-when-else example, a closure is used to wrap the logic for building an array, which is returned and assigned to monthAbbrNames.

The for Alternative

Many languages support the for loop, and CoffeeScript is no different. However, it doesn't support traditional C-style for loops (for example, for (i = 0; i < 10; i++)). Instead, it supports the for-in construct, as demonstrated below:

for fruit in ['apples', 'oranges', 'bananas']
   console.log fruit

This loop repeatedly assigns an array element to fruit and outputs this variable's value. The following equivalent JavaScript code shows that this loop is implemented in terms of the traditional C-style for loop:

_ref = ['apples', 'oranges', 'bananas'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  fruit = _ref[_i];

You can obtain the current loop index by passing an extra argument, as shown below:

for fruit, i in ['apples', 'oranges', 'bananas']
   console.log fruit, i

The equivalent JavaScript code appears below:

_ref1 = ['apples', 'oranges', 'bananas'];
for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
  fruit = _ref1[i];
  console.log(fruit, i);

CoffeeScript's for loop is the basis for list comprehensions, which are constructs that concisely generate output lists by applying operations to selected members of input lists. The following example provides a simple demonstration:

console.log fruit for fruit in ['apples', 'oranges', 'bananas']

This example produces the same JavaScript code as the earlier example. Each loop iteration assigns an array element to fruit and causes console.log() to be invoked, outputting the assigned value.

List comprehensions follow set-builder notation, which the following mathematical example demonstrates:

s = { 3*x | x E N, x3 > 9 }

This example returns a set s of all numbers 3*x, where x is an element (E) in the set of natural numbers (N), for which x-cubed is greater than 9.

Think of 3*x as an output function, x as a variable, N as an input set, and x3 > 9 as a predicate, which determines those elements that are eligible for set membership. This notation is demonstrated in the following CoffeeScript example:

numArray = (num for num in [10..1] when num > 2)
console.log numArray # output: [ 10, 9, 8, 7, 6, 5, 4, 3 ]

The example specifies a when num > 2 predicate, which prevents 2 and 1 from being included in the numbers array. A predicate starts with CoffeeScript's when keyword and is followed by a Boolean expression. Predicates are optional.

The JavaScript equivalent appears below:

numArray = (function() {
  var _l, _results;

  _results = [];
  for (num = _l = 10; _l >= 1; num = --_l) {
    if (num > 2) {
  return _results;


The parentheses are necessary. Without them, the example wouldn't build an array and assign it to numArray at the end of the loop. Instead, each iteration would assign a value to numArray, overwriting the previous value. You'd end up with the following JavaScript code:

for (num = _l = 10; _l >= 1; num = --_l) {
  if (num > 2) {
    numArray = num;


Sometimes you might want to change the increment when dealing with a range-based for comprehension. CoffeeScript supplies the keyword by for accomplishing this task. Check out the following example to see how it's used:

numArray = (num for num in [1..10] by 2)
console.log numArray # output: [ 1, 3, 5, 7, 9 ]

The equivalent JavaScript code follows:

numArray = (function() {
  var _m, _results;

  _results = [];
  for (num = _m = 1; _m <= 10; num = _m += 2) {
  return _results;


Finally, you can use a for comprehension to iterate over an object literal's property names and values. Use the keyword of to indicate a comprehension over these properties, as demonstrated below:

tokens =
  else: 100
  for: 101
  if : 102
  next: 103
  then: 104
  to: 105
console.log "#{name}: #{value}" for name, value of tokens

This for comprehension generates the following output:

else: 100
for: 101
if: 102
next: 103
then: 104
to: 105

The equivalent JavaScript code appears below:

tokens = {
  "else": 100,
  "for": 101,
  "if": 102,
  next: 103,
  then: 104,
  to: 105

for (name in tokens) {
  value = tokens[name];
  console.log("" + name + ": " + value);

The keyword of generates a JavaScript for-in loop for iterating over object properties. In contrast, the keyword in (for looping over an array or range) generates a JavaScript C-style for loop.


This article introduced you to CoffeeScript's expression features. After learning that almost everything is an expression, you explored new operators, improved operators, destructuring assignments, decisions, and loops. Part 4 ends this series by exploring CoffeeScript classes and a few additional features.

  • + Share This
  • 🔖 Save To Your Account