CoffeeScript is a programming language that compiles to JavaScript. It aims to enhance JavaScript with Python-like syntax, including features like classes, lexical scoping, default arguments, string interpolation, and concise conditional assignment. The document provides examples of CoffeeScript code and how it compiles to equivalent JavaScript, highlighting some of CoffeeScript's key features like class definitions, lexical scoping without global variables, default arguments, string interpolation, conditional suffixes, operator aliases, destructuring assignment, the existential operator, splats, and list comprehensions.

1. Much Ado About
CoffeeScript
Mattt Thompson (@mattt)
Lone Star Ruby Conf V

2. Sass
CoffeeScript

3. Sass → CSS
$blue: #3bbfce .content-navigation {
$margin: 16px border-color: #3bbfce;
color: #2ca2af; }
.content-navigation
border-color: $blue .border {
color: darken($blue, 9%) padding: 8px;
margin: 8px;
.border border-color: #3bbfce; }
padding: $margin / 2
margin: $margin / 2
border-color: $blue

4. CoffeeScript → JavaScript
var Account;
Account = (customer, cart) -> var __bind = function(fn, me)
@customer = customer { return function(){ return
@cart = cart fn.apply(me, arguments); }; };
Account = function(customer, cart)
{
$('.shopping_cart').bind ↩ this.customer = customer;
'click', (event) => this.cart = cart;
return $
@customer.purchase @cart ('.shopping_cart').bind('click',
__bind(function(event) {
return
this.customer.purchase(this.cart);
}, this));
};

5. CoffeeScript

6. “It’s just Javascript”

7. • Less Syntactic Cruft
• JavaScript Design Patterns
are Features of
CoffeeScript

10. Syntax

11. jQuery(function() {
$("#title").show();
});

12. jQuery function()
$("#title").show()

13. jQuery ->
$("#title").show()

14. Store.prototype.add = function(item) {
this.items.push(item);
}

15. Store.prototype.add = function(item)
this.items.push(item)

16. Store.prototype.add = function(item)
@items.push(item)

17. add: function(item)
@items.push(item)

18. add: -> (item)
@items.push(item)

19. add: (item) ->
@items.push(item)

20. • Redundant Punctuation Omitted
• function becomes ->
• this. becomes @
• {} becomes ⇥

21. Features

24. 1
Class Pattern

25. class Animal
constructor: (name) ->
@name = name

26. var Animal;
Animal = (function() {
function Animal(name) {
this.name = name;
}
return Animal;
})();

27. 2
Lexical Scoping
(No Global Variables)

28. window.Animal = class Animal
constructor: (name) ->
@name = name

29. 3
Default Arguments

30. window.Animal = class Animal
constructor: (name = "Unknown") ->
@name = name

31. 4
String Interpolation

32. class Bear extends Animal
constructor: (name) ->
@name = "#{name}, the Bear"

33. 5
Conditional Suffixes

34. @price = amount if amount > 0.00

35. 6
Operator Aliases

36. @lovesTacos = false unless @name is "Mattt"

37. CoffeeScript JavaScript
is ===
isnt !==
not !
and &&
or ||
true, yes, on true
@, this this
of in
in N/A

38. 7
Deconstructing
Assignment

39. [dollars, cents] = input.match /(d+)/g

40. 8
Existential Operator

41. ?

42. [dollars, cents] = (input.match /(d+)/g) ? [0, 0]

43. 9
Splats

44. gold, silver, bronze, rest = ""
awardMedals = (first, second, third, others...) ->
gold = first
silver = second
bronze = third
rest = others
pieEatingCompetitors = [
"Wynn Netherland",
"Steve Klabnik",
"Adam Keys",
"Richard Schneeman",
"Rob Mack",
"Tim Tyrrell",
"Steve Stedman",
"Mando Escamilla",
"Keith Gaddis"
]
awardMedals pieEatingCompetitors...

45. 10
List Comprehensions

46. eat food for food in ['toast', 'cheese', 'wine']

47. eat food for food in ['toast', 'cheese', 'wine'] ↩
when food is "toast"

48. languages = {
"Javascript": 3,
"CoffeeScript": 9,
"Ruby": 9,
"Python": 6,
"Objective-C": 7,
"Potion": 10
}
favorites = language for language, awesomeness of ↩
languages when awesomeness >= 7