CoffeeScript is a great way to write javascript. It provides many abstractions that simplify the language, and a few syntax niceties that make it much less noisy than pure javascript. In this introductory talk, we present the language through several examples, looking at many of the features CoffeeScript provides for simplifying the way we write JavaScript. Hopefully in a way that will inspire you to go out and try it!

1. Let’s Have a Cup of

3. JavaScript

5. me = {
name: “Nicolás”,
location: “Montevideo, Uruguay”,
age: 26,
likesWorkingOn: [“Ruby”, “JavaScript”],
twitter: “@godfoca”,
github: “http://github.com/foca”,
url: “http://nicolassanguinetti.info”,
company: {
name: “Cubox”,
url: “http://cuboxsa.com”
}
}

6. me = {
name: “Nicolás”,
location: “Montevideo, Uruguay
age: 26,
likesWorkingOn: [“Ruby”, “Java
twitter: “@godfoca”,
github: “http://github.com/foc
url: “http://nicolassanguinett
company: {
name: “Cubox”,
url: “http://cuboxsa.com”

7. me = {
name: “Nicolás”,
location: “Montevid
age: 26,
likesWorkingOn: [“R
twitter: “@godfoca”
github: “http://git

8. me = {
name: “Nicolás”
location: “Mont
age: 26,
likesWorkingOn:
twitter: “@godf

9. There’s no var
me = {
name: “Nico
location:
age: 26,

11. me = {
name: “Nicolás”,
location: “Montevideo, Uruguay”,
age: 26,
likesWorkingOn: [“Ruby”, “JavaScript”],
twitter: “@godfoca”,
github: “http://github.com/foca”,
url: “http://nicolassanguinetti.info”,
company: {
name: “Cubox”,
url: “http://cuboxsa.com”
}
}

13. me = {
name: “Nicolás”,
location: “Montevideo, Uruguay”,
age: 26,
likesWorkingOn: [“Ruby”, “JavaScript”],
twitter: “@godfoca”,
github: “http://github.com/foca”,
url: “http://nicolassanguinetti.info”,
company: {
name: “Cubox”,
url: “http://cuboxsa.com”
}
}

14. me =
name: “Nicolás”,
location: “Montevideo, Uruguay”,
age: 26,
likesWorkingOn: [“Ruby”, “JavaScript”],
twitter: “@godfoca”,
github: “http://github.com/foca”,
url: “http://nicolassanguinetti.info”,
company:
name: “Cubox”,
url: “http://cuboxsa.com”

15. me =
name: “Nicolás”,
location: “Montevideo, Uruguay”,
age: 26,
likesWorkingOn: [“Ruby”, “JavaScript”],
twitter: “@godfoca”,
github: “http://github.com/foca”,
url: “http://nicolassanguinetti.info”,
company:
name: “Cubox”,
url: “http://cuboxsa.com”

16. me =
name: “Nicolás”,
location: “Montevideo, Uruguay”,
age: 26,
likesWorkingOn: [“Ruby”, “JavaScript”],
twitter: “@godfoca”,
github: “http://github.com/foca”,
url: “http://nicolassanguinetti.info”,
company:
name: “Cubox”,
url: “http://cuboxsa.com”

17. me =
name: “Nicolás”
location: “Montevideo, Uruguay”
age: 26
likesWorkingOn: [“Ruby”, “JavaScript”]
twitter: “@godfoca”
github: “http://github.com/foca”
url: “http://nicolassanguinetti.info”
company:
name: “Cubox”
url: “http://cuboxsa.com”

18. me =
name: “Nicolás”
location: “Montevideo, Uruguay”
age: 26
likesWorkingOn: [“Ruby”, “JavaScript”]
twitter: “@godfoca”
github: “http://github.com/foca”
url: “http://nicolassanguinetti.info”
company:
name: “Cubox”
url: “http://cuboxsa.com”

19. Let’s Have a few Cups of

20. 1st Cup
A simple comparison

21. 1st Cup: A simple comparison
var square = function(num) {
return num * num;
}
var list = [1, 2, 3, 4, 5];
var squares = [];
for (var i = 0; i < list.length; i++) {
squares.push(square(list[i]));
}

22. 1st Cup: A simple comparison
var square = function(num) {
return num * num;
}
var list = [1, 2, 3, 4, 5];
var squares = [];
for (var i = 0; i < list.length; i++) {
squares.push(square(list[i]));
}

23. 1st Cup: A simple comparison
var square = function(num) {
return num * num;
}
var list = [1, 2, 3, 4, 5];
var squares = [];
for (var i = 0; i < list.length; i++) {
squares.push(square(list[i]));
}

24. 1st Cup: A simple comparison
var square = function(num) {
return num * num;
}
var list = [1, 2, 3, 4, 5];
var squares = [];
for (var i = 0; i < list.length; i++) {
squares.push(square(list[i]));
}

25. 1st Cup: A simple comparison
var square = function(num) {
return num * num;
}
var list = [1, 2, 3, 4, 5];
var squares = [];
for (var i = 0; i < list.length; i++) {
squares.push(square(list[i]));
}

26. 1st Cup: A simple comparison
square = (num) -> num * num
list = [1..5]
squares = (square n for n in list)

27. 1st Cup: A simple comparison
square = (num) -> num * num
list = [1..5]
squares = (square n for n in list)

28. 1st Cup: A simple comparison
square = (num) -> num * num
list = [1..5]
squares = (square n for n in list)

29. 1st Cup: A simple comparison
square = (num) -> num * num
list = [1..5]
squares = (square n for n in list)

30. 1st Cup: A simple comparison
square = (num) -> num * num
list = [1..5]
squares = (square n for n in list)

31. 2nd Cup
The Useless Calculator

32. 2nd Cup: The Useless Calculator
var add = function(num1, num2) {
return num1 + “ + “ + num2 +
“ = “ + (num1 + num2);
}
console.log(add(2, 3))
> 2 + 3 = 5
console.log(add(5, 7))
> 5 + 7 = 12

33. 2nd Cup: The Useless Calculator
var add = function(num1, num2) {
return num1 + “ + “ + num2 +
“ = “ + (num1 + num2);
}
console.log(add(2, 3))
> 2 + 3 = 5
console.log(add(5, 7))
> 5 + 7 = 12

34. 2nd Cup: The Useless Calculator
var add = function(num1, num2) {
return num1 + “ + “ + num2 +
“ = “ + (num1 + num2);
}
console.log(add(2, 3))
> 2 + 3 = 5
console.log(add(5, 7))
> 5 + 7 = 12

35. 2nd Cup: The Useless Calculator
var add = function(num1, num2) {
return num1 + “ + “ + num2 +
“ = “ + (num1 + num2);
}
console.log(add(2, 3))
> 2 + 3 = 5
console.log(add(5, 7))
> 5 + 7 = 12

36. 2nd Cup: The Useless Calculator
var add = function(num1, num2) {
return num1 + “ + “ + num2 +
“ = “ + (num1 + num2);
}
console.log(add(2, 3))
> 2 + 3 = 5
console.log(add(5, 7))
> 5 + 7 = 12

37. 2nd Cup: The Useless Calculator
add = (num1, num2) ->
“#{num1} + #{num2} = #{num1 + num2}”
console.log add(2, 3)
> 2 + 3 = 5
console.log add(5, 7)
> 5 + 7 = 12

38. 2nd Cup: The Useless Calculator
add = (num1, num2) ->
“#{num1} + #{num2} = #{num1 + num2}”
console.log add(2, 3)
> 2 + 3 = 5
console.log add(5, 7)
> 5 + 7 = 12

39. 2nd Cup: The Useless Calculator
add = (num1, num2) ->
“#{num1} + #{num2} = #{num1 + num2}”
console.log add(2, 3)
> 2 + 3 = 5
console.log add(5, 7)
> 5 + 7 = 12

40. 2nd Cup: The Useless Calculator
add = (num1, num2) ->
“#{num1} + #{num2} = #{num1 + num2}”
console.log add(2, 3)
> 2 + 3 = 5
console.log add(5, 7)
> 5 + 7 = 12

41. 2nd Cup: The Useless Calculator
add = (num1, num2) ->
“#{num1} + #{num2} = #{num1 + num2}”
console.log add(2, 3)
> 2 + 3 = 5
console.log add(5, 7)
> 5 + 7 = 12

42. 3rd Cup
Your Favorite Language

43. 3rd Cup: Your Favorite Language
languageOfChoice = (lang) ->
“#{lang} rocks!”

44. 3rd Cup: Your Favorite Language
languageOfChoice = (lang) ->
“#{lang} rocks!”
console.log languageOfChoice(“Ruby”)
> Ruby rocks!

45. 3rd Cup: Your Favorite Language
Implicit Return
languageOfChoice = (lang) ->
“#{lang} rocks!”

46. 3rd Cup: Your Favorite Language
Implicit Return
languageOfChoice = (lang) ->
return “#{lang} rocks!”

47. 3rd Cup: Your Favorite Language
Implicit Return
languageOfChoice = (lang) ->
if lang == “PHP”
“Get outta here!”
else
“#{lang} rocks!”

48. 3rd Cup: Your Favorite Language
Implicit Return
languageOfChoice = (lang) ->
if lang == “PHP”
return “Get outta here!”
else
return “#{lang} rocks!”

49. 3rd Cup: Your Favorite Language
Default Arguments
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”

50. 3rd Cup: Your Favorite Language
Default Arguments
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”
console.log languageOfChoice(“Lua”)
> Lua rocks!

51. 3rd Cup: Your Favorite Language
Default Arguments
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”
console.log languageOfChoice(“Lua”)
> Lua rocks!
console.log languageOfChoice()
> Ruby rocks!

52. 3rd Cup: Your Favorite Language
Optional Parentheses
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”

53. 3rd Cup: Your Favorite Language
Optional Parentheses
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”
console.log languageOfChoice “Lua”
> Lua rocks!

54. 3rd Cup: Your Favorite Language
Optional Parentheses
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”
console.log languageOfChoice “Lua”
> Lua rocks!
console.log languageOfChoice

55. 3rd Cup: Your Favorite Language
Optional Parentheses
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”
console.log languageOfChoice “Lua”
> Lua rocks!
console.log languageOfChoice
> [function “languageOfChoice”]

56. 3rd Cup: Your Favorite Language
Optional Parentheses
languageOfChoice = (lang = “Ruby”) ->
“#{lang} rocks!”
console.log languageOfChoice “Lua”
> Lua rocks!
console.log languageOfChoice
> [function “languageOfChoice”]
console.log languageOfChoice()
> Ruby rocks!

57. 3rd Cup: Your Favorite Language
Splats
languagesOfChoice = (langs...) ->
“I like #{langs.join(“, “)}”

58. 3rd Cup: Your Favorite Language
Splats
languagesOfChoice = (langs...) ->
“I like #{langs.join(“, “)}”
languagesOfChoice “Ruby”, “JS”, “Python”
> I like Ruby, JS, Python

59. 3rd Cup: Your Favorite Language
Splats
myLangs = [“Ruby”, “JS”, “Python”]

60. 3rd Cup: Your Favorite Language
Splats
myLangs = [“Ruby”, “JS”, “Python”]
languagesOfChoice myLangs...
> I like Ruby, JS, Python

61. 3rd Cup: Your Favorite Language
Splats
languagesOfChoice = (best, langs...) ->
“I love #{best},
and I like #{langs.join(“, “)}”

62. 3rd Cup: Your Favorite Language
Splats
languagesOfChoice = (best, langs...) ->
“I love #{best},
and I like #{langs.join(“, “)}”
languagesOfChoice “Ruby”, “JS”, “Python”
> I love Ruby, and I like JS, Python

63. 3rd Cup: Your Favorite Language
Splats
languagesOfChoice = (langs..., worst) ->
“I like #{langs.join(“, “)},
but I hate #{worst}”

64. 3rd Cup: Your Favorite Language
Splats
languagesOfChoice = (langs..., worst) ->
“I like #{langs.join(“, “)},
but I hate #{worst}”
languagesOfChoice “Ruby”, “JS”, “PHP”
> I like Ruby, JS, but I hate PHP

65. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
“I love #{best},
and I like #{langs.join(“, “)}”

66. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
“I love #{best},
and I like #{langs.join(“, “)}”
languagesOfChoice “Ruby”
> I love Ruby, and I like

67. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
“I love #{best},
and I like #{langs.join(“, “)}”
languagesOfChoice “Ruby”
> I love Ruby, and I like
languagesOfChoice()
> I love , and I like

68. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
ret = []
if best?
ret.push “I love #{best}”
if langs.length > 0
ret.push “I like #{langs.join(“, “)}”
ret.join(“, and “)

69. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
ret = []
if best?
ret.push “I love #{best}”
if langs.length > 0
ret.push “I like #{langs.join(“, “)}”
ret.join(“, and “)

70. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
ret = []
if best?
ret.push “I love #{best}”
if langs.length > 0
ret.push “I like #{langs.join(“, “)}”
ret.join(“, and “)

71. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
ret = []
if best?
ret.push “I love #{best}”
if langs.length > 0
ret.push “I like #{langs.join(“, “)}”
ret.join(“, and “)

72. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice = (best, langs...) ->
ret = []
if best?
ret.push “I love #{best}”
if langs.length > 0
ret.push “I like #{langs.join(“, “)}”
ret.join(“, and “)

73. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice “Ruby”, “JS”, “Python”
> I love Ruby, and I like JS, Python

74. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice “Ruby”, “JS”, “Python”
> I love Ruby, and I like JS, Python
languagesOfChoice “Ruby”
> I love Ruby

75. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice “Ruby”, “JS”, “Python”
> I love Ruby, and I like JS, Python
languagesOfChoice “Ruby”
> I love Ruby
languagesOfChoice undefined, “Ruby”, “JS”
> I like Ruby, JS

76. 3rd Cup: Your Favorite Language
Existential Operator
languagesOfChoice “Ruby”, “JS”, “Python”
> I love Ruby, and I like JS, Python
languagesOfChoice “Ruby”
> I love Ruby
languagesOfChoice undefined, “Ruby”, “JS”
> I like Ruby, JS
languagesOfChoice()
> “”

77. 3rd Cup: Your Favorite Language
Existential Operator
expr?

78. 3rd Cup: Your Favorite Language
Existential Operator
expr?
typeof expr !== undefined && expr !== null

79. 3rd Cup: Your Favorite Language
Existential Operator
x ?= y

80. 3rd Cup: Your Favorite Language
Existential Operator
x ?= y
x = y unless x?

81. 3rd Cup: Your Favorite Language
Existential Operator
obj = x: { y: 2 }

82. 3rd Cup: Your Favorite Language
Existential Operator
obj = x: { y: 2 }
obj.x?.y

83. 3rd Cup: Your Favorite Language
Existential Operator
obj = x: { y: 2 }
obj.x?.y
if obj.x? then obj.x.y else undefined

84. 3rd Cup: Your Favorite Language
Existential Operator
obj = x: { y: 2 }
obj.x?.y
if obj.x? then obj.x.y else undefined

85. 3rd Cup: Your Favorite Language
Existential Operator
obj = x: { y: 2 }
obj.x?.y
if obj.x? then obj.x.y else undefined

86. 3rd Cup: Your Favorite Language
Existential Operator
obj = x: { y: 2 }
obj.x?.y
if obj.x? then obj.x.y else undefined

87. 3rd Cup: Your Favorite Language
Existential Operator
func?()

88. 3rd Cup: Your Favorite Language
Existential Operator
func?()
func() if typeof func == “function”

89. 3rd Cup: Your Favorite Language
Existential Operator
options.callback?()

90. Interlude
Ranges

91. Interlude: Ranges
[1..5] #=> [1, 2, 3, 4, 5]

92. Interlude: Ranges
[1..5] #=> [1, 2, 3, 4, 5]
[1...5] #=> [1, 2, 3, 4]

93. Interlude: Ranges
list = [1, 2, 3, 4, 5]
list[2..3] #=> [3, 4]

94. Interlude: Ranges
list = [1, 2, 3, 4, 5]
list[2..-1] #=> [3, 4, 5]

95. 4th Cup
Patterns

96. 4th Cup: Patterns
list = [“Ruby”, “JS”, “Python”]

97. 4th Cup: Patterns
list = [“Ruby”, “JS”, “Python”]
Head Tail

98. 4th Cup: Patterns
list = [“Ruby”, “JS”, “Python”]
head = list[0]
tail = list[1..-1]

99. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]

100. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]
Pattern

101. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]
Pattern Values

102. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]

103. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]

104. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]
head #=> “Ruby”

105. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail] = [list[0], list[1..-1]]
head #=> “Ruby”
tail #=> [“JS”, “Python”]

106. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail...] = list

107. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail...] = list

108. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail...] = list
head #=> “Ruby”

109. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[head, tail...] = list
head #=> “Ruby”
tail #=> [“JS”, “Python”]

110. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[top, rest..., bottom] = list

111. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[top, rest..., bottom] = list
top #=> “Ruby”

112. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[top, rest..., bottom] = list
top #=> “Ruby”
bottom #=> “Python”

113. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”, “Python”]
[top, rest..., bottom] = list
top #=> “Ruby”
bottom #=> “Python”
rest #=> [“JS”]

114. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”]
[top, rest..., bottom] = list

115. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”]
[top, rest..., bottom] = list
top #=> “Ruby”

116. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”]
[top, rest..., bottom] = list
top #=> “Ruby”
bottom #=> “JS”

117. 4th Cup: Patterns
Pattern Matching
list = [“Ruby”, “JS”]
[top, rest..., bottom] = list
top #=> “Ruby”
bottom #=> “JS”
rest #=> []

118. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”

119. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”
name = me.name
age = me.age

120. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”
{ name: name, age: age } = me

121. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”
{ name: name, age: age } = me
Pattern

122. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”
{ name: name, age: age } = me
Variables

123. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”
{ name: name, age: age } = me
Values

124. 4th Cup: Patterns
Pattern Matching
me =
name: “Nicolás”
age: 26
company:
name: “Cubox”
{ name: name, age: age } = me
name #=> “Nicolás”
age #=> 26

