Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's Have a Cup of CoffeeScript
Search
Nicolás Sanguinetti
September 26, 2011
Programming
15
530
Let's Have a Cup of CoffeeScript
A run through a lot of features CoffeeScript offers to ease your JavaScript development.
Nicolás Sanguinetti
September 26, 2011
Tweet
Share
More Decks by Nicolás Sanguinetti
See All by Nicolás Sanguinetti
It's Fine • A Tale of Terrible Misfortune
foca
0
75
Se Responsable
foca
0
180
Foreman in 5 minutes
foca
3
190
Una Parábola sobre Git
foca
1
160
Testing: It's a Horrible Idea
foca
6
590
Other Decks in Programming
See All in Programming
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
310
Cursor/Devin全社導入の理想と現実
saitoryc
15
9.6k
Do Dumb Things
mitsuhiko
0
440
AI Agents with JavaScript
slobodan
0
250
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
690
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
520
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
160
国漢文混用体からHolloまで
minhee
1
200
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
160
AHC045_解説
shun_pi
0
550
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
490
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
290
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Agile that works and the tools we love
rasmusluckow
328
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to train your dragon (web standard)
notwaldorf
90
6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
It's Worth the Effort
3n
184
28k
Faster Mobile Websites
deanohume
306
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Transcript
Let’s Have a Cup of
None
JavaScript
None
JavaScript
None
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” } }
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”
me = { name: “Nicolás”, location: “Montevid age: 26, likesWorkingOn:
[“R twitter: “@godfoca” github: “http://git
me = { name: “Nicolás” location: “Mont age: 26, likesWorkingOn:
twitter: “@godf
= { name: “Nico location: “ age: 26, me There’s
no var
None
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” } }
None
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” } }
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”
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”
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”
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”
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”
Let’s Have a Cup of
Let’s Have a Cup (or six) of
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])); } 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])); } 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])); } 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])); } 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])); } 1st Cup: A simple comparison
square = (num) -> num * num list = [1..5]
squares = (square n for n in list) 1st Cup: A simple comparison
square = (num) -> num * num list = [1..5]
squares = (square n for n in list) 1st Cup: A simple comparison
square = (num) -> num * num list = [1..5]
squares = (square n for n in list) 1st Cup: A simple comparison
square = (num) -> num * num list = [1..5]
squares = (square n for n in list) 1st Cup: A simple comparison
square = (num) -> num * num list = [1..5]
squares = (square n for n in list) 1st Cup: A simple comparison
2nd Cup The Useless Calculator
var add = function(x, y) { return x + “
+ “ + y + “ = “ + (x + y); } console.log(add(2, 3)) > 2 + 3 = 5 console.log(add(5, 7)) > 5 + 7 = 12 2nd Cup: The Useless Calculator
var add = function(x, y) { return x + “
+ “ + y + “ = “ + (x + y); } console.log(add(2, 3)) > 2 + 3 = 5 console.log(add(5, 7)) > 5 + 7 = 12 2nd Cup: The Useless Calculator
var add = function(x, y) { return x + “
+ “ + y + “ = “ + (x + y); } console.log(add(2, 3)) > 2 + 3 = 5 console.log(add(5, 7)) > 5 + 7 = 12 2nd Cup: The Useless Calculator
var add = function(x, y) { return x + “
+ “ + y + “ = “ + (x + y); } console.log(add(2, 3)) > 2 + 3 = 5 console.log(add(5, 7)) > 5 + 7 = 12 2nd Cup: The Useless Calculator
var add = function(x, y) { return x + “
+ “ + y + “ = “ + (x + y); } console.log(add(2, 3)) > 2 + 3 = 5 console.log(add(5, 7)) > 5 + 7 = 12 2nd Cup: The Useless Calculator
add = (x, y) -> “#{x} + #{y} = #{x
+ y}” console.log add(2, 3) > 2 + 3 = 5 console.log add(5, 7) > 5 + 7 = 12 2nd Cup: The Useless Calculator
add = (x, y) -> “#{x} + #{y} = #{x
+ y}” console.log add(2, 3) > 2 + 3 = 5 console.log add(5, 7) > 5 + 7 = 12 2nd Cup: The Useless Calculator
add = (x, y) -> “#{x} + #{y} = #{x
+ y}” console.log add(2, 3) > 2 + 3 = 5 console.log add(5, 7) > 5 + 7 = 12 2nd Cup: The Useless Calculator
add = (x, y) -> “#{x} + #{y} = #{x
+ y}” console.log add(2, 3) > 2 + 3 = 5 console.log add(5, 7) > 5 + 7 = 12 2nd Cup: The Useless Calculator
add = (x, y) -> “#{x} + #{y} = #{x
+ y}” console.log add(2, 3) > 2 + 3 = 5 console.log add(5, 7) > 5 + 7 = 12 2nd Cup: The Useless Calculator
3rd Cup Your Favorite Language
languageOfChoice = (lang) -> “#{lang} rocks!” 3rd Cup: Your Favorite
Language
languageOfChoice = (lang) -> “#{lang} rocks!” 3rd Cup: Your Favorite
Language
languageOfChoice = (lang) -> “#{lang} rocks!” 3rd Cup: Your Favorite
Language
languageOfChoice = (lang) -> “#{lang} rocks!” 3rd Cup: Your Favorite
Language
languageOfChoice = (lang) -> “#{lang} rocks!” console.log languageOfChoice(“Ruby”) > Ruby
rocks! 3rd Cup: Your Favorite Language
languageOfChoice = (lang) -> “#{lang} rocks!” Implicit Return 3rd Cup:
Your Favorite Language
languageOfChoice = (lang) -> return “#{lang} rocks!” Implicit Return 3rd
Cup: Your Favorite Language
languageOfChoice = (lang) -> if lang == “PHP” “Get outta
here!” else “#{lang} rocks!” Implicit Return 3rd Cup: Your Favorite Language
languageOfChoice = (lang) -> if lang == “PHP” return “Get
outta here!” else return “#{lang} rocks!” Implicit Return 3rd Cup: Your Favorite Language
Default Arguments languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”
3rd Cup: Your Favorite Language
languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!” console.log languageOfChoice(“Lua”)
> Lua rocks! Default Arguments 3rd Cup: Your Favorite Language
languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!” console.log languageOfChoice(“Lua”)
> Lua rocks! console.log languageOfChoice() > Ruby rocks! Default Arguments 3rd Cup: Your Favorite Language
Optional Parentheses languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”
3rd Cup: Your Favorite Language
languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!” console.log languageOfChoice
“Lua” > Lua rocks! Optional Parentheses 3rd Cup: Your Favorite Language
languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!” console.log languageOfChoice
“Lua” > Lua rocks! console.log languageOfChoice Optional Parentheses 3rd Cup: Your Favorite Language
languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!” console.log languageOfChoice
“Lua” > Lua rocks! console.log languageOfChoice > [Function] Optional Parentheses 3rd Cup: Your Favorite Language
languageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!” console.log languageOfChoice
“Lua” > Lua rocks! console.log languageOfChoice > [Function] console.log languageOfChoice() > Ruby rocks! Optional Parentheses 3rd Cup: Your Favorite Language
Splats languagesOfChoice = (langs...) -> “I like #{langs.join(“, “)}” 3rd
Cup: Your Favorite Language
Splats languagesOfChoice = (langs...) -> “I like #{langs.join(“, “)}” languagesOfChoice
“Ruby”, “JS”, “Python” > I like Ruby, JS, Python 3rd Cup: Your Favorite Language
Splats myLangs = [“Ruby”, “JS”, “Python”] 3rd Cup: Your Favorite
Language
Splats myLangs = [“Ruby”, “JS”, “Python”] languagesOfChoice myLangs... > I
like Ruby, JS, Python 3rd Cup: Your Favorite Language
Splats languagesOfChoice = (best, langs...) -> “I love #{best}, and
I like #{langs.join(“, “)}” 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 3rd Cup: Your Favorite Language
Splats languagesOfChoice = (langs..., worst) -> “I like #{langs.join(“, “)},
but I hate #{worst}” 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 3rd Cup: Your Favorite Language
4th Cup Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] 4th Cup: Getting Inside Your
Objects
list = [“Ruby”, “JS”, “Python”] first_two = list[0..1] 4th Cup:
Getting Inside Your Objects Tasty Slices
list = [“Ruby”, “JS”, “Python”] first_two = list[0..1] first_two #=>
[“Ruby”, “JS”] 4th Cup: Getting Inside Your Objects Tasty Slices
list = [“Ruby”, “JS”, “Python”] last_two = list[1..-1] 4th Cup:
Getting Inside Your Objects Tasty Slices
list = [“Ruby”, “JS”, “Python”] last_two = list[1..-1] last_two #=>
[“JS”, “Python”] 4th Cup: Getting Inside Your Objects Tasty Slices
list = [“Ruby”, “JS”, “Python”] 4th Cup: Getting Inside Your
Objects
list = [“Ruby”, “JS”, “Python”] Head Tail 4th Cup: Getting
Inside Your Objects
list = [“Ruby”, “JS”, “Python”] head = list[0] tail =
list[1..-1] 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
Pattern Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
Values Pattern Matching 4th Cup: Getting Inside Your Objects Pattern
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
Values Pattern Matching 4th Cup: Getting Inside Your Objects Variables
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
head #=> “Ruby” Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail] = [list[0], list[1..-1]]
head #=> “Ruby” tail #=> [“JS”, “Python”] Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail...] = list Pattern
Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail...] = list Pattern
Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail...] = list head
#=> “Ruby” Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [head, tail...] = list head
#=> “Ruby” tail #=> [“JS”, “Python”] Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [top, rest..., bottom] = list
Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [top, rest..., bottom] = list
top #=> “Ruby” Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [top, rest..., bottom] = list
top #=> “Ruby” bottom #=> “Python” Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”, “Python”] [top, rest..., bottom] = list
top #=> “Ruby” bottom #=> “Python” rest #=> [“JS”] Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”] [top, rest..., bottom] = list Pattern
Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”] [top, rest..., bottom] = list top
#=> “Ruby” Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”] [top, rest..., bottom] = list top
#=> “Ruby” bottom #=> “JS” Pattern Matching 4th Cup: Getting Inside Your Objects
list = [“Ruby”, “JS”] [top, rest..., bottom] = list top
#=> “Ruby” bottom #=> “JS” rest #=> [] Pattern Matching 4th Cup: Getting Inside Your Objects
me = name: “Nicolás” company: “Cubox” Pattern Matching 4th Cup:
Getting Inside Your Objects
me = name: “Nicolás” company: “Cubox” name = me.name company
= me.company Pattern Matching 4th Cup: Getting Inside Your Objects
me = name: “Nicolás” company: “Cubox” { name: name, company:
company } = me Pattern Matching 4th Cup: Getting Inside Your Objects
me = name: “Nicolás” company: “Cubox” { name: name, company:
company } = me Pattern Pattern Matching 4th Cup: Getting Inside Your Objects
Pattern Matching 4th Cup: Getting Inside Your Objects me =
name: “Nicolás” company: “Cubox” { name: name, company: company } = me Variables
me = name: “Nicolás” company: “Cubox” { name: name, company:
company } = me Values Pattern Matching 4th Cup: Getting Inside Your Objects
me = name: “Nicolás” company: “Cubox” { name: name, company:
company } = me name #=> “Nicolás” company #=> “Cubox” Pattern Matching 4th Cup: Getting Inside Your Objects
{ name, company } = me Pattern Matching 4th Cup:
Getting Inside Your Objects
{ name, company } = me name #=> “Nicolás” Pattern
Matching 4th Cup: Getting Inside Your Objects
{ name, company } = me name #=> “Nicolás” company
#=> 26 Pattern Matching 4th Cup: Getting Inside Your Objects
5th Cup Collecting Collections
list = [1..10] for item in list doSomethingWith(item) 5th Cup:
Collecting Collections Iterating over arrays
list = [1..10] for item in list doSomethingWith(item) Iterating over
arrays 5th Cup: Collecting Collections
me = name: “Nicolás”, age: 26 for key, value of
me console.log “#{key}: #{value}” Iterating over objects 5th Cup: Collecting Collections
me = name: “Nicolás”, age: 26 for key, value of
me console.log “#{key}: #{value}” Iterating over objects 5th Cup: Collecting Collections
doubles = (n * 2 for n in [1..5]) 5th
Cup: Collecting Collections Comprehensions
n * 2 for n in [1..5] when n >
2 Filtering Comprehensions 5th Cup: Collecting Collections
n * 2 for n in [1..5] when n >
2 Filtering Comprehensions 5th Cup: Collecting Collections
n * 2 for n in [1..5] when n >
2 for n in [1..5] continue unless n > 2 n * 2 Filtering Comprehensions 5th Cup: Collecting Collections
n * 2 for n in [1..5] when n >
2 for n in [1..5] continue unless n > 2 n * 2 Filtering Comprehensions 5th Cup: Collecting Collections
6th Cup Context, the classy way
User = (id, name) -> this.id = id this.name =
name this.element = $(“#user-#{this.id}”) 6th Cup: Context, the classy way
Context Accessor 6th Cup: Context, the classy way User =
(id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
Context Accessor 6th Cup: Context, the classy way User =
(id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
Context Accessor 6th Cup: Context, the classy way User =
(id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
Context Accessor 6th Cup: Context, the classy way User =
(id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
User = (id, name) -> @id = id @name =
name @element = $(“#user-#{@id}”) Context Accessor 6th Cup: Context, the classy way
Property Arguments 6th Cup: Context, the classy way User =
(id, name) -> @id = id @name = name @element = $(“#user-#{@id}”)
User = (id, name) -> @id = id @name =
name @element = $(“#user-#{@id}”) Property Arguments 6th Cup: Context, the classy way
Property Arguments 6th Cup: Context, the classy way User =
(@id, @name) -> @element = $(“#user-#{@id}”)
Property Arguments 6th Cup: Context, the classy way User =
(@id, @name) -> @element = $(“#user-#{@id}”)
User = (@id, @name) -> @element = $(“#user-#{@id}”) Property Arguments
6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) 6th Cup:
Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) User.prototype.signOut =
-> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) User.prototype.signOut =
-> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) User.prototype.signOut =
-> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click
-> this.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click
-> this.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click
-> this.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) self =
this $(“a.sign-out”, @element).click -> self.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) self =
this $(“a.sign-out”, @element).click -> self.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click
=> this.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click
=> this.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click
=> this.signOut() false User.prototype.signOut = -> $.ajax(...) Bound Functions 6th Cup: Context, the classy way
User = (@id, @name) -> @element = $(“#user-#{@id}”) User.prototype.signOut =
-> ... 6th Cup: Context, the classy way
class User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut:
-> ... 6th Cup: Context, the classy way Classes
6th Cup: Context, the classy way Classes class User constructor:
(@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
6th Cup: Context, the classy way Classes class User constructor:
(@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
6th Cup: Context, the classy way Classes class User constructor:
(@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
6th Cup: Context, the classy way Inheritance class User constructor:
(@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
6th Cup: Context, the classy way Inheritance class SignedInUser extends
User ... class SignedOutUser extends User ...
6th Cup: Context, the classy way super class SignedInUser extends
User constructor: (args...) -> super args... $(“a.sign-out”, @element).click => this.signOut()
class User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut:
-> ... 6th Cup: Context, the classy way On variable locality
class window.User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut:
-> ... 6th Cup: Context, the classy way On variable locality
class window.User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut:
-> ... 6th Cup: Context, the classy way On variable locality
class this.User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut:
-> ... 6th Cup: Context, the classy way On variable locality
class @User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut:
-> ... 6th Cup: Context, the classy way On variable locality
None
We’ve Covered ➡ Object Literals ➡ String Interpolation ➡ Functions
➡ Default Arguments ➡ Splats ➡ Ranges ➡ Pattern Matching ➡ Context and this ➡ Property Accessors ➡ Bound Functions ➡ Classes ➡ Inheritance ➡ super
So…
…is it worth it?
None
None
Questions?
Thanks!
Thanks! http://github.com/foca @godfoca
Thanks! http://github.com/foca @godfoca
[email protected]
None
Follow-up: Existential Operator
languagesOfChoice = (best, langs...) -> “I love #{best}, and I
like #{langs.join(“, “)}” Follow-up: Existential Operator
languagesOfChoice = (best, langs...) -> “I love #{best}, and I
like #{langs.join(“, “)}” languagesOfChoice “Ruby” > I love Ruby, and I like Follow-up: 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 Follow-up: Existential Operator
Follow-up: 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 “)
languagesOfChoice = (best, langs...) -> ret = [] if best?
ret.push “I love #{best}” if langs.length > 0 ret.push “I like #{langs.join(“, “)}” ret.join(“, and “) Follow-up: 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 “) Follow-up: 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 “) Follow-up: 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 “) Follow-up: Existential Operator
languagesOfChoice “Ruby”, “JS”, “Python” > I love Ruby, and I
like JS, Python Follow-up: Existential Operator
languagesOfChoice “Ruby”, “JS”, “Python” > I love Ruby, and I
like JS, Python languagesOfChoice “Ruby” > I love Ruby Follow-up: 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 Follow-up: 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() > “” Follow-up: Existential Operator
expr? Follow-up: Existential Operator
expr? typeof expr !== undefined && expr !== null Follow-up:
Existential Operator
x ?= y Follow-up: Existential Operator
x ?= y x = y unless x? Follow-up: Existential
Operator
obj = x: { y: 2 } Follow-up: Existential Operator
obj = x: { y: 2 } obj.x?.y Follow-up: Existential
Operator
obj = x: { y: 2 } obj.x?.y if obj.x?
then obj.x.y else undefined Follow-up: Existential Operator
obj = x: { y: 2 } obj.x?.y if obj.x?
then obj.x.y else undefined Follow-up: Existential Operator
obj = x: { y: 2 } obj.x?.y if obj.x?
then obj.x.y else undefined Follow-up: Existential Operator
obj = x: { y: 2 } obj.x?.y if obj.x?
then obj.x.y else undefined Follow-up: Existential Operator
func?() Follow-up: Existential Operator
func?() func() if typeof func == “function” Follow-up: Existential Operator
options.callback?() Follow-up: Existential Operator
Follow-up: this
function isCute() { return this.cute; } Follow-up: this
var cuteKitty = { cute: true, isCute: isCute }; Follow-up:
this
var meanKitty = { cute: false, isCute: isCute }; Follow-up:
this
meanKitty.isCute() cuteKitty.isCute() Follow-up: this
cuteKitty.isCute() true meanKitty.isCute() Follow-up: this
cuteKitty.isCute() true meanKitty.isCute() false Follow-up: this
function whatHappensNow() { console.log(this); } whatHappensNow() Follow-up: this
function whatHappensNow() { console.log(this); } whatHappensNow() > [window] Follow-up: this
$(“a.sign-out”).click(function() { console.log(this); }); Follow-up: this
$(“a.sign-out”).click(function() { console.log(this); }); Follow-up: this
$(“a.sign-out”).click(function() { console.log(this); }); <a href=”#” class=”delete”>Delete</a> Follow-up: this
function returnThis() { return this; } Follow-up: this
function returnThis() { return this; } returnThis.apply(42); //=> 42 Follow-up:
this
function returnThis() { return this; } returnThis.apply(42); //=> 42 returnThis.apply(“hi”);
//=> “hi” Follow-up: this
Follow-up: Loop closures and do
for i in [1..5] console.log i Follow-up: Loop closures and
do
for i in [1..5] setTimeout (-> console.log i), 100 Follow-up:
Loop closures and do
for i in [1..5] setTimeout (-> console.log i), 100 >
5 > 5 > 5 > 5 > 5 Follow-up: Loop closures and do
None
for i in [1..5] setTimeout (-> console.log i), 100 >
5 > 5 > 5 > 5 > 5 Follow-up: Loop closures and do
for i in [1..5] ((i) -> setTimeout (-> console.log i),
100 )(i) > 1 > 2 > ... Follow-up: Loop closures and do
for i in [1..5] do (i) -> setTimeout (-> console.log
i), 100 > 1 > 2 > ... Follow-up: Loop closures and do
Follow-up: Comprehension Madness
A = [1, 2, 3, 4, 5] B = [8,
7, 1, 2] cartesian = ([x, y] for x in A for y in B) Keep It Simple, Stupid Follow-up: Comprehension Madness
(ret.push(val) unless val in ret) for val in orig when
shouldAdd(val) Keep It Simple, Stupid Follow-up: Comprehension Madness
None