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
540
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
80
Se Responsable
foca
0
190
Foreman in 5 minutes
foca
3
190
Una Parábola sobre Git
foca
1
170
Testing: It's a Horrible Idea
foca
6
590
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
650
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Discover Metal 4
rei315
2
140
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Become a Pro
speakerdeck
PRO
29
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
How to train your dragon (web standard)
notwaldorf
95
6.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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