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

Like this article? We recommend

InPart 2这四部分CoffeeScript系列,我介绍d 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 candownload the code from this article here.

Almost Everything Is an Expression

CoffeeScript regards almost everything as anexpression—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 astatement. When it represents an expression, the compiler often places the code in aclosure, which returns a value (possibly theundefinedvalue) that can be assigned to a variable.

例如,thetry/catch/finallyconstruct can be treated as a statement or as an expression. Consider the following example. Notice the lack of braces (code within atry,catch, orfinallyblock is indented) and the absence of parentheses around thecatchparameter:

试试x = y抓住犯错console.log犯错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 becauseyisn't defined. After outputting theerrobject, 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 thistry/catch/finallyexample 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'scatchblock executes first, outputting[ReferenceError: y is not defined]. Then, thefinallyblock executes, outputtingcleaning up. Finally,undefinedis 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,undefinedis returned.

New Operators

CoffeeScript introduces the Pythonesquechained 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 whenage's value is greater than20and less than50. 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:

周长=π*(直径?10) #乘以π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,undefinedis returned. The following example attempts to invoke a nonexistentgameobject'ssetup()method and then output itstitleproperty value:

console.log game.setup().title

Unsurprisingly, a browser complains aboutgamenot existing and nothing is logged. In contrast, the following example invokessetup()only whengameexists—undefinedis 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, and0 == '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 includeand(&&),or(||),not(!),is(==),isnt(!=),yes(true),no(false),on(true), andoff(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

Adestructuring assignmentis 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}"

ThecircleInfofunction takes a singleradiusargument 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 splitsdatalineinto four values that it assigns to elements of thenumbersarray. 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, andunless-else

You can specifyifandif-else在CoffeeScript的方式类似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 outputyou get a bonusfollowed byfreezing. 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 providesunlessas a convenient alternative to specifyingif !Boolean expression. Simply substituteunlessforif, 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 output10followed byyou 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 demonstratedif,if-else,unless, andunless-elseas 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 onlyifandif-elseexamples. The first example results inundefinedbeing output (becausetemp's value is greater than 0). The second example outputs20.

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

temp = 40;console.log(临时< = 0 ?“冻结”:签证官id 0); value = -400; sqrt = value < 0 ? Math.sqrt(-value) : Math.sqrt(value); console.log(sqrt);

The compiler uses JavaScript's conditional operator (?:) to implementif,if-else,unless, andunless-elseexpressions. It specifiesvoid 0(which evaluates toundefined) for theelsein each ofifandunless.

if-then,if-then-else,unless-then, andunless-then-else

Suppose you want to specifyif,if-else,unless, orunless-elseon 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 to0. However, it doesn't complain when you place the keywordthenbetween them, as follows:

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

The JavaScript equivalent appears below:

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

You can usethenin the context ofif,if-else,unless, andunless-elseprovided that the code appears on a single line; otherwise, the compiler complains.

Postfixifandunless

CoffeeScript provides a handy postfix form ofifandunlessfor executing code when a Boolean expression is true or false, respectively. The following example uses this form to calculate the square root ofa'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'sswitchstatement is somewhat problematic because of the need to supplybreakstatements to avoid fall-through from onecaseto another. CoffeeScript'sswitch-when-elseequivalent avoids this problem and has the following syntax:

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

Specifyswitchfollowed by an expression that produces an integral value. Follow this with one or morewhenclauses that correspond to JavaScriptcases, and an optionalelsedefault clause.

The following example demonstratesswitch-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 useswitch-when-elsein 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 variabledir:

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 theswitch-when-elseis wrapped in a closure. The compiler uses closures where necessary.

Like Ruby,switch-when-elsecan have multiple comma-separated values for eachwhenclause. Awhenclause 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:whileand two variants of thewhileconstruct, and theforcomprehension.

whileand Its Variants

You can specifywhilein 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 twowhilevariants:untilandloop. Theuntilvariant is equivalent towhile notand theloopvariant is equivalent towhile 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 thebreakstatement 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 usewhileand itsuntilandloop同行在表达式上下文中。例如,the following code fragment uses awhileexpression 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 themonthNames[index].substring(0, 3)expression, and its value is appended to themonthAbbrNamesarray. 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);

与之前的switch-when-elseexample, a closure is used to wrap the logic for building an array, which is returned and assigned tomonthAbbrNames.

TheforAlternative

Many languages support theforloop, and CoffeeScript is no different. However, it doesn't support traditional C-styleforloops (for example,for (i = 0; i < 10; i++)). Instead, it supports thefor-inconstruct, as demonstrated below:

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

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

_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'sforloop is the basis forlist 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 tofruitand causesconsole.log()to be invoked, outputting the assigned value.

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

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

This example returns a setsof all numbers3*x, wherexis an element (E) in the set of natural numbers (N), for whichx-cubed is greater than9.

Think of3*xas an output function,xas a variable,Nas an input set, andx³> 9as apredicateeligibl,这决定了这些元素e 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 awhen num > 2predicate, which prevents 2 and 1 from being included in the numbers array. A predicate starts with CoffeeScript'swhenkeyword 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 tonumArrayat the end of the loop. Instead, each iteration would assign a value tonumArray, 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-basedforcomprehension. CoffeeScript supplies the keywordbyfor 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 aforcomprehension to iterate over an object literal's property names and values. Use the keywordofto 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

Thisforcomprehension 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 keywordofgenerates a JavaScriptfor-inloop for iterating over object properties. In contrast, the keywordin(for looping over an array or range) generates a JavaScript C-styleforloop.

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 4ends this series by exploring CoffeeScript classes and a few additional features.