Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
3.7k
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
130
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
0
3.9k
物流システムにおけるリファクタリングとアーキテクチャの再構築 〜依存関係とモジュール分割の重要性〜
deeprain
1
280
MoQとか勉強会#2 発表資料
yuki_uchida
1
120
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.3k
HTTP compression in PHP and Symfony apps
dunglas
2
870
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
420
距離関数を極める! / SESSIONS 2024
gam0022
0
360
新規学習のハードルを下げる方法とは?/ How to Make Learning Something New Easier?
nobuoooo
1
130
新卒研修で作ったアプリのご紹介
mkryo
0
230
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
370
Featured
See All Featured
Code Review Best Practice
trishagee
64
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
24k
RailsConf 2023
tenderlove
29
920
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Optimizing for Happiness
mojombo
376
70k
Rails Girls Zürich Keynote
gr2m
94
13k
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