CoffeeScript in a Nutshell, Part 3: CoffeeScript Functions and Classes
Like this article? We recommend
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:
try
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(err);
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
finally
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 =
accounts:
name: "John Doe"
address:
[
"200 AnyStreet"
"AnyCity"
]
{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) : [];
console.log(numbers)
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" else 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) {
console.log("freezing");
} 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" else 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)) {
console.log(Math.sqrt(value));
}
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
"freezing"
value = -400
sqrt = if value < 0
Math.sqrt -value
else
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); console.log(sqrt);
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));
}
switch-when-else
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:
console.log("west");
break;
case 1:
console.log("east");
break;
case 2:
console.log("north");
break;
case 3:
console.log("south");
break;
default:
"unknown";
}
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";
default:
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;
default:
return 300;
}
})();
console.log("result = " + result);
Loops
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) {
console.log(i++);
}
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++ loop 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) {
console.log(i++);
}
while (true) {
x = Math.random() * 5 | 0;
console.log(x);
if (x === 3) {
break;
}
}
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",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"]
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;
})();
console.log(monthAbbrNames);
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];
console.log(fruit);
}
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) {
_results.push(num);
}
}
return _results;
})();
console.log(numArray);
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;
}
}
console.log(numArray);
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) {
_results.push(num);
}
return _results;
})();
console.log(numArray);
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.
Conclusion
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.