125. 4th Cup: Patterns
Pattern Matching
{ name, age } = me

126. 4th Cup: Patterns
Pattern Matching
{ name, age } = me
name #=> “Nicolás”

127. 4th Cup: Patterns
Pattern Matching
{ name, age } = me
name #=> “Nicolás”
age #=> 26

128. 5th Cup
Collecting Collections

129. 5th Cup: Collecting Collections
Iterating over arrays
list = [1..10]
for item in list
doSomethingWith(item)

130. 5th Cup: Collecting Collections
Iterating over arrays
list = [1..10]
for item in list
doSomethingWith(item)

131. 5th Cup: Collecting Collections
Iterating over objects
me = name: “Nicolás”, age: 26
for key, value of me
console.log “#{key}: #{value}”

132. 5th Cup: Collecting Collections
Iterating over objects
me = name: “Nicolás”, age: 26
for key, value of me
console.log “#{key}: #{value}”

133. 5th Cup: Collecting Collections
Comprehensions
alert n for n in [1..5]

134. 5th Cup: Collecting Collections
Comprehensions
alert n for n in [1..5]

135. 5th Cup: Collecting Collections
Comprehensions
doubles = (n * 2 for n in [1..5])

136. 5th Cup: Collecting Collections
Filtering Comprehensions
alert n for n in [1..5] when n > 2

