CoffeeScript is a programming language that compiles to JavaScript. It provides a more concise syntax while maintaining a 1:1 mapping to JavaScript concepts. Some key features of CoffeeScript include implicit returns from functions, optional function parameters, and chaining comparisons. While it adds another layer to learn, CoffeeScript allows for writing cleaner code that compiles down to equivalent JavaScript.

1. 15 mins of CoffeeScript
CoffeeScript: Something to flame-war about ;)
Based on “a sip of CoffeeScript”

2. What is CoffeeScript?
• Compiles to JavaScript
• 1:1 mapping of “ideas”
• The compilation doesn’t “think”

3. What’s it look like?!

4. Variables, Parenthesis,
Semicolons
message = "You folks like coffee?"
alert message
--becomes--
var message;
message = "You folks like coffee?";
alert(message);

5. Function Declarations
• JavaScript has two methods
• function x() { alert(“hi”); } // named function
• var x = function() { alert(“hi”); } // function expression
• The last line of a CoffeeScript function is a return
• (like Ruby)

6. CoffeeScript ONLY has
function expressions
coffee = ->
confirm "Are you ready to rock?"
--becomes--
var coffee;
coffee = function() {
return confirm("Are you ready to
rock?");
};

7. Paramaters and Returns
double = (x) -> x * 2
--becomes--
var double;
double = function(x) {
return x * 2;
};

8. Calling Functions
• Call functions with a comma separated list of params
• funcName param1, param2, param3
• funcName(param1, param2, param3)
• Parenthesis are optional, unless you have no arguments
• funcName()

9. Optional Parameters!!!1
double = (x = 2) -> x * 2
alert double 6
--becomes--
var double;
double = function(x) {
if (x == null) {
x = 2;
}
return x * 2;
};
alert(double(6));

10. Control Statements
if age < 21
alert 'no beer for you'
alert 'no beer for you' if age < 21
if age < 21 then alert 'no beer for you'
--all become--
if (age < 21) {
alert('no beer for you');
}

11. Chained Comparisons
if 2 < newLevel < 5
alert "between two and five"
--becomes--
if (2 < newLevel && newLevel < 5) {
alert("between two and five");
}

12. Existential Operators
if cupsOfCoffee?
alert 'it exists!'
--becomes--
if (typeof cupsOfCoffee !== "undefined"
&& cupsOfCoffee !== null) {
alert('it exists!');
}

13. More Existential Operators
parent?.child?().grandchild()
--becomes--
if (typeof parent !== "undefined" &&
parent !== null) {
if (typeof parent.child === "function")
{
parent.child().grandchild();
}
}

14. Need IRL examples?
$ ->
someEvent = (e) ->
e.preventDefault()
$('a.active').removeClass 'active'
$(@).addClass 'active' # note @ = this
$('a').click someEvent
--becomes--
$(function() {
var someEvent;
someEvent = function(e) {
e.preventDefault();
$('a.active').removeClass('active');
return $(this).addClass('active');
};
return $('a').click(someEvent);
});

15. Advanced Sh*t
to_print = for coffee, attrs of coffees when attrs.in_stock > 0
"#{coffee} has #{attrs.in_stock}"
to_print.join ", "
--becomes--
var attrs, coffee, to_print;
to_print = (function() {
var _results;
_results = [];
for (coffee in coffees) {
attrs = coffees[coffee];
if (attrs.in_stock > 0) {
_results.push("" + coffee + " has " + attrs.in_stock);
}
}
return _results;
})();
to_print.join(", ");

16. Downsides
• You still need to learn JavaScript
• It’s another language/layer to learn
• Compilation step
• Translation of script file lines to compiled output
• http://bit.ly/NugARB for info about SourceMapping