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
520
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
72
Se Responsable
foca
0
180
Foreman in 5 minutes
foca
3
180
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
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
みんなでプロポーザルを書いてみた
yuriko1211
0
280
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
260
距離関数を極める! / SESSIONS 2024
gam0022
0
290
Ethereum_.pdf
nekomatu
0
470
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
910
cmp.Or に感動した
otakakot
3
230
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Six Lessons from altMBA
skipperchong
27
3.5k
Designing for humans not robots
tammielis
250
25k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Building Adaptive Systems
keathley
38
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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