137. 5th Cup: Collecting Collections
Filtering Comprehensions
alert n for n in [1..5] when n > 2

138. 5th Cup: Collecting Collections
Filtering Comprehensions
alert n for n in [1..5] when n > 2
for n in [1..5]
continue unless n > 2
alert n

139. 5th Cup: Collecting Collections
Filtering Comprehensions
alert n for n in [1..5] when n > 2
for n in [1..5]
continue unless n > 2
alert n

140. Interlude
this

141. Interlude: this
function isCute() {
return this.cute;
}

142. Interlude: this
var cuteKitty = {
cute: true,
isCute: isCute
};

143. Interlude: this
var meanKitty = {
cute: false,
isCute: isCute
};

144. Interlude: this
cuteKitty.isCute() meanKitty.isCute()

145. Interlude: this
cuteKitty.isCute() meanKitty.isCute()
true

146. Interlude: this
cuteKitty.isCute() meanKitty.isCute()
true false

147. Interlude: this
function whatHappensNow() {
console.log(this);
}
whatHappensNow()

148. Interlude: this
function whatHappensNow() {
console.log(this);
}
whatHappensNow()
> [window]

149. Interlude: this
$(“a.sign-out”).click(function() {
console.log(this);
});

150. Interlude: this
$(“a.sign-out”).click(function() {
console.log(this);
});

