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
700
15
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
More Decks by Nicolás Sanguinetti
See All by Nicolás Sanguinetti
It's Fine • A Tale of Terrible Misfortune
foca
0
97
Se Responsable
foca
0
210
Foreman in 5 minutes
foca
3
210
Una Parábola sobre Git
foca
1
200
Testing: It's a Horrible Idea
foca
6
630
Other Decks in Programming
See All in Programming
{ Android | Kotlin } Gradle Plugin in 2026
ryunen344
1
280
My Marp Sample
sinoue0108
0
140
KotlinConf Extended South Korea 2026 Keynote
l2hyunwoo
0
130
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
shorty5121
0
810
tsc.rip を支える技術 / Kyoto.なんか #8
susisu
0
4.3k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
tatsuki12
4
1.7k
自分的「カンファレンスの楽しみ方」
syumai
0
190
Press start. Python's next generation.
willingc
PRO
3
300
ALB ログから Trace を気合で繋げる技術
fohte
7
860
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
musan
3
260
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
110
Seeing Through Serverless: Observability for AWS Lambda with ADOT and CloudWatch Application Signals
seike460
PRO
1
120
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Documentation Writing (for coders)
carmenintech
77
5.5k
How to train your dragon (web standard)
notwaldorf
97
6.8k
The Cult of Friendly URLs
andyhume
79
7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
201
75k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
230
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.4k
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