mirror of
https://github.com/jashkenas/coffeescript.git
synced 2022-11-09 12:23:24 -05:00
1332 lines
78 KiB
HTML
1332 lines
78 KiB
HTML
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
|
<title>CoffeeScript</title>
|
|
<link rel="stylesheet" type="text/css" href="documentation/css/docs.css" />
|
|
<link rel="stylesheet" type="text/css" href="documentation/css/idle.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<h1><sub style="font-size: 100px;">☕</sub> CoffeeScript</h1>
|
|
|
|
<p>
|
|
CoffeeScript is a little language that compiles into JavaScript. Think
|
|
of it as JavaScript's less ostentatious kid brother — the same genes,
|
|
roughly the same height, but a different sense of style. Apart from a handful of
|
|
bonus goodies, statements in CoffeeScript correspond one-to-one with their
|
|
equivalent in JavaScript, it's just another way of saying it.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Disclaimer:</b>
|
|
CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
|
|
plenty of holes in the lexer and leaks in the syntax. <i>There is no guarantee,
|
|
explicit or implied, of its suitability for any purpose.</i> That said,
|
|
it compiles into clean JavaScript (the good parts) that can use existing
|
|
JavaScript libraries seamlessly, and passes through
|
|
<a href="http://www.jslint.com/">JSLint</a> without warnings. The compiled
|
|
output is quite readable — pretty-printed, with comments
|
|
preserved intact.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Latest Version:</b>
|
|
<a href="http://gemcutter.org/gems/coffee-script">0.2.1</a>
|
|
</p>
|
|
|
|
<h2>Table of Contents</h2>
|
|
|
|
<p>
|
|
<a href="#overview">Mini Overview</a><br />
|
|
<a href="#installation">Installation and Usage</a><br />
|
|
<a href="#whitespace">Significant Whitespace</a><br />
|
|
<a href="#functions">Functions and Invocation</a><br />
|
|
<a href="#assignment">Assignment</a><br />
|
|
<a href="#objects_and_arrays">Objects and Arrays</a><br />
|
|
<a href="#lexical_scope">Lexical Scoping and Variable Safety</a><br />
|
|
<a href="#conditionals">Conditionals, Ternaries, and Conditional Assignment</a><br />
|
|
<a href="#existence">The Existence Operator</a><br />
|
|
<a href="#aliases">Aliases</a><br />
|
|
<a href="#splats">Splats...</a><br />
|
|
<a href="#arguments">Arguments are Arrays</a><br />
|
|
<a href="#while">While Loops</a><br />
|
|
<a href="#comprehensions">Comprehensions (Arrays, Objects, and Ranges)</a><br />
|
|
<a href="#slice_splice">Array Slicing and Splicing with Ranges</a><br />
|
|
<a href="#expressions">Everything is an Expression</a><br />
|
|
<a href="#inheritance">Inheritance, and Calling Super from a Subclass</a><br />
|
|
<a href="#blocks">Blocks</a><br />
|
|
<a href="#embedded">Embedded JavaScript</a><br />
|
|
<a href="#switch">Switch/When/Else</a><br />
|
|
<a href="#try">Try/Catch/Finally</a><br />
|
|
<a href="#strings">Multiline Strings</a><br />
|
|
<a href="#resources">Resources</a><br />
|
|
<a href="#contributing">Contributing</a><br />
|
|
<a href="#change_log">Change Log</a><br />
|
|
</p>
|
|
|
|
<h2 id="overview">Mini Overview</h2>
|
|
|
|
<p><i>CoffeeScript on the left, compiled JavaScript output on the right.</i></p>
|
|
|
|
<div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Assignment:</span>
|
|
number<span class="Keyword">:</span> <span class="Number">42</span>
|
|
opposite_day<span class="Keyword">:</span> <span class="BuiltInConstant">true</span>
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Conditions:</span>
|
|
number<span class="Keyword">:</span> <span class="Keyword">-</span><span class="Number">42</span> <span class="Keyword">if</span> opposite_day
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Functions:</span>
|
|
<span class="FunctionName">square</span><span class="Keyword">:</span> <span class="FunctionArgument">x</span> <span class="Storage">=></span> x <span class="Keyword">*</span> x
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Arrays:</span>
|
|
list<span class="Keyword">:</span> [<span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>]
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Objects:</span>
|
|
math<span class="Keyword">:</span> {
|
|
root<span class="Keyword">:</span> Math.sqrt
|
|
square<span class="Keyword">:</span> square
|
|
<span class="FunctionName">cube</span><span class="Keyword">:</span> <span class="FunctionArgument">x</span> <span class="Storage">=></span> x <span class="Keyword">*</span> square(x)
|
|
}
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Splats:</span>
|
|
race<span class="Keyword">:</span><span class="FunctionArgument"> winner, runners... </span><span class="Storage">=></span>
|
|
print(winner, runners)
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Existence:</span>
|
|
alert(<span class="String"><span class="String">"</span>I knew it!<span class="String">"</span></span>) <span class="Keyword">if</span> elvis<span class="Keyword">?</span>
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Array comprehensions:</span>
|
|
cubed_list<span class="Keyword">:</span> math.cube(num) <span class="Keyword">for</span> num <span class="Keyword">in</span> list
|
|
</pre><pre class="idle"><span class="Storage">var</span> __a, __b, __c, __d, cubed_list, list, math, num, number, opposite_day, race, square;
|
|
<span class="Comment"><span class="Comment">//</span> Assignment:</span>
|
|
number <span class="Keyword">=</span> <span class="Number">42</span>;
|
|
opposite_day <span class="Keyword">=</span> <span class="BuiltInConstant">true</span>;
|
|
<span class="Comment"><span class="Comment">//</span> Conditions:</span>
|
|
<span class="Keyword">if</span> (opposite_day) {
|
|
number <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">42</span>;
|
|
}
|
|
<span class="Comment"><span class="Comment">//</span> Functions:</span>
|
|
square <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">square</span>(<span class="FunctionArgument">x</span>) {
|
|
<span class="Keyword">return</span> x <span class="Keyword">*</span> x;
|
|
};
|
|
<span class="Comment"><span class="Comment">//</span> Arrays:</span>
|
|
list <span class="Keyword">=</span> [<span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>];
|
|
<span class="Comment"><span class="Comment">//</span> Objects:</span>
|
|
math <span class="Keyword">=</span> {
|
|
root: <span class="LibraryClassType">Math</span>.sqrt,
|
|
square: square,
|
|
cube: <span class="Storage">function</span> <span class="FunctionName">cube</span>(<span class="FunctionArgument">x</span>) {
|
|
<span class="Keyword">return</span> x <span class="Keyword">*</span> square(x);
|
|
}
|
|
};
|
|
<span class="Comment"><span class="Comment">//</span> Splats:</span>
|
|
race <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">race</span>(<span class="FunctionArgument">winner</span>) {
|
|
<span class="Storage">var</span> runners;
|
|
runners <span class="Keyword">=</span> <span class="LibraryClassType">Array</span>.<span class="LibraryConstant">prototype</span>.slice.<span class="LibraryFunction">call</span>(arguments, <span class="Number">1</span>);
|
|
<span class="Keyword">return</span> <span class="LibraryFunction">print</span>(winner, runners);
|
|
};
|
|
<span class="Comment"><span class="Comment">//</span> Existence:</span>
|
|
<span class="Keyword">if</span> ((<span class="Keyword">typeof</span> elvis <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">"</span>undefined<span class="String">"</span></span> <span class="Keyword">&</span><span class="Keyword">&</span> elvis <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>)) {
|
|
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>I knew it!<span class="String">"</span></span>);
|
|
}
|
|
<span class="Comment"><span class="Comment">//</span> Array comprehensions:</span>
|
|
cubed_list <span class="Keyword">=</span> (<span class="Storage">function</span>() {
|
|
__a <span class="Keyword">=</span> list;
|
|
__c <span class="Keyword">=</span> [];
|
|
<span class="Keyword">for</span> (__b <span class="Keyword">in</span> __a) {
|
|
<span class="Keyword">if</span> (__a.hasOwnProperty(__b)) {
|
|
num <span class="Keyword">=</span> __a[__b];
|
|
__d <span class="Keyword">=</span> math.cube(num);
|
|
__c.<span class="LibraryFunction">push</span>(__d);
|
|
}
|
|
}
|
|
<span class="Keyword">return</span> __c;
|
|
})();
|
|
</pre><button onclick='javascript: var __a, __b, __c, __d, cubed_list, list, math, num, number, opposite_day, race, square;
|
|
// Assignment:
|
|
number = 42;
|
|
opposite_day = true;
|
|
// Conditions:
|
|
if (opposite_day) {
|
|
number = -42;
|
|
}
|
|
// Functions:
|
|
square = function square(x) {
|
|
return x * x;
|
|
};
|
|
// Arrays:
|
|
list = [1, 2, 3, 4, 5];
|
|
// Objects:
|
|
math = {
|
|
root: Math.sqrt,
|
|
square: square,
|
|
cube: function cube(x) {
|
|
return x * square(x);
|
|
}
|
|
};
|
|
// Splats:
|
|
race = function race(winner) {
|
|
var runners;
|
|
runners = Array.prototype.slice.call(arguments, 1);
|
|
return print(winner, runners);
|
|
};
|
|
// Existence:
|
|
if ((typeof elvis !== "undefined" && elvis !== null)) {
|
|
alert("I knew it!");
|
|
}
|
|
// Array comprehensions:
|
|
cubed_list = (function() {
|
|
__a = list;
|
|
__c = [];
|
|
for (__b in __a) {
|
|
if (__a.hasOwnProperty(__b)) {
|
|
num = __a[__b];
|
|
__d = math.cube(num);
|
|
__c.push(__d);
|
|
}
|
|
}
|
|
return __c;
|
|
})();
|
|
;alert(cubed_list);'>run: cubed_list</button><br class='clear' /></div>
|
|
|
|
<p>
|
|
For a longer CoffeeScript example, check out
|
|
<a href="documentation/underscore.html">Underscore.coffee</a>, a port
|
|
of <a href="http://documentcloud.github.com/underscore/">Underscore.js</a>
|
|
to CoffeeScript, which, when compiled, can pass the complete Underscore test suite.
|
|
Or, clone the source and take a look in the
|
|
<a href="http://github.com/jashkenas/coffee-script/tree/master/examples/">examples</a> folder.
|
|
</p>
|
|
|
|
<h2 id="installation">Installation and Usage</h2>
|
|
|
|
<p>
|
|
The CoffeeScript compiler is written in pure Ruby, and is available
|
|
as a Ruby Gem.
|
|
</p>
|
|
|
|
<pre>
|
|
gem install coffee-script</pre>
|
|
|
|
<p>
|
|
Installing the gem provides the <tt>coffee</tt> command, which can
|
|
be used to compile CoffeeScript <tt>.coffee</tt> files into JavaScript, as
|
|
well as debug them. In conjunction with
|
|
<a href="http://narwhaljs.org/">Narwhal</a>, the <tt>coffee</tt>
|
|
command also provides direct evaluation and an interactive REPL.
|
|
When compiling to JavaScript, <tt>coffee</tt> writes the output
|
|
as <tt>.js</tt> files in the same directory by default, but output
|
|
can be customized with the following options:
|
|
</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td width="25%"><code>-i, --interactive</code></td>
|
|
<td>
|
|
Launch an interactive CoffeeScript session.
|
|
Requires <a href="http://narwhaljs.org/">Narwhal</a>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-r, --run</code></td>
|
|
<td>
|
|
Compile and execute scripts without saving the intermediate
|
|
JavaScript. Requires <a href="http://narwhaljs.org/">Narwhal</a>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-o, --output [DIR]</code></td>
|
|
<td>
|
|
Write out all compiled JavaScript files into the specified directory.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-w, --watch</code></td>
|
|
<td>
|
|
Watch the modification times of the coffee-scripts, recompiling as
|
|
soon as a change occurs.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-p, --print</code></td>
|
|
<td>
|
|
Instead of writing out the JavaScript as a file, print it
|
|
directly to <b>stdout</b>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-l, --lint</code></td>
|
|
<td>
|
|
If the <tt>jsl</tt> (JavaScript Lint) command is installed, use it
|
|
to check the compilation of a CoffeeScript file. (Handy in
|
|
conjunction with <tt>--watch</tt>)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-e, --eval</code></td>
|
|
<td>
|
|
Compile and print a little snippet of CoffeeScript directly from the
|
|
command line (or from <b>stdin</b>). For example:<br /><tt>coffee -e "square: x => x * x"</tt>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-t, --tokens</code></td>
|
|
<td>
|
|
Instead of parsing the CoffeeScript, just lex it, and print out the
|
|
token stream: <tt>[:IDENTIFIER, "square"], [":", ":"], [:PARAM, "x"]</tt> ...
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-v, --verbose</code></td>
|
|
<td>
|
|
As the JavaScript is being generated, print out every step of code
|
|
generation, including lexical scope and the node in the
|
|
AST.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>-n, --no-wrap</code></td>
|
|
<td>
|
|
Compile the JavaScript without the top-level function safety wrapper
|
|
or var declarations, for situations where you want to add every
|
|
variable to global scope.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--install-bundle</code></td>
|
|
<td>
|
|
Install the TextMate bundle for CoffeeScript syntax highlighting.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>
|
|
<b>Examples:</b>
|
|
</p>
|
|
|
|
<pre>
|
|
coffee path/to/script.coffee
|
|
coffee --interactive
|
|
coffee --watch --lint experimental.coffee
|
|
coffee --print app/scripts/*.coffee > concatenation.js</pre>
|
|
|
|
<h2>Language Reference</h2>
|
|
|
|
<p>
|
|
<i>
|
|
This reference is structured so that it can be read from top to bottom,
|
|
if you like. Later sections use ideas and syntax previously introduced.
|
|
Familiarity with JavaScript is assumed.
|
|
In all of the following examples, the source CoffeeScript is provided on
|
|
the left, and the direct compilation into JavaScript is on the right.
|
|
</i>
|
|
</p>
|
|
|
|
<p id="whitespace">
|
|
<b class="header">Significant Whitespace</b>
|
|
CoffeeScript uses Python-style significant whitespace: You don't need to
|
|
use semicolons <tt>;</tt> to terminate expressions, ending
|
|
the line will do just as well. Semicolons can still be used to fit
|
|
multiple expressions onto a single line. Instead of using curly braces
|
|
<tt>{ }</tt> to delimit blocks of code (like <a href="#functions">functions</a>,
|
|
<a href="#conditionals">if-statements</a>,
|
|
<a href="#switch">switch</a>, and <a href="#try">try/catch</a>),
|
|
use indentation.
|
|
</p>
|
|
|
|
<p>
|
|
You can use newlines to break up your expression into smaller pieces,
|
|
as long as CoffeeScript can tell that the line hasn't finished
|
|
(similar to how Ruby handles it). For example,
|
|
if the line ends in an operator, dot, or keyword.
|
|
</p>
|
|
|
|
<p id="functions">
|
|
<b class="header">Functions and Invocation</b>
|
|
Functions are defined by a list of parameters, an arrow, and the
|
|
function body. The empty function looks like this: <tt>=></tt>. All
|
|
functions in CoffeeScript are named, for the benefit of debug messages.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="FunctionName">square</span><span class="Keyword">:</span> <span class="FunctionArgument">x</span> <span class="Storage">=></span> x <span class="Keyword">*</span> x
|
|
<span class="FunctionName">cube</span><span class="Keyword">:</span> <span class="FunctionArgument">x</span> <span class="Storage">=></span> square(x) <span class="Keyword">*</span> x
|
|
</pre><pre class="idle"><span class="Storage">var</span> cube, square;
|
|
square <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">square</span>(<span class="FunctionArgument">x</span>) {
|
|
<span class="Keyword">return</span> x <span class="Keyword">*</span> x;
|
|
};
|
|
cube <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">cube</span>(<span class="FunctionArgument">x</span>) {
|
|
<span class="Keyword">return</span> square(x) <span class="Keyword">*</span> x;
|
|
};
|
|
</pre><button onclick='javascript: var cube, square;
|
|
square = function square(x) {
|
|
return x * x;
|
|
};
|
|
cube = function cube(x) {
|
|
return square(x) * x;
|
|
};
|
|
;alert(cube(5));'>run: cube(5)</button><br class='clear' /></div>
|
|
|
|
<p id="assignment">
|
|
<b class="header">Assignment</b>
|
|
Use a colon <tt>:</tt> to assign, as in
|
|
<a href="http://json.org">JSON</a>. Equal signs are only needed for
|
|
mathy things.
|
|
</p>
|
|
<div class='code'><pre class="idle">greeting<span class="Keyword">:</span> <span class="String"><span class="String">"</span>Hello CoffeeScript<span class="String">"</span></span>
|
|
difficulty<span class="Keyword">:</span> <span class="Number">0.5</span>
|
|
</pre><pre class="idle"><span class="Storage">var</span> difficulty, greeting;
|
|
greeting <span class="Keyword">=</span> <span class="String"><span class="String">"</span>Hello CoffeeScript<span class="String">"</span></span>;
|
|
difficulty <span class="Keyword">=</span> <span class="Number">0.5</span>;
|
|
</pre><button onclick='javascript: var difficulty, greeting;
|
|
greeting = "Hello CoffeeScript";
|
|
difficulty = 0.5;
|
|
;alert(greeting);'>run: greeting</button><br class='clear' /></div>
|
|
<p>
|
|
Declarations of new variables are pushed up to the top of the nearest
|
|
lexical scope, so that assignment may always be performed within expressions.
|
|
</p>
|
|
|
|
<p id="objects_and_arrays">
|
|
<b class="header">Objects and Arrays</b>
|
|
Object and Array literals look very similar to their JavaScript cousins.
|
|
When you spread out each assignment on a separate line, the commas are
|
|
optional. In this way, assigning object properties looks the same as
|
|
assigning local variables, and can be moved around freely. You can mix
|
|
and match the two styles.
|
|
</p>
|
|
<div class='code'><pre class="idle">song<span class="Keyword">:</span> [<span class="String"><span class="String">"</span>do<span class="String">"</span></span>, <span class="String"><span class="String">"</span>re<span class="String">"</span></span>, <span class="String"><span class="String">"</span>mi<span class="String">"</span></span>, <span class="String"><span class="String">"</span>fa<span class="String">"</span></span>, <span class="String"><span class="String">"</span>so<span class="String">"</span></span>]
|
|
|
|
ages<span class="Keyword">:</span> {
|
|
max<span class="Keyword">:</span> <span class="Number">10</span>
|
|
ida<span class="Keyword">:</span> <span class="Number">9</span>
|
|
tim<span class="Keyword">:</span> <span class="Number">11</span>
|
|
}
|
|
|
|
matrix<span class="Keyword">:</span> [
|
|
<span class="Number">1</span>, <span class="Number">0</span>, <span class="Number">1</span>
|
|
<span class="Number">0</span>, <span class="Number">0</span>, <span class="Number">1</span>
|
|
<span class="Number">1</span>, <span class="Number">1</span>, <span class="Number">0</span>
|
|
]
|
|
</pre><pre class="idle"><span class="Storage">var</span> ages, matrix, song;
|
|
song <span class="Keyword">=</span> [<span class="String"><span class="String">"</span>do<span class="String">"</span></span>, <span class="String"><span class="String">"</span>re<span class="String">"</span></span>, <span class="String"><span class="String">"</span>mi<span class="String">"</span></span>, <span class="String"><span class="String">"</span>fa<span class="String">"</span></span>, <span class="String"><span class="String">"</span>so<span class="String">"</span></span>];
|
|
ages <span class="Keyword">=</span> {
|
|
max: <span class="Number">10</span>,
|
|
ida: <span class="Number">9</span>,
|
|
tim: <span class="Number">11</span>
|
|
};
|
|
matrix <span class="Keyword">=</span> [<span class="Number">1</span>, <span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">0</span>, <span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">1</span>, <span class="Number">1</span>, <span class="Number">0</span>];
|
|
</pre><button onclick='javascript: var ages, matrix, song;
|
|
song = ["do", "re", "mi", "fa", "so"];
|
|
ages = {
|
|
max: 10,
|
|
ida: 9,
|
|
tim: 11
|
|
};
|
|
matrix = [1, 0, 1, 0, 0, 1, 1, 1, 0];
|
|
;alert(song.join(","));'>run: song.join(",")</button><br class='clear' /></div>
|
|
|
|
<p id="lexical_scope">
|
|
<b class="header">Lexical Scoping and Variable Safety</b>
|
|
The CoffeeScript compiler takes care to make sure that all of your variables
|
|
are properly declared within lexical scope — you never need to write
|
|
<tt>var</tt> yourself.
|
|
</p>
|
|
<div class='code'><pre class="idle">num<span class="Keyword">:</span> <span class="Number">1</span>
|
|
<span class="FunctionName">change_numbers</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
|
new_num<span class="Keyword">:</span> <span class="Keyword">-</span><span class="Number">1</span>
|
|
num<span class="Keyword">:</span> <span class="Number">10</span>
|
|
new_num<span class="Keyword">:</span> change_numbers()
|
|
</pre><pre class="idle"><span class="Storage">var</span> change_numbers, new_num, num;
|
|
num <span class="Keyword">=</span> <span class="Number">1</span>;
|
|
change_numbers <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">change_numbers</span>() {
|
|
<span class="Storage">var</span> new_num;
|
|
new_num <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">1</span>;
|
|
<span class="Keyword">return</span> num <span class="Keyword">=</span> <span class="Number">10</span>;
|
|
};
|
|
new_num <span class="Keyword">=</span> change_numbers();
|
|
</pre><button onclick='javascript: var change_numbers, new_num, num;
|
|
num = 1;
|
|
change_numbers = function change_numbers() {
|
|
var new_num;
|
|
new_num = -1;
|
|
return num = 10;
|
|
};
|
|
new_num = change_numbers();
|
|
;alert(new_num);'>run: new_num</button><br class='clear' /></div>
|
|
<p>
|
|
Notice how the all of the variable declarations have been pushed up to
|
|
the top of the closest scope, the first time they appear.
|
|
<b>num</b> is not redeclared within the inner function, because it's
|
|
already in scope; the <b>new_num</b> within the function, on the other hand,
|
|
should not be able to change the value of the external variable of the same name, and
|
|
therefore has a declaration of its own.
|
|
</p>
|
|
<p>
|
|
Although suppressed within this documentation for clarity, all
|
|
CoffeeScript output is wrapped in an anonymous function:
|
|
<tt>(function(){ ... })();</tt> This safety wrapper, combined with the
|
|
automatic generation of the <tt>var</tt> keyword, make it exceedingly difficult
|
|
to pollute the global namespace by accident. If you'd like to create
|
|
global variables, attach them as properties on <b>window</b>,
|
|
or on the <b>exports</b> object in CommonJS.
|
|
</p>
|
|
|
|
<p id="conditionals">
|
|
<b class="header">Conditionals, Ternaries, and Conditional Assignment</b>
|
|
<b>If/else</b> statements can be written without the use of parentheses and
|
|
curly brackets. As with functions and other block expressions,
|
|
multi-line conditionals are delimited by indentation. There's also a handy
|
|
postfix form, with the <tt>if</tt> or <tt>unless</tt> at the end.
|
|
</p>
|
|
<p>
|
|
CoffeeScript will compile <b>if</b> statements using the ternary operator
|
|
when possible, to make it easier to use the result as an expression.
|
|
</p>
|
|
<div class='code'><pre class="idle">mood<span class="Keyword">:</span> greatly_improved <span class="Keyword">if</span> singing
|
|
|
|
<span class="Keyword">if</span> happy <span class="Keyword">and</span> knows_it
|
|
claps_hands()
|
|
cha_cha_cha()
|
|
|
|
date<span class="Keyword">:</span> <span class="Keyword">if</span> friday <span class="Keyword">then</span> sue <span class="Keyword">else</span> jill
|
|
|
|
expensive <span class="Keyword">||</span><span class="Keyword">=</span> do_the_math()
|
|
</pre><pre class="idle"><span class="Storage">var</span> date, mood;
|
|
<span class="Keyword">if</span> (singing) {
|
|
mood <span class="Keyword">=</span> greatly_improved;
|
|
}
|
|
<span class="Keyword">if</span> (happy <span class="Keyword">&</span><span class="Keyword">&</span> knows_it) {
|
|
claps_hands();
|
|
cha_cha_cha();
|
|
}
|
|
date <span class="Keyword">=</span> friday ? sue : jill;
|
|
expensive <span class="Keyword">=</span> expensive <span class="Keyword">||</span> do_the_math();
|
|
</pre><br class='clear' /></div>
|
|
<p>
|
|
The conditional assignment operators are included: <tt>||=</tt>,
|
|
which only assigns a value to a variable if the variable's current value
|
|
is falsy, and <tt>&&=</tt>, which only replaces the value of
|
|
truthy variables.
|
|
</p>
|
|
|
|
<p id="existence">
|
|
<b class="header">The Existence Operator</b>
|
|
It's a little difficult to check for the existence of a variable in
|
|
JavaScript. <tt>if (variable) ...</tt> comes close, but fails for zero,
|
|
the empty string, and false. The existence operator <tt>?</tt> returns true unless
|
|
a variable is <b>null</b> or <b>undefined</b>, which makes it analogous
|
|
to Ruby's <tt>nil?</tt>
|
|
</p>
|
|
<div class='code'><pre class="idle">solipsism<span class="Keyword">:</span> <span class="BuiltInConstant">true</span> <span class="Keyword">if</span> mind<span class="Keyword">?</span> <span class="Keyword">and</span> <span class="Keyword">not</span> world<span class="Keyword">?</span>
|
|
</pre><pre class="idle"><span class="Storage">var</span> solipsism;
|
|
<span class="Keyword">if</span> ((<span class="Keyword">typeof</span> mind <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">"</span>undefined<span class="String">"</span></span> <span class="Keyword">&</span><span class="Keyword">&</span> mind <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>) <span class="Keyword">&</span><span class="Keyword">&</span> <span class="Keyword">!</span>(<span class="Keyword">typeof</span> world <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">"</span>undefined<span class="String">"</span></span> <span class="Keyword">&</span><span class="Keyword">&</span> world <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>)) {
|
|
solipsism <span class="Keyword">=</span> <span class="BuiltInConstant">true</span>;
|
|
}
|
|
</pre><br class='clear' /></div>
|
|
|
|
<p id="aliases">
|
|
<b class="header">Aliases</b>
|
|
Because the <tt>==</tt> operator frequently causes undesirable coercion,
|
|
is intransitive, and has a different meaning than in other languages,
|
|
CoffeeScript compiles <tt>==</tt> into <tt>===</tt>, and <tt>!=</tt> into
|
|
<tt>!==</tt>.
|
|
In addition, <tt>is</tt> compiles into <tt>===</tt>,
|
|
and <tt>isnt</tt> into <tt>!==</tt>.
|
|
</p>
|
|
<p>
|
|
You can use <tt>not</tt> as an alias for <tt>!</tt>.
|
|
</p>
|
|
<p>
|
|
For logic, <tt>and</tt> compiles to <tt>&&</tt>, and <tt>or</tt>
|
|
into <tt>||</tt>.
|
|
</p>
|
|
<p>
|
|
Instead of a newline or semicolon, <tt>then</tt> can be used to separate
|
|
conditions from expressions, in <b>while</b>,
|
|
<b>if</b>/<b>else</b>, and <b>switch</b>/<b>when</b> statements.
|
|
</p>
|
|
<p>
|
|
As in <a href="http://yaml.org/">YAML</a>, <tt>on</tt> and <tt>yes</tt>
|
|
are the same as boolean <tt>true</tt>, while <tt>off</tt> and <tt>no</tt> are boolean <tt>false</tt>.
|
|
</p>
|
|
<p>
|
|
For single-line statements, <tt>unless</tt> can be used as the inverse of <tt>if</tt>.
|
|
</p>
|
|
<div class='code'><pre class="idle">launch() <span class="Keyword">if</span> ignition <span class="Keyword">is</span> <span class="BuiltInConstant">on</span>
|
|
|
|
volume<span class="Keyword">:</span> <span class="Number">10</span> <span class="Keyword">if</span> band <span class="Keyword">isnt</span> spinal_tap
|
|
|
|
let_the_wild_rumpus_begin() <span class="Keyword">unless</span> answer <span class="Keyword">is</span> <span class="BuiltInConstant">no</span>
|
|
|
|
<span class="Keyword">if</span> car.speed <span class="Keyword"><</span> speed_limit <span class="Keyword">then</span> accelerate()
|
|
</pre><pre class="idle"><span class="Storage">var</span> volume;
|
|
<span class="Keyword">if</span> (ignition <span class="Keyword">===</span> <span class="BuiltInConstant">true</span>) {
|
|
launch();
|
|
}
|
|
<span class="Keyword">if</span> (band <span class="Keyword">!</span><span class="Keyword">==</span> spinal_tap) {
|
|
volume <span class="Keyword">=</span> <span class="Number">10</span>;
|
|
}
|
|
<span class="Keyword">if</span> (<span class="Keyword">!</span>(answer <span class="Keyword">===</span> <span class="BuiltInConstant">false</span>)) {
|
|
let_the_wild_rumpus_begin();
|
|
}
|
|
car.speed <span class="Keyword"><</span> speed_limit ? accelerate() : <span class="BuiltInConstant">null</span>;
|
|
</pre><br class='clear' /></div>
|
|
|
|
<p id="splats">
|
|
<b class="header">Splats...</b>
|
|
The JavaScript <b>arguments object</b> is a useful way to work with
|
|
functions that accept variable numbers of arguments. CoffeeScript provides
|
|
splats <tt>...</tt>, both for function definition as well as invocation,
|
|
making variable arguments a little bit more palatable.
|
|
</p>
|
|
<div class='code'><pre class="idle">gold<span class="Keyword">:</span> silver<span class="Keyword">:</span> the_field<span class="Keyword">:</span> <span class="String"><span class="String">"</span>unknown<span class="String">"</span></span>
|
|
|
|
medalists<span class="Keyword">:</span><span class="FunctionArgument"> first, second, rest... </span><span class="Storage">=></span>
|
|
gold<span class="Keyword">:</span> first
|
|
silver<span class="Keyword">:</span> second
|
|
the_field<span class="Keyword">:</span> rest
|
|
|
|
contenders<span class="Keyword">:</span> [
|
|
<span class="String"><span class="String">"</span>Michael Phelps<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Liu Xiang<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Yao Ming<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Allyson Felix<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Shawn Johnson<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Roman Sebrle<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Guo Jingjing<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Tyson Gay<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Asafa Powell<span class="String">"</span></span>
|
|
<span class="String"><span class="String">"</span>Usain Bolt<span class="String">"</span></span>
|
|
]
|
|
|
|
medalists(contenders...)
|
|
|
|
alert(<span class="String"><span class="String">"</span>Gold: <span class="String">"</span></span> <span class="Keyword">+</span> gold)
|
|
alert(<span class="String"><span class="String">"</span>Silver: <span class="String">"</span></span> <span class="Keyword">+</span> silver)
|
|
alert(<span class="String"><span class="String">"</span>The Field: <span class="String">"</span></span> <span class="Keyword">+</span> the_field)
|
|
</pre><pre class="idle"><span class="Storage">var</span> contenders, gold, medalists, silver, the_field;
|
|
gold <span class="Keyword">=</span> silver <span class="Keyword">=</span> the_field <span class="Keyword">=</span> <span class="String"><span class="String">"</span>unknown<span class="String">"</span></span>;
|
|
medalists <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">medalists</span>(<span class="FunctionArgument">first, second</span>) {
|
|
<span class="Storage">var</span> rest;
|
|
rest <span class="Keyword">=</span> <span class="LibraryClassType">Array</span>.<span class="LibraryConstant">prototype</span>.slice.<span class="LibraryFunction">call</span>(arguments, <span class="Number">2</span>);
|
|
gold <span class="Keyword">=</span> first;
|
|
silver <span class="Keyword">=</span> second;
|
|
<span class="Keyword">return</span> the_field <span class="Keyword">=</span> rest;
|
|
};
|
|
contenders <span class="Keyword">=</span> [<span class="String"><span class="String">"</span>Michael Phelps<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Liu Xiang<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Yao Ming<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Allyson Felix<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Shawn Johnson<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Roman Sebrle<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Guo Jingjing<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Tyson Gay<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Asafa Powell<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Usain Bolt<span class="String">"</span></span>];
|
|
medalists.<span class="LibraryFunction">apply</span>(<span class="Variable">this</span>, contenders);
|
|
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>Gold: <span class="String">"</span></span> <span class="Keyword">+</span> gold);
|
|
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>Silver: <span class="String">"</span></span> <span class="Keyword">+</span> silver);
|
|
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>The Field: <span class="String">"</span></span> <span class="Keyword">+</span> the_field);
|
|
</pre><button onclick='javascript: var contenders, gold, medalists, silver, the_field;
|
|
gold = silver = the_field = "unknown";
|
|
medalists = function medalists(first, second) {
|
|
var rest;
|
|
rest = Array.prototype.slice.call(arguments, 2);
|
|
gold = first;
|
|
silver = second;
|
|
return the_field = rest;
|
|
};
|
|
contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn Johnson", "Roman Sebrle", "Guo Jingjing", "Tyson Gay", "Asafa Powell", "Usain Bolt"];
|
|
medalists.apply(this, contenders);
|
|
alert("Gold: " + gold);
|
|
alert("Silver: " + silver);
|
|
alert("The Field: " + the_field);
|
|
;'>run</button><br class='clear' /></div>
|
|
|
|
<p id="arguments">
|
|
<b class="header">Arguments are Arrays</b>
|
|
If you reference the <b>arguments object</b> directly, it will be converted
|
|
into a real Array, making all of the
|
|
<a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Array">Array methods</a>
|
|
available.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="FunctionName">backwards</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
|
alert(arguments.reverse())
|
|
|
|
backwards(<span class="String"><span class="String">"</span>stairway<span class="String">"</span></span>, <span class="String"><span class="String">"</span>to<span class="String">"</span></span>, <span class="String"><span class="String">"</span>heaven<span class="String">"</span></span>)
|
|
</pre><pre class="idle"><span class="Storage">var</span> backwards;
|
|
backwards <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">backwards</span>() {
|
|
<span class="Keyword">return</span> <span class="LibraryFunction">alert</span>(<span class="LibraryClassType">Array</span>.<span class="LibraryConstant">prototype</span>.slice.<span class="LibraryFunction">call</span>(arguments, <span class="Number">0</span>).<span class="LibraryFunction">reverse</span>());
|
|
};
|
|
backwards(<span class="String"><span class="String">"</span>stairway<span class="String">"</span></span>, <span class="String"><span class="String">"</span>to<span class="String">"</span></span>, <span class="String"><span class="String">"</span>heaven<span class="String">"</span></span>);
|
|
</pre><button onclick='javascript: var backwards;
|
|
backwards = function backwards() {
|
|
return alert(Array.prototype.slice.call(arguments, 0).reverse());
|
|
};
|
|
backwards("stairway", "to", "heaven");
|
|
;'>run</button><br class='clear' /></div>
|
|
|
|
<p id="while">
|
|
<b class="header">While Loops</b>
|
|
The only low-level loop that CoffeeScript provides is the while loop.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Keyword">while</span> demand <span class="Keyword">></span> supply
|
|
sell()
|
|
restock()
|
|
|
|
<span class="Keyword">while</span> supply <span class="Keyword">></span> demand <span class="Keyword">then</span> buy()
|
|
</pre><pre class="idle"><span class="Keyword">while</span> (demand <span class="Keyword">></span> supply) {
|
|
sell();
|
|
restock();
|
|
}
|
|
<span class="Keyword">while</span> (supply <span class="Keyword">></span> demand) {
|
|
buy();
|
|
}
|
|
</pre><br class='clear' /></div>
|
|
<p>
|
|
Other JavaScript loops, such as <b>for</b> loops and <b>do-while</b> loops
|
|
can be mimicked by variations on <b>while</b>, but the hope is that you
|
|
won't need to do that with CoffeeScript, either because you're using
|
|
<b>each</b> (<b>forEach</b>) style iterators, or...
|
|
</p>
|
|
|
|
<p id="comprehensions">
|
|
<b class="header">Comprehensions (Arrays, Objects, and Ranges)</b>
|
|
For your looping needs, CoffeeScript provides array comprehensions
|
|
similar to Python's. They replace (and compile into) <b>for</b> loops, with
|
|
optional guard clauses and the value of the current array index.
|
|
Unlike for loops, array comprehensions are expressions, and can be returned
|
|
and assigned. They should be able to handle most places where you otherwise
|
|
would use a loop, <b>each</b>/<b>forEach</b>, <b>map</b>, or <b>select</b>/<b>filter</b>.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Eat lunch.</span>
|
|
lunch<span class="Keyword">:</span> eat(food) <span class="Keyword">for</span> food <span class="Keyword">in</span> [<span class="String"><span class="String">'</span>toast<span class="String">'</span></span>, <span class="String"><span class="String">'</span>cheese<span class="String">'</span></span>, <span class="String"><span class="String">'</span>wine<span class="String">'</span></span>]
|
|
|
|
<span class="Comment"><span class="Comment">#</span> Naive collision detection.</span>
|
|
<span class="Keyword">for</span> roid <span class="Keyword">in</span> asteroids
|
|
<span class="Keyword">for</span> roid2 <span class="Keyword">in</span> asteroids <span class="Keyword">when</span> roid <span class="Keyword">isnt</span> roid2
|
|
roid.explode() <span class="Keyword">if</span> roid.overlaps(roid2)
|
|
</pre><pre class="idle"><span class="Storage">var</span> __a, __b, __c, __d, __e, __f, __g, __h, __i, __j, food, lunch, roid, roid2;
|
|
<span class="Comment"><span class="Comment">//</span> Eat lunch.</span>
|
|
lunch <span class="Keyword">=</span> (<span class="Storage">function</span>() {
|
|
__a <span class="Keyword">=</span> [<span class="String"><span class="String">'</span>toast<span class="String">'</span></span>, <span class="String"><span class="String">'</span>cheese<span class="String">'</span></span>, <span class="String"><span class="String">'</span>wine<span class="String">'</span></span>];
|
|
__c <span class="Keyword">=</span> [];
|
|
<span class="Keyword">for</span> (__b <span class="Keyword">in</span> __a) {
|
|
<span class="Keyword">if</span> (__a.hasOwnProperty(__b)) {
|
|
food <span class="Keyword">=</span> __a[__b];
|
|
__d <span class="Keyword">=</span> eat(food);
|
|
__c.<span class="LibraryFunction">push</span>(__d);
|
|
}
|
|
}
|
|
<span class="Keyword">return</span> __c;
|
|
})();
|
|
<span class="Comment"><span class="Comment">//</span> Naive collision detection.</span>
|
|
__e <span class="Keyword">=</span> asteroids;
|
|
<span class="Keyword">for</span> (__f <span class="Keyword">in</span> __e) {
|
|
<span class="Keyword">if</span> (__e.hasOwnProperty(__f)) {
|
|
roid <span class="Keyword">=</span> __e[__f];
|
|
__h <span class="Keyword">=</span> asteroids;
|
|
<span class="Keyword">for</span> (__i <span class="Keyword">in</span> __h) {
|
|
<span class="Keyword">if</span> (__h.hasOwnProperty(__i)) {
|
|
roid2 <span class="Keyword">=</span> __h[__i];
|
|
<span class="Keyword">if</span> (roid <span class="Keyword">!</span><span class="Keyword">==</span> roid2) {
|
|
<span class="Keyword">if</span> (roid.overlaps(roid2)) {
|
|
roid.explode();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</pre><br class='clear' /></div>
|
|
<p>
|
|
If you know the start and end of your loop, or would like to step through
|
|
in fixed-size increments, you can use a range to specify the start and
|
|
end of your comprehension:
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Keyword">for</span> i <span class="Keyword">in</span> [<span class="Number">0</span>...eggs.length] <span class="Keyword">by</span> <span class="Number">12</span>
|
|
dozen_eggs<span class="Keyword">:</span> eggs[i...i<span class="Keyword">+</span><span class="Number">12</span>]
|
|
deliver(<span class="Keyword">new</span> <span class="TypeName">egg_carton</span>(dozen))
|
|
</pre><pre class="idle"><span class="Storage">var</span> __a, __b, __c, __d, __e, dozen_eggs, i;
|
|
__d <span class="Keyword">=</span> <span class="Number">0</span>;
|
|
__e <span class="Keyword">=</span> eggs.<span class="LibraryConstant">length</span>;
|
|
<span class="Keyword">for</span> (__c<span class="Keyword">=</span><span class="Number">0</span>, i<span class="Keyword">=</span>__d; (__d <span class="Keyword"><=</span> __e ? i <span class="Keyword"><</span> __e : i <span class="Keyword">></span> __e); (__d <span class="Keyword"><=</span> __e ? i <span class="Keyword">+</span><span class="Keyword">=</span> <span class="Number">12</span> : i <span class="Keyword">-</span><span class="Keyword">=</span> <span class="Number">12</span>), __c<span class="Keyword">++</span>) {
|
|
dozen_eggs <span class="Keyword">=</span> eggs.<span class="LibraryFunction">slice</span>(i, i <span class="Keyword">+</span> <span class="Number">12</span>);
|
|
deliver(<span class="Keyword">new</span> <span class="TypeName">egg_carton</span>(dozen));
|
|
}
|
|
</pre><br class='clear' /></div>
|
|
<p>
|
|
Comprehensions can also be used to iterate over the values and keys in
|
|
an object:
|
|
</p>
|
|
<div class='code'><pre class="idle">years_old<span class="Keyword">:</span> {max<span class="Keyword">:</span> <span class="Number">10</span>, ida<span class="Keyword">:</span> <span class="Number">9</span>, tim<span class="Keyword">:</span> <span class="Number">11</span>}
|
|
|
|
ages<span class="Keyword">:</span> child <span class="Keyword">+</span> <span class="String"><span class="String">"</span> is <span class="String">"</span></span> <span class="Keyword">+</span> age <span class="Keyword">for</span> age, child <span class="Keyword">in</span> years_old
|
|
</pre><pre class="idle"><span class="Storage">var</span> __a, __b, __c, age, ages, child, years_old;
|
|
years_old <span class="Keyword">=</span> {
|
|
max: <span class="Number">10</span>,
|
|
ida: <span class="Number">9</span>,
|
|
tim: <span class="Number">11</span>
|
|
};
|
|
ages <span class="Keyword">=</span> (<span class="Storage">function</span>() {
|
|
__a <span class="Keyword">=</span> years_old;
|
|
__b <span class="Keyword">=</span> [];
|
|
<span class="Keyword">for</span> (child <span class="Keyword">in</span> __a) {
|
|
<span class="Keyword">if</span> (__a.hasOwnProperty(child)) {
|
|
age <span class="Keyword">=</span> __a[child];
|
|
__c <span class="Keyword">=</span> child <span class="Keyword">+</span> <span class="String"><span class="String">"</span> is <span class="String">"</span></span> <span class="Keyword">+</span> age;
|
|
__b.<span class="LibraryFunction">push</span>(__c);
|
|
}
|
|
}
|
|
<span class="Keyword">return</span> __b;
|
|
})();
|
|
</pre><button onclick='javascript: var __a, __b, __c, age, ages, child, years_old;
|
|
years_old = {
|
|
max: 10,
|
|
ida: 9,
|
|
tim: 11
|
|
};
|
|
ages = (function() {
|
|
__a = years_old;
|
|
__b = [];
|
|
for (child in __a) {
|
|
if (__a.hasOwnProperty(child)) {
|
|
age = __a[child];
|
|
__c = child + " is " + age;
|
|
__b.push(__c);
|
|
}
|
|
}
|
|
return __b;
|
|
})();
|
|
;alert(ages.join(", "));'>run: ages.join(", ")</button><br class='clear' /></div>
|
|
|
|
<p id="slice_splice">
|
|
<b class="header">Array Slicing and Splicing with Ranges</b>
|
|
CoffeeScript borrows Ruby's
|
|
<a href="http://ruby-doc.org/core/classes/Range.html">range syntax</a>
|
|
for extracting slices of arrays. With two dots (<tt>3..5</tt>), the range
|
|
is inclusive: the first argument is the index of the first element in
|
|
the slice, and the second is the index of the last one. Three dots signify
|
|
a range that excludes the end.
|
|
</p>
|
|
<div class='code'><pre class="idle">numbers<span class="Keyword">:</span> [<span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>, <span class="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>]
|
|
|
|
three_to_six<span class="Keyword">:</span> numbers[<span class="Number">3</span>..<span class="Number">6</span>]
|
|
|
|
numbers_copy<span class="Keyword">:</span> numbers[<span class="Number">0</span>...numbers.length]
|
|
|
|
</pre><pre class="idle"><span class="Storage">var</span> numbers, numbers_copy, three_to_six;
|
|
numbers <span class="Keyword">=</span> [<span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>, <span class="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>];
|
|
three_to_six <span class="Keyword">=</span> numbers.<span class="LibraryFunction">slice</span>(<span class="Number">3</span>, <span class="Number">6</span> <span class="Keyword">+</span> <span class="Number">1</span>);
|
|
numbers_copy <span class="Keyword">=</span> numbers.<span class="LibraryFunction">slice</span>(<span class="Number">0</span>, numbers.<span class="LibraryConstant">length</span>);
|
|
</pre><button onclick='javascript: var numbers, numbers_copy, three_to_six;
|
|
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
three_to_six = numbers.slice(3, 6 + 1);
|
|
numbers_copy = numbers.slice(0, numbers.length);
|
|
;alert(numbers_copy);'>run: numbers_copy</button><br class='clear' /></div>
|
|
<p>
|
|
The same syntax can be used with assignment to replace a segment of an
|
|
array with new values (to splice it).
|
|
</p>
|
|
<div class='code'><pre class="idle">numbers<span class="Keyword">:</span> [<span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>, <span class="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>]
|
|
|
|
numbers[<span class="Number">3</span>..<span class="Number">6</span>]<span class="Keyword">:</span> [<span class="Keyword">-</span><span class="Number">3</span>, <span class="Keyword">-</span><span class="Number">4</span>, <span class="Keyword">-</span><span class="Number">5</span>, <span class="Keyword">-</span><span class="Number">6</span>]
|
|
|
|
|
|
</pre><pre class="idle"><span class="Storage">var</span> numbers;
|
|
numbers <span class="Keyword">=</span> [<span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>, <span class="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>];
|
|
numbers.splice.<span class="LibraryFunction">apply</span>(numbers, [<span class="Number">3</span>, <span class="Number">6</span> <span class="Keyword">-</span> <span class="Number">3</span> <span class="Keyword">+</span> <span class="Number">1</span>].<span class="LibraryFunction">concat</span>([<span class="Keyword">-</span><span class="Number">3</span>, <span class="Keyword">-</span><span class="Number">4</span>, <span class="Keyword">-</span><span class="Number">5</span>, <span class="Keyword">-</span><span class="Number">6</span>]));
|
|
</pre><button onclick='javascript: var numbers;
|
|
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
numbers.splice.apply(numbers, [3, 6 - 3 + 1].concat([-3, -4, -5, -6]));
|
|
;alert(numbers);'>run: numbers</button><br class='clear' /></div>
|
|
|
|
<p id="expressions">
|
|
<b class="header">Everything is an Expression (at least, as much as possible)</b>
|
|
You might have noticed how even though we don't add return statements
|
|
to CoffeeScript functions, they nonetheless return their final value.
|
|
The CoffeeScript compiler tries to make sure that all statements in the
|
|
language can be used as expressions. Watch how the <tt>return</tt> gets
|
|
pushed down into each possible branch of execution, in the function
|
|
below.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="FunctionName">grade</span><span class="Keyword">:</span> <span class="FunctionArgument">student</span> <span class="Storage">=></span>
|
|
<span class="Keyword">if</span> student.excellent_work
|
|
<span class="String"><span class="String">"</span>A+<span class="String">"</span></span>
|
|
<span class="Keyword">else</span> <span class="Keyword">if</span> student.okay_stuff
|
|
<span class="Keyword">if</span> student.tried_hard <span class="Keyword">then</span> <span class="String"><span class="String">"</span>B<span class="String">"</span></span> <span class="Keyword">else</span> <span class="String"><span class="String">"</span>B-<span class="String">"</span></span>
|
|
<span class="Keyword">else</span>
|
|
<span class="String"><span class="String">"</span>C<span class="String">"</span></span>
|
|
|
|
eldest<span class="Keyword">:</span> <span class="Keyword">if</span> <span class="Number">24</span> <span class="Keyword">></span> <span class="Number">21</span> <span class="Keyword">then</span> <span class="String"><span class="String">"</span>Liz<span class="String">"</span></span> <span class="Keyword">else</span> <span class="String"><span class="String">"</span>Ike<span class="String">"</span></span>
|
|
</pre><pre class="idle"><span class="Storage">var</span> eldest, grade;
|
|
grade <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">grade</span>(<span class="FunctionArgument">student</span>) {
|
|
<span class="Keyword">if</span> (student.excellent_work) {
|
|
<span class="Keyword">return</span> <span class="String"><span class="String">"</span>A+<span class="String">"</span></span>;
|
|
} <span class="Keyword">else</span> <span class="Keyword">if</span> (student.okay_stuff) {
|
|
<span class="Keyword">return</span> student.tried_hard ? <span class="String"><span class="String">"</span>B<span class="String">"</span></span> : <span class="String"><span class="String">"</span>B-<span class="String">"</span></span>;
|
|
} <span class="Keyword">else</span> {
|
|
<span class="Keyword">return</span> <span class="String"><span class="String">"</span>C<span class="String">"</span></span>;
|
|
}
|
|
};
|
|
eldest <span class="Keyword">=</span> <span class="Number">24</span> <span class="Keyword">></span> <span class="Number">21</span> ? <span class="String"><span class="String">"</span>Liz<span class="String">"</span></span> : <span class="String"><span class="String">"</span>Ike<span class="String">"</span></span>;
|
|
</pre><button onclick='javascript: var eldest, grade;
|
|
grade = function grade(student) {
|
|
if (student.excellent_work) {
|
|
return "A+";
|
|
} else if (student.okay_stuff) {
|
|
return student.tried_hard ? "B" : "B-";
|
|
} else {
|
|
return "C";
|
|
}
|
|
};
|
|
eldest = 24 > 21 ? "Liz" : "Ike";
|
|
;alert(eldest);'>run: eldest</button><br class='clear' /></div>
|
|
<p>
|
|
Because variable declarations occur at the top of scope, assignment can
|
|
be used within expressions, even for variables that haven't been seen before:
|
|
</p>
|
|
<div class='code'><pre class="idle">six<span class="Keyword">:</span> (one<span class="Keyword">:</span> <span class="Number">1</span>) <span class="Keyword">+</span> (two<span class="Keyword">:</span> <span class="Number">2</span>) <span class="Keyword">+</span> (three<span class="Keyword">:</span> <span class="Number">3</span>)
|
|
</pre><pre class="idle"><span class="Storage">var</span> one, six, three, two;
|
|
six <span class="Keyword">=</span> (one <span class="Keyword">=</span> <span class="Number">1</span>) <span class="Keyword">+</span> (two <span class="Keyword">=</span> <span class="Number">2</span>) <span class="Keyword">+</span> (three <span class="Keyword">=</span> <span class="Number">3</span>);
|
|
</pre><button onclick='javascript: var one, six, three, two;
|
|
six = (one = 1) + (two = 2) + (three = 3);
|
|
;alert(six);'>run: six</button><br class='clear' /></div>
|
|
<p>
|
|
Things that would otherwise be statements in JavaScript, when used
|
|
as part of an expression in CoffeeScript, are converted into expressions
|
|
by wrapping them in a closure. This lets you do useful things, like assign
|
|
the result of a comprehension to a variable:
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> The first ten global properties.</span>
|
|
|
|
globals<span class="Keyword">:</span> (name <span class="Keyword">for</span> property, name <span class="Keyword">in</span> window)[<span class="Number">0</span>...<span class="Number">10</span>]
|
|
</pre><pre class="idle"><span class="Storage">var</span> __a, __b, __c, globals, name, property;
|
|
<span class="Comment"><span class="Comment">//</span> The first ten global properties.</span>
|
|
globals <span class="Keyword">=</span> ((<span class="Storage">function</span>() {
|
|
__a <span class="Keyword">=</span> <span class="LibraryClassType">window</span>;
|
|
__b <span class="Keyword">=</span> [];
|
|
<span class="Keyword">for</span> (name <span class="Keyword">in</span> __a) {
|
|
<span class="Keyword">if</span> (__a.hasOwnProperty(name)) {
|
|
property <span class="Keyword">=</span> __a[name];
|
|
__c <span class="Keyword">=</span> name;
|
|
__b.<span class="LibraryFunction">push</span>(__c);
|
|
}
|
|
}
|
|
<span class="Keyword">return</span> __b;
|
|
})()).<span class="LibraryFunction">slice</span>(<span class="Number">0</span>, <span class="Number">10</span>);
|
|
</pre><button onclick='javascript: var __a, __b, __c, globals, name, property;
|
|
// The first ten global properties.
|
|
globals = ((function() {
|
|
__a = window;
|
|
__b = [];
|
|
for (name in __a) {
|
|
if (__a.hasOwnProperty(name)) {
|
|
property = __a[name];
|
|
__c = name;
|
|
__b.push(__c);
|
|
}
|
|
}
|
|
return __b;
|
|
})()).slice(0, 10);
|
|
;alert(globals);'>run: globals</button><br class='clear' /></div>
|
|
<p>
|
|
As well as silly things, like passing a <b>try/catch</b> statement directly
|
|
into a function call:
|
|
</p>
|
|
<div class='code'><pre class="idle">alert(
|
|
<span class="Keyword">try</span>
|
|
nonexistent <span class="Keyword">/</span> <span class="BuiltInConstant">undefined</span>
|
|
<span class="Keyword">catch</span> error
|
|
<span class="String"><span class="String">"</span>The error is: <span class="String">"</span></span> <span class="Keyword">+</span> error
|
|
)
|
|
</pre><pre class="idle"><span class="LibraryFunction">alert</span>((<span class="Storage">function</span>() {
|
|
<span class="Keyword">try</span> {
|
|
<span class="Keyword">return</span> nonexistent / undefined;
|
|
} <span class="Keyword">catch</span> (error) {
|
|
<span class="Keyword">return</span> <span class="String"><span class="String">"</span>The error is: <span class="String">"</span></span> <span class="Keyword">+</span> error;
|
|
}
|
|
})());
|
|
</pre><button onclick='javascript: alert((function() {
|
|
try {
|
|
return nonexistent / undefined;
|
|
} catch (error) {
|
|
return "The error is: " + error;
|
|
}
|
|
})());
|
|
;'>run</button><br class='clear' /></div>
|
|
|
|
<p id="inheritance">
|
|
<b class="header">Inheritance, and Calling Super from a Subclass</b>
|
|
JavaScript's prototypal inheritance has always been a bit of a
|
|
brain-bender, with a whole family tree of libraries that provide a cleaner
|
|
syntax for classical inheritance on top of JavaScript's prototypes:
|
|
<a href="http://code.google.com/p/base2/">Base2</a>,
|
|
<a href="http://prototypejs.org/">Prototype.js</a>,
|
|
<a href="http://jsclass.jcoglan.com/">JS.Class</a>, etc.
|
|
The libraries provide syntactic sugar, but the built-in inheritance would
|
|
be completely usable if it weren't for a couple of small exceptions:
|
|
it's awkward to call <b>super</b> (the prototype object's
|
|
implementation of the current function), and it's awkward to correctly
|
|
set the prototype chain. CoffeeScript provides <tt>extends</tt>
|
|
to help with prototype setup, and converts
|
|
<tt>super()</tt> calls into calls against the immediate ancestor's
|
|
method of the same name.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="FunctionName">Animal</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
|
<span class="FunctionName">Animal.prototype.move</span><span class="Keyword">:</span> <span class="FunctionArgument">meters</span> <span class="Storage">=></span>
|
|
alert(<span class="Variable">this</span>.name <span class="Keyword">+</span> <span class="String"><span class="String">"</span> moved <span class="String">"</span></span> <span class="Keyword">+</span> meters <span class="Keyword">+</span> <span class="String"><span class="String">"</span>m.<span class="String">"</span></span>)
|
|
|
|
<span class="FunctionName">Snake</span><span class="Keyword">:</span> <span class="FunctionArgument">name</span> <span class="Storage">=></span> <span class="Variable">this</span>.name<span class="Keyword">:</span> name
|
|
Snake <span class="Variable">extends</span> Animal
|
|
<span class="FunctionName">Snake.prototype.move</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
|
alert(<span class="String"><span class="String">"</span>Slithering...<span class="String">"</span></span>)
|
|
<span class="Variable">super</span>(<span class="Number">5</span>)
|
|
|
|
<span class="FunctionName">Horse</span><span class="Keyword">:</span> <span class="FunctionArgument">name</span> <span class="Storage">=></span> <span class="Variable">this</span>.name<span class="Keyword">:</span> name
|
|
Horse <span class="Variable">extends</span> Animal
|
|
<span class="FunctionName">Horse.prototype.move</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
|
alert(<span class="String"><span class="String">"</span>Galloping...<span class="String">"</span></span>)
|
|
<span class="Variable">super</span>(<span class="Number">45</span>)
|
|
|
|
sam<span class="Keyword">:</span> <span class="Keyword">new</span> <span class="TypeName">Snake</span>(<span class="String"><span class="String">"</span>Sammy the Python<span class="String">"</span></span>)
|
|
tom<span class="Keyword">:</span> <span class="Keyword">new</span> <span class="TypeName">Horse</span>(<span class="String"><span class="String">"</span>Tommy the Palomino<span class="String">"</span></span>)
|
|
|
|
sam.move()
|
|
tom.move()
|
|
|
|
|
|
|
|
|
|
</pre><pre class="idle"><span class="Storage">var</span> Animal, Horse, Snake, sam, tom;
|
|
Animal <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Animal</span>() {
|
|
};
|
|
<span class="LibraryClassType">Animal</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span> <span class="FunctionName">move</span>(<span class="FunctionArgument">meters</span>) {
|
|
<span class="Keyword">return</span> <span class="LibraryFunction">alert</span>(<span class="Variable">this</span>.<span class="LibraryConstant">name</span> <span class="Keyword">+</span> <span class="String"><span class="String">"</span> moved <span class="String">"</span></span> <span class="Keyword">+</span> meters <span class="Keyword">+</span> <span class="String"><span class="String">"</span>m.<span class="String">"</span></span>);
|
|
};
|
|
Snake <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Snake</span>(<span class="FunctionArgument">name</span>) {
|
|
<span class="Storage">var</span> __a;
|
|
__a <span class="Keyword">=</span> <span class="Variable">this</span>.<span class="LibraryConstant">name</span> <span class="Keyword">=</span> name;
|
|
<span class="Keyword">return</span> Snake <span class="Keyword">===</span> <span class="Variable">this</span>.<span class="LibraryConstant">constructor</span> ? <span class="Variable">this</span> : __a;
|
|
};
|
|
Snake.__superClass__ <span class="Keyword">=</span> Animal.<span class="LibraryConstant">prototype</span>;
|
|
<span class="LibraryClassType">Snake</span>.<span class="LibraryConstant">prototype</span> = <span class="Keyword">new</span> <span class="TypeName">Animal</span>();
|
|
<span class="LibraryClassType">Snake</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">constructor</span> = Snake;
|
|
<span class="LibraryClassType">Snake</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span> <span class="FunctionName">move</span>() {
|
|
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>Slithering...<span class="String">"</span></span>);
|
|
<span class="Keyword">return</span> Snake.__superClass__.move.<span class="LibraryFunction">call</span>(<span class="Variable">this</span>, <span class="Number">5</span>);
|
|
};
|
|
Horse <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Horse</span>(<span class="FunctionArgument">name</span>) {
|
|
<span class="Storage">var</span> __a;
|
|
__a <span class="Keyword">=</span> <span class="Variable">this</span>.<span class="LibraryConstant">name</span> <span class="Keyword">=</span> name;
|
|
<span class="Keyword">return</span> Horse <span class="Keyword">===</span> <span class="Variable">this</span>.<span class="LibraryConstant">constructor</span> ? <span class="Variable">this</span> : __a;
|
|
};
|
|
Horse.__superClass__ <span class="Keyword">=</span> Animal.<span class="LibraryConstant">prototype</span>;
|
|
<span class="LibraryClassType">Horse</span>.<span class="LibraryConstant">prototype</span> = <span class="Keyword">new</span> <span class="TypeName">Animal</span>();
|
|
<span class="LibraryClassType">Horse</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">constructor</span> = Horse;
|
|
<span class="LibraryClassType">Horse</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span> <span class="FunctionName">move</span>() {
|
|
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>Galloping...<span class="String">"</span></span>);
|
|
<span class="Keyword">return</span> Horse.__superClass__.move.<span class="LibraryFunction">call</span>(<span class="Variable">this</span>, <span class="Number">45</span>);
|
|
};
|
|
sam <span class="Keyword">=</span> <span class="Keyword">new</span> <span class="TypeName">Snake</span>(<span class="String"><span class="String">"</span>Sammy the Python<span class="String">"</span></span>);
|
|
tom <span class="Keyword">=</span> <span class="Keyword">new</span> <span class="TypeName">Horse</span>(<span class="String"><span class="String">"</span>Tommy the Palomino<span class="String">"</span></span>);
|
|
sam.move();
|
|
tom.move();
|
|
</pre><button onclick='javascript: var Animal, Horse, Snake, sam, tom;
|
|
Animal = function Animal() {
|
|
};
|
|
Animal.prototype.move = function move(meters) {
|
|
return alert(this.name + " moved " + meters + "m.");
|
|
};
|
|
Snake = function Snake(name) {
|
|
var __a;
|
|
__a = this.name = name;
|
|
return Snake === this.constructor ? this : __a;
|
|
};
|
|
Snake.__superClass__ = Animal.prototype;
|
|
Snake.prototype = new Animal();
|
|
Snake.prototype.constructor = Snake;
|
|
Snake.prototype.move = function move() {
|
|
alert("Slithering...");
|
|
return Snake.__superClass__.move.call(this, 5);
|
|
};
|
|
Horse = function Horse(name) {
|
|
var __a;
|
|
__a = this.name = name;
|
|
return Horse === this.constructor ? this : __a;
|
|
};
|
|
Horse.__superClass__ = Animal.prototype;
|
|
Horse.prototype = new Animal();
|
|
Horse.prototype.constructor = Horse;
|
|
Horse.prototype.move = function move() {
|
|
alert("Galloping...");
|
|
return Horse.__superClass__.move.call(this, 45);
|
|
};
|
|
sam = new Snake("Sammy the Python");
|
|
tom = new Horse("Tommy the Palomino");
|
|
sam.move();
|
|
tom.move();
|
|
;'>run</button><br class='clear' /></div>
|
|
|
|
<p id="blocks">
|
|
<b class="header">Blocks</b>
|
|
Many common looping functions (in Prototype, jQuery, and Underscore,
|
|
for example) take a single function as their final argument. To make
|
|
final functions easier to pass, CoffeeScript includes block syntax,
|
|
so you don't have to close the parentheses on the other side.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Keyword">$</span>(<span class="String"><span class="String">'</span>table.list<span class="String">'</span></span>).each()<span class="FunctionArgument"> table </span><span class="Storage">=></span>
|
|
<span class="Keyword">$</span>(<span class="String"><span class="String">'</span>tr.account<span class="String">'</span></span>, table).each()<span class="FunctionArgument"> row </span><span class="Storage">=></span>
|
|
row.show()
|
|
row.highlight()
|
|
</pre><pre class="idle"><span class="Keyword">$</span>(<span class="String"><span class="String">'</span>table.list<span class="String">'</span></span>).each(<span class="Storage">function</span>(table) {
|
|
<span class="Keyword">return</span> <span class="Keyword">$</span>(<span class="String"><span class="String">'</span>tr.account<span class="String">'</span></span>, table).each(<span class="Storage">function</span>(row) {
|
|
row.show();
|
|
<span class="Keyword">return</span> row.highlight();
|
|
});
|
|
});
|
|
</pre><br class='clear' /></div>
|
|
|
|
<p id="embedded">
|
|
<b class="header">Embedded JavaScript</b>
|
|
If you ever need to interpolate literal JavaScript snippets, you can
|
|
use backticks to pass JavaScript straight through.
|
|
</p>
|
|
<div class='code'><pre class="idle">hi<span class="Keyword">:</span> <span class="String"><span class="String">`</span>function() {</span>
|
|
<span class="String"> return [document.title, "Hello JavaScript"].join(": ");</span>
|
|
<span class="String">}<span class="String">`</span></span>
|
|
|
|
|
|
</pre><pre class="idle"><span class="Storage">var</span> hi;
|
|
<span class="FunctionName">hi</span> = <span class="Storage">function</span>() {
|
|
<span class="Keyword">return</span> [<span class="LibraryClassType">document</span>.<span class="LibraryConstant">title</span>, <span class="String"><span class="String">"</span>Hello JavaScript<span class="String">"</span></span>].<span class="LibraryFunction">join</span>(<span class="String"><span class="String">"</span>: <span class="String">"</span></span>);
|
|
};
|
|
</pre><button onclick='javascript: var hi;
|
|
hi = function() {
|
|
return [document.title, "Hello JavaScript"].join(": ");
|
|
};
|
|
;alert(hi());'>run: hi()</button><br class='clear' /></div>
|
|
|
|
<p id="switch">
|
|
<b class="header">Switch/When/Else</b>
|
|
<b>Switch</b> statements in JavaScript are rather broken. You can only
|
|
do comparisons based on string equality, and need to remember to <b>break</b> at the end of
|
|
every <b>case</b> statement to avoid accidentally falling through to
|
|
the default case. CoffeeScript compiles <b>switch</b> statements into JavaScript if-else chains, allowing you to
|
|
compare any object (via <b>===</b>), preventing fall-through, and resulting
|
|
in a returnable, assignable expression. The format is: <tt>switch</tt> condition,
|
|
<tt>when</tt> clauses, <tt>else</tt> the default case.
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Keyword">switch</span> day
|
|
<span class="Keyword">when</span> <span class="String"><span class="String">"</span>Tuesday<span class="String">"</span></span> <span class="Keyword">then</span> eat_breakfast()
|
|
<span class="Keyword">when</span> <span class="String"><span class="String">"</span>Wednesday<span class="String">"</span></span> <span class="Keyword">then</span> go_to_the_park()
|
|
<span class="Keyword">when</span> <span class="String"><span class="String">"</span>Saturday<span class="String">"</span></span>
|
|
<span class="Keyword">if</span> day <span class="Keyword">is</span> bingo_day
|
|
go_to_bingo()
|
|
go_dancing()
|
|
<span class="Keyword">when</span> <span class="String"><span class="String">"</span>Sunday<span class="String">"</span></span> <span class="Keyword">then</span> go_to_church()
|
|
<span class="Keyword">else</span> go_to_work()
|
|
</pre><pre class="idle"><span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">"</span>Tuesday<span class="String">"</span></span>) {
|
|
eat_breakfast();
|
|
} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">"</span>Wednesday<span class="String">"</span></span>) {
|
|
go_to_the_park();
|
|
} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">"</span>Saturday<span class="String">"</span></span>) {
|
|
<span class="Keyword">if</span> (day <span class="Keyword">===</span> bingo_day) {
|
|
go_to_bingo();
|
|
go_dancing();
|
|
}
|
|
} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">"</span>Sunday<span class="String">"</span></span>) {
|
|
go_to_church();
|
|
} <span class="Keyword">else</span> {
|
|
go_to_work();
|
|
}
|
|
</pre><br class='clear' /></div>
|
|
|
|
<p id="try">
|
|
<b class="header">Try/Catch/Finally</b>
|
|
Try/catch statements are just about the same as JavaScript (although
|
|
they work as expressions).
|
|
</p>
|
|
<div class='code'><pre class="idle"><span class="Keyword">try</span>
|
|
all_hell_breaks_loose()
|
|
cats_and_dogs_living_together()
|
|
<span class="Keyword">catch</span> error
|
|
print(error)
|
|
<span class="Keyword">finally</span>
|
|
clean_up()
|
|
</pre><pre class="idle"><span class="Keyword">try</span> {
|
|
all_hell_breaks_loose();
|
|
cats_and_dogs_living_together();
|
|
} <span class="Keyword">catch</span> (error) {
|
|
<span class="LibraryFunction">print</span>(error);
|
|
} <span class="Keyword">finally</span> {
|
|
clean_up();
|
|
}
|
|
</pre><br class='clear' /></div>
|
|
|
|
<p id="strings">
|
|
<b class="header">Multiline Strings</b>
|
|
Multiline strings are allowed in CoffeeScript.
|
|
</p>
|
|
<div class='code'><pre class="idle">moby_dick<span class="Keyword">:</span> <span class="String"><span class="String">"</span>Call me Ishmael. Some years ago --</span>
|
|
<span class="String">never mind how long precisely -- having little</span>
|
|
<span class="String">or no money in my purse, and nothing particular</span>
|
|
<span class="String">to interest me on shore, I thought I would sail</span>
|
|
<span class="String">about a little and see the watery part of the</span>
|
|
<span class="String">world...<span class="String">"</span></span>
|
|
|
|
|
|
</pre><pre class="idle"><span class="Storage">var</span> moby_dick;
|
|
moby_dick <span class="Keyword">=</span> <span class="String"><span class="String">"</span>Call me Ishmael. Some years ago -- \</span>
|
|
<span class="String">never mind how long precisely -- having little \</span>
|
|
<span class="String">or no money in my purse, and nothing particular \</span>
|
|
<span class="String">to interest me on shore, I thought I would sail \</span>
|
|
<span class="String">about a little and see the watery part of the \</span>
|
|
<span class="String">world...<span class="String">"</span></span>;
|
|
</pre><button onclick='javascript: var moby_dick;
|
|
moby_dick = "Call me Ishmael. Some years ago -- \
|
|
never mind how long precisely -- having little \
|
|
or no money in my purse, and nothing particular \
|
|
to interest me on shore, I thought I would sail \
|
|
about a little and see the watery part of the \
|
|
world...";
|
|
;alert(moby_dick);'>run: moby_dick</button><br class='clear' /></div>
|
|
|
|
<h2 id="resources">Resources</h2>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="http://github.com/jashkenas/coffee-script/">Source Code</a><br />
|
|
Use <tt>bin/coffee</tt> to test your changes, or <tt>rake gem:install</tt> to
|
|
create and install a custom version of the gem. If you're hacking on the
|
|
parser, use <tt>rake build:parser</tt> to rebuild it.
|
|
</li>
|
|
<li>
|
|
<a href="http://github.com/jashkenas/coffee-script/issues">Bugs and Feature Requests</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://github.com/jnicklas/bistro_car">BistroCar</a><br />
|
|
A Rails plugin by
|
|
<a href="http://github.com/jnicklas">Jonas Nicklas</a>
|
|
that includes CoffeeScript helpers,
|
|
bundling and minification.
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="contributing">Contributing</h2>
|
|
|
|
<p>
|
|
Here's a wish list of things that would be wonderful to have in
|
|
CoffeeScript:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
A clean, safe syntax for manipulating the prototype chain, and performing
|
|
inheritance. <a href="#inheritance"><b>extends</b> and <b>super</b></a> are the start of this, but
|
|
aren't a complete answer.
|
|
</li>
|
|
<li>
|
|
A CoffeeScript version of the compiler, perhaps using Alessandro Warth's
|
|
<a href="http://tinlizzie.org/ometa/">OMeta</a>.
|
|
</li>
|
|
<li>
|
|
Test cases for any syntax errors you encounter that you think CoffeeScript
|
|
should be able to compile properly.
|
|
</li>
|
|
<li>
|
|
A tutorial that introduces CoffeeScript from the ground up for folks
|
|
without knowledge of JavaScript.
|
|
</li>
|
|
<li>
|
|
Integration with Processing.js's JavaScript API (this would depend on
|
|
having a JavaScript version of the compiler).
|
|
</li>
|
|
<li>
|
|
A lot of the code generation in <tt>nodes.rb</tt> gets into messy
|
|
string manipulation. Techniques for cleaning this up across the board
|
|
would be appreciated.
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="change_log">Change Log</h2>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.2.1</b>
|
|
Arguments objects are now converted into real arrays when referenced.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.2.0</b>
|
|
Major release. Significant whitespace. Better statement-to-expression
|
|
conversion. Splats. Splice literals. Object comprehensions. Blocks.
|
|
The existence operator. Many thanks to all the folks who posted issues,
|
|
with special thanks to
|
|
<a href="http://github.com/kamatsu">Liam O'Connor-Davis</a> for whitespace
|
|
and expression help.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.6</b>
|
|
Bugfix for running <tt>coffee --interactive</tt> and <tt>--run</tt>
|
|
from outside of the CoffeeScript directory. Bugfix for nested
|
|
function/if-statements.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.5</b>
|
|
Array slice literals and array comprehensions can now both take Ruby-style
|
|
ranges to specify the start and end. JavaScript variable declaration is
|
|
now pushed up to the top of the scope, making all assignment statements into
|
|
expressions. You can use <tt>\</tt> to escape newlines.
|
|
The <tt>coffee-script</tt> command is now called <tt>coffee</tt>.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.4</b>
|
|
The official CoffeeScript extension is now <tt>.coffee</tt> instead of
|
|
<tt>.cs</tt>, which properly belongs to
|
|
<a href="http://en.wikipedia.org/wiki/C_Sharp_(programming_language)">C#</a>.
|
|
Due to popular demand, you can now also use <tt>=</tt> to assign. Unlike
|
|
JavaScript, <tt>=</tt> can also be used within object literals, interchangeably
|
|
with <tt>:</tt>. Made a grammatical fix for chained function calls
|
|
like <tt>func(1)(2)(3)(4)</tt>. Inheritance and super no longer use
|
|
<tt>__proto__</tt>, so they should be IE-compatible now.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.3</b>
|
|
The <tt>coffee</tt> command now includes <tt>--interactive</tt>,
|
|
which launches an interactive CoffeeScript session, and <tt>--run</tt>,
|
|
which directly compiles and executes a script. Both options depend on a
|
|
working installation of Narwhal.
|
|
The <tt>aint</tt> keyword has been replaced by <tt>isnt</tt>, which goes
|
|
together a little smoother with <tt>is</tt>.
|
|
Quoted strings are now allowed as identifiers within object literals: eg.
|
|
<tt>{"5+5": 10}</tt>.
|
|
All assignment operators now use a colon: <tt>+:</tt>, <tt>-:</tt>,
|
|
<tt>*:</tt>, etc.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.2</b>
|
|
Fixed a bug with calling <tt>super()</tt> through more than one level of
|
|
inheritance, with the re-addition of the <tt>extends</tt> keyword.
|
|
Added experimental <a href="http://narwhaljs.org/">Narwhal</a>
|
|
support (as a Tusk package), contributed by
|
|
<a href="http://tlrobinson.net/">Tom Robinson</a>, including
|
|
<b>bin/cs</b> as a CoffeeScript REPL and interpreter.
|
|
New <tt>--no-wrap</tt> option to suppress the safety function
|
|
wrapper.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.1</b>
|
|
Added <tt>instanceof</tt> and <tt>typeof</tt> as operators.
|
|
</p>
|
|
|
|
<p>
|
|
<b class="header" style="margin-top: 20px;">0.1.0</b>
|
|
Initial CoffeeScript release.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|