151. Interlude: this
$(“a.sign-out”).click(function() {
console.log(this);
});
<a href=”#” class=”delete”>Delete</a>

152. Interlude: this
function returnThis() {
return this;
}

153. Interlude: this
function returnThis() {
return this;
}
returnThis.apply(42); //=> 42

154. Interlude: this
function returnThis() {
return this;
}
returnThis.apply(42); //=> 42
returnThis.apply(“hi”); //=> “hi”

155. 6th Cup
Context, the classy way

156. 6th Cup: Context, the classy way
User = (id, name) ->
this.id = id
this.name = name
this.element = $(“#user-#{this.id}”)

157. 6th Cup: Context, the classy way
Context Accessor
User = (id, name) ->
this.id = id
this.name = name
this.element = $(“#user-#{this.id}”)

158. 6th Cup: Context, the classy way
Context Accessor
User = (id, name) ->
this.id = id
this.name = name
this.element = $(“#user-#{this.id}”)

159. 6th Cup: Context, the classy way
Context Accessor
User = (id, name) ->
this.id = id
this.name = name
this.element = $(“#user-#{this.id}”)

160. 6th Cup: Context, the classy way
Context Accessor
User = (id, name) ->
this.id = id
this.name = name
this.element = $(“#user-#{this.id}”)

161. 6th Cup: Context, the classy way
Context Accessor
User = (id, name) ->
@id = id
@name = name
@element = $(“#user-#{@id}”)

162. 6th Cup: Context, the classy way
Property Arguments
User = (id, name) ->
@id = id
@name = name
@element = $(“#user-#{@id}”)

163. 6th Cup: Context, the classy way
Property Arguments
User = (id, name) ->
@id = id
@name = name
@element = $(“#user-#{@id}”)

164. 6th Cup: Context, the classy way
Property Arguments
User = (@id, @name) ->
@element = $(“#user-#{@id}”)

165. 6th Cup: Context, the classy way
Property Arguments
User = (@id, @name) ->
@element = $(“#user-#{@id}”)

166. 6th Cup: Context, the classy way
Property Arguments
User = (@id, @name) ->
@element = $(“#user-#{@id}”)

167. 6th Cup: Context, the classy way
User = (@id, @name) ->
@element = $(“#user-#{@id}”)

168. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
User.prototype.signOut = ->
$.ajax(...)

169. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
User.prototype.signOut = ->
$.ajax(...)

170. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
User.prototype.signOut = ->
$.ajax(...)

171. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
$(“a.sign-out”, @element).click ->
this.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

172. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
$(“a.sign-out”, @element).click ->
this.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

173. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
$(“a.sign-out”, @element).click ->
this.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

175. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
self = this
$(“a.sign-out”, @element).click ->
self.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

176. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
self = this
$(“a.sign-out”, @element).click ->
self.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

177. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
$(“a.sign-out”, @element).click =>
this.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

178. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
$(“a.sign-out”, @element).click =>
this.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

179. 6th Cup: Context, the classy way
Bound Functions
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
$(“a.sign-out”, @element).click =>
this.signOut()
false
User.prototype.signOut = ->
$.ajax(...)

180. 6th Cup: Context, the classy way
User = (@id, @name) ->
@element = $(“#user-#{@id}”)
User.prototype.signOut = ->
...

181. 6th Cup: Context, the classy way
Classes
class User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

182. 6th Cup: Context, the classy way
Classes
class User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

183. 6th Cup: Context, the classy way
Classes
class User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

184. 6th Cup: Context, the classy way
Classes
class User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

185. 6th Cup: Context, the classy way
Inheritance
class User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

186. 6th Cup: Context, the classy way
Inheritance
class SignedInUser extends User
...
class SignedOutUser extends User
...

187. 6th Cup: Context, the classy way
super
class SignedInUser extends User
constructor: (args...) ->
super args...
$(“a.sign-out”, @element).click =>
this.signOut()

188. 6th Cup: Context, the classy way
On variable locality
class User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

189. 6th Cup: Context, the classy way
On variable locality
class window.User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

190. 6th Cup: Context, the classy way
On variable locality
class window.User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

191. 6th Cup: Context, the classy way
On variable locality
class this.User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

192. 6th Cup: Context, the classy way
On variable locality
class @User
constructor: (@id, @name) ->
@element = $(“#user-#{@id}”)
signOut: ->
...

194. We’ve Covered
➡ Object Literals ➡ Existential Operator
➡ String Interpolation ➡ Context and this
➡ Functions ➡ Property Accessors
➡ Default Arguments ➡ Bound Functions
➡ Splats ➡ Classes
➡ Ranges ➡ Inheritance
➡ Pattern Matching ➡ super

195. So…

196. …is it worth it?

199. Questions?

200. Thanks!

201. Thanks!
http://github.com/foca
@godfoca

202. Thanks!
http://github.com/foca
@godfoca
jobs@cuboxsa.com

204. Follow-up:
Loop closures and do

205. Follow-up: Loop closures and do
for i in [1..5]
console.log i

206. Follow-up: Loop closures and do
for i in [1..5]
setTimeout (-> console.log i), 100

207. Follow-up: Loop closures and do
for i in [1..5]
setTimeout (-> console.log i), 100
> 5
> 5
> 5
> 5
> 5

209. Follow-up: Loop closures and do
for i in [1..5]
setTimeout (-> console.log i), 100
> 5
> 5
> 5
> 5
> 5

210. Follow-up: Loop closures and do
for i in [1..5]
((i) ->
setTimeout (-> console.log i), 100
)(i)
> 1
> 2
> ...

211. Follow-up: Loop closures and do
for i in [1..5]
do (i) ->
setTimeout (-> console.log i), 100
> 1
> 2
> ...

212. Follow-up:
Comprehension Madness

213. Follow-up: Comprehension Madness
Keep It Simple, Stupid
A = [1, 2, 3, 4, 5]
B = [8, 7, 1, 2]
cartesian = ([x, y] for x in A for y in B)

214. Follow-up: Comprehension Madness
Keep It Simple, Stupid
(ret.push(val) unless val in ret) for val in orig when shouldAdd(val)