Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Let's Have a Cup of CoffeeScript

5,476 views

Published on

CoffeeScript is a great way to write javascript. It provides many abstractions that simplify the language, and a few syntax niceties that make it much less noisy than pure javascript.

In this introductory talk, we present the language through several examples, looking at many of the features CoffeeScript provides for simplifying the way we write JavaScript. Hopefully in a way that will inspire you to go out and try it!

Published in: Technology, Business
  • Be the first to comment

Let's Have a Cup of CoffeeScript

  1. 1. Let’s Have a Cup of
  2. 2. JavaScript
  3. 3. 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” }}
  4. 4. 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”
  5. 5. me = { name: “Nicolás”, location: “Montevid age: 26, likesWorkingOn: [“R twitter: “@godfoca” github: “http://git
  6. 6. me = { name: “Nicolás” location: “Mont age: 26, likesWorkingOn: twitter: “@godf
  7. 7. There’s no varme = { name: “Nico location: age: 26,
  8. 8. 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” }}
  9. 9. 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” }}
  10. 10. 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”
  11. 11. 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”
  12. 12. 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”
  13. 13. 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”
  14. 14. 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”
  15. 15. Let’s Have a few Cups of
  16. 16. 1st CupA simple comparison
  17. 17. 1st Cup: A simple comparisonvar 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]));}
  18. 18. 1st Cup: A simple comparisonvar 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]));}
  19. 19. 1st Cup: A simple comparisonvar 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]));}
  20. 20. 1st Cup: A simple comparisonvar 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]));}
  21. 21. 1st Cup: A simple comparisonvar 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]));}
  22. 22. 1st Cup: A simple comparisonsquare = (num) -> num * numlist = [1..5]squares = (square n for n in list)
  23. 23. 1st Cup: A simple comparisonsquare = (num) -> num * numlist = [1..5]squares = (square n for n in list)
  24. 24. 1st Cup: A simple comparisonsquare = (num) -> num * numlist = [1..5]squares = (square n for n in list)
  25. 25. 1st Cup: A simple comparisonsquare = (num) -> num * numlist = [1..5]squares = (square n for n in list)
  26. 26. 1st Cup: A simple comparisonsquare = (num) -> num * numlist = [1..5]squares = (square n for n in list)
  27. 27. 2nd CupThe Useless Calculator
  28. 28. 2nd Cup: The Useless Calculatorvar add = function(num1, num2) {  return num1 + “ + “ + num2 + “ = “ + (num1 + num2);}console.log(add(2, 3))> 2 + 3 = 5console.log(add(5, 7))> 5 + 7 = 12
  29. 29. 2nd Cup: The Useless Calculatorvar add = function(num1, num2) {  return num1 + “ + “ + num2 + “ = “ + (num1 + num2);}console.log(add(2, 3))> 2 + 3 = 5console.log(add(5, 7))> 5 + 7 = 12
  30. 30. 2nd Cup: The Useless Calculatorvar add = function(num1, num2) {  return num1 + “ + “ + num2 + “ = “ + (num1 + num2);}console.log(add(2, 3))> 2 + 3 = 5console.log(add(5, 7))> 5 + 7 = 12
  31. 31. 2nd Cup: The Useless Calculatorvar add = function(num1, num2) {  return num1 + “ + “ + num2 + “ = “ + (num1 + num2);}console.log(add(2, 3))> 2 + 3 = 5console.log(add(5, 7))> 5 + 7 = 12
  32. 32. 2nd Cup: The Useless Calculatorvar add = function(num1, num2) {  return num1 + “ + “ + num2 + “ = “ + (num1 + num2);}console.log(add(2, 3))> 2 + 3 = 5console.log(add(5, 7))> 5 + 7 = 12
  33. 33. 2nd Cup: The Useless Calculatoradd = (num1, num2) -> “#{num1} + #{num2} = #{num1 + num2}”console.log add(2, 3)> 2 + 3 = 5console.log add(5, 7)> 5 + 7 = 12
  34. 34. 2nd Cup: The Useless Calculatoradd = (num1, num2) -> “#{num1} + #{num2} = #{num1 + num2}”console.log add(2, 3)> 2 + 3 = 5console.log add(5, 7)> 5 + 7 = 12
  35. 35. 2nd Cup: The Useless Calculatoradd = (num1, num2) -> “#{num1} + #{num2} = #{num1 + num2}”console.log add(2, 3)> 2 + 3 = 5console.log add(5, 7)> 5 + 7 = 12
  36. 36. 2nd Cup: The Useless Calculatoradd = (num1, num2) -> “#{num1} + #{num2} = #{num1 + num2}”console.log add(2, 3)> 2 + 3 = 5console.log add(5, 7)> 5 + 7 = 12
  37. 37. 2nd Cup: The Useless Calculatoradd = (num1, num2) -> “#{num1} + #{num2} = #{num1 + num2}”console.log add(2, 3)> 2 + 3 = 5console.log add(5, 7)> 5 + 7 = 12
  38. 38. 3rd CupYour Favorite Language
  39. 39. 3rd Cup: Your Favorite LanguagelanguageOfChoice = (lang) -> “#{lang} rocks!”
  40. 40. 3rd Cup: Your Favorite LanguagelanguageOfChoice = (lang) -> “#{lang} rocks!”console.log languageOfChoice(“Ruby”)> Ruby rocks!
  41. 41. 3rd Cup: Your Favorite Language Implicit ReturnlanguageOfChoice = (lang) -> “#{lang} rocks!”
  42. 42. 3rd Cup: Your Favorite Language Implicit ReturnlanguageOfChoice = (lang) -> return “#{lang} rocks!”
  43. 43. 3rd Cup: Your Favorite Language Implicit ReturnlanguageOfChoice = (lang) -> if lang == “PHP” “Get outta here!” else “#{lang} rocks!”
  44. 44. 3rd Cup: Your Favorite Language Implicit ReturnlanguageOfChoice = (lang) -> if lang == “PHP” return “Get outta here!” else return “#{lang} rocks!”
  45. 45. 3rd Cup: Your Favorite Language Default ArgumentslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”
  46. 46. 3rd Cup: Your Favorite Language Default ArgumentslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”console.log languageOfChoice(“Lua”)> Lua rocks!
  47. 47. 3rd Cup: Your Favorite Language Default ArgumentslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”console.log languageOfChoice(“Lua”)> Lua rocks!console.log languageOfChoice()> Ruby rocks!
  48. 48. 3rd Cup: Your Favorite Language Optional ParentheseslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”
  49. 49. 3rd Cup: Your Favorite Language Optional ParentheseslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”console.log languageOfChoice “Lua”> Lua rocks!
  50. 50. 3rd Cup: Your Favorite Language Optional ParentheseslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”console.log languageOfChoice “Lua”> Lua rocks!console.log languageOfChoice
  51. 51. 3rd Cup: Your Favorite Language Optional ParentheseslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”console.log languageOfChoice “Lua”> Lua rocks!console.log languageOfChoice> [function “languageOfChoice”]
  52. 52. 3rd Cup: Your Favorite Language Optional ParentheseslanguageOfChoice = (lang = “Ruby”) -> “#{lang} rocks!”console.log languageOfChoice “Lua”> Lua rocks!console.log languageOfChoice> [function “languageOfChoice”]console.log languageOfChoice()> Ruby rocks!
  53. 53. 3rd Cup: Your Favorite Language SplatslanguagesOfChoice = (langs...) -> “I like #{langs.join(“, “)}”
  54. 54. 3rd Cup: Your Favorite Language SplatslanguagesOfChoice = (langs...) -> “I like #{langs.join(“, “)}”languagesOfChoice “Ruby”, “JS”, “Python”> I like Ruby, JS, Python
  55. 55. 3rd Cup: Your Favorite Language SplatsmyLangs = [“Ruby”, “JS”, “Python”]
  56. 56. 3rd Cup: Your Favorite Language SplatsmyLangs = [“Ruby”, “JS”, “Python”]languagesOfChoice myLangs...> I like Ruby, JS, Python
  57. 57. 3rd Cup: Your Favorite Language SplatslanguagesOfChoice = (best, langs...) -> “I love #{best}, and I like #{langs.join(“, “)}”
  58. 58. 3rd Cup: Your Favorite Language SplatslanguagesOfChoice = (best, langs...) -> “I love #{best}, and I like #{langs.join(“, “)}”languagesOfChoice “Ruby”, “JS”, “Python”> I love Ruby, and I like JS, Python
  59. 59. 3rd Cup: Your Favorite Language SplatslanguagesOfChoice = (langs..., worst) -> “I like #{langs.join(“, “)}, but I hate #{worst}”
  60. 60. 3rd Cup: Your Favorite Language SplatslanguagesOfChoice = (langs..., worst) -> “I like #{langs.join(“, “)}, but I hate #{worst}”languagesOfChoice “Ruby”, “JS”, “PHP”> I like Ruby, JS, but I hate PHP
  61. 61. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> “I love #{best}, and I like #{langs.join(“, “)}”
  62. 62. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> “I love #{best}, and I like #{langs.join(“, “)}”languagesOfChoice “Ruby”> I love Ruby, and I like
  63. 63. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> “I love #{best}, and I like #{langs.join(“, “)}”languagesOfChoice “Ruby”> I love Ruby, and I likelanguagesOfChoice()> I love , and I like
  64. 64. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> ret = [] if best? ret.push “I love #{best}” if langs.length > 0 ret.push “I like #{langs.join(“, “)}” ret.join(“, and “)
  65. 65. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> ret = [] if best? ret.push “I love #{best}” if langs.length > 0 ret.push “I like #{langs.join(“, “)}” ret.join(“, and “)
  66. 66. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> ret = [] if best? ret.push “I love #{best}” if langs.length > 0 ret.push “I like #{langs.join(“, “)}” ret.join(“, and “)
  67. 67. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> ret = [] if best? ret.push “I love #{best}” if langs.length > 0 ret.push “I like #{langs.join(“, “)}” ret.join(“, and “)
  68. 68. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice = (best, langs...) -> ret = [] if best? ret.push “I love #{best}” if langs.length > 0 ret.push “I like #{langs.join(“, “)}” ret.join(“, and “)
  69. 69. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice “Ruby”, “JS”, “Python”> I love Ruby, and I like JS, Python
  70. 70. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice “Ruby”, “JS”, “Python”> I love Ruby, and I like JS, PythonlanguagesOfChoice “Ruby”> I love Ruby
  71. 71. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice “Ruby”, “JS”, “Python”> I love Ruby, and I like JS, PythonlanguagesOfChoice “Ruby”> I love RubylanguagesOfChoice undefined, “Ruby”, “JS”> I like Ruby, JS
  72. 72. 3rd Cup: Your Favorite Language Existential OperatorlanguagesOfChoice “Ruby”, “JS”, “Python”> I love Ruby, and I like JS, PythonlanguagesOfChoice “Ruby”> I love RubylanguagesOfChoice undefined, “Ruby”, “JS”> I like Ruby, JSlanguagesOfChoice()> “”
  73. 73. 3rd Cup: Your Favorite Language Existential Operator expr?
  74. 74. 3rd Cup: Your Favorite Language Existential Operator expr?typeof expr !== undefined && expr !== null
  75. 75. 3rd Cup: Your Favorite Language Existential Operator x ?= y
  76. 76. 3rd Cup: Your Favorite Language Existential Operator x ?= y x = y unless x?
  77. 77. 3rd Cup: Your Favorite Language Existential Operator obj = x: { y: 2 }
  78. 78. 3rd Cup: Your Favorite Language Existential Operator obj = x: { y: 2 } obj.x?.y
  79. 79. 3rd Cup: Your Favorite Language Existential Operator obj = x: { y: 2 } obj.x?.yif obj.x? then obj.x.y else undefined
  80. 80. 3rd Cup: Your Favorite Language Existential Operator obj = x: { y: 2 } obj.x?.yif obj.x? then obj.x.y else undefined
  81. 81. 3rd Cup: Your Favorite Language Existential Operator obj = x: { y: 2 } obj.x?.yif obj.x? then obj.x.y else undefined
  82. 82. 3rd Cup: Your Favorite Language Existential Operator obj = x: { y: 2 } obj.x?.yif obj.x? then obj.x.y else undefined
  83. 83. 3rd Cup: Your Favorite Language Existential Operator func?()
  84. 84. 3rd Cup: Your Favorite Language Existential Operator func?()func() if typeof func == “function”
  85. 85. 3rd Cup: Your Favorite Language Existential Operator options.callback?()
  86. 86. Interlude Ranges
  87. 87. Interlude: Ranges[1..5] #=> [1, 2, 3, 4, 5]
  88. 88. Interlude: Ranges[1..5] #=> [1, 2, 3, 4, 5][1...5] #=> [1, 2, 3, 4]
  89. 89. Interlude: Rangeslist = [1, 2, 3, 4, 5]list[2..3] #=> [3, 4]
  90. 90. Interlude: Rangeslist = [1, 2, 3, 4, 5]list[2..-1] #=> [3, 4, 5]
  91. 91. 4th Cup Patterns
  92. 92. 4th Cup: Patternslist = [“Ruby”, “JS”, “Python”]
  93. 93. 4th Cup: Patternslist = [“Ruby”, “JS”, “Python”] Head Tail
  94. 94. 4th Cup: Patternslist = [“Ruby”, “JS”, “Python”]head = list[0]tail = list[1..-1]
  95. 95. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]]
  96. 96. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]] Pattern
  97. 97. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]] Pattern Values
  98. 98. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]]
  99. 99. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]]
  100. 100. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]]head #=> “Ruby”
  101. 101. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail] = [list[0], list[1..-1]]head #=> “Ruby”tail #=> [“JS”, “Python”]
  102. 102. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail...] = list
  103. 103. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail...] = list
  104. 104. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail...] = listhead #=> “Ruby”
  105. 105. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][head, tail...] = listhead #=> “Ruby”tail #=> [“JS”, “Python”]
  106. 106. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][top, rest..., bottom] = list
  107. 107. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][top, rest..., bottom] = listtop #=> “Ruby”
  108. 108. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][top, rest..., bottom] = listtop #=> “Ruby”bottom #=> “Python”
  109. 109. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”, “Python”][top, rest..., bottom] = listtop #=> “Ruby”bottom #=> “Python”rest #=> [“JS”]
  110. 110. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”][top, rest..., bottom] = list
  111. 111. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”][top, rest..., bottom] = listtop #=> “Ruby”
  112. 112. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”][top, rest..., bottom] = listtop #=> “Ruby”bottom #=> “JS”
  113. 113. 4th Cup: Patterns Pattern Matchinglist = [“Ruby”, “JS”][top, rest..., bottom] = listtop #=> “Ruby”bottom #=> “JS”rest #=> []
  114. 114. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”
  115. 115. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”name = me.nameage = me.age
  116. 116. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”{ name: name, age: age } = me
  117. 117. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”{ name: name, age: age } = me Pattern
  118. 118. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”{ name: name, age: age } = me Variables
  119. 119. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”{ name: name, age: age } = me Values
  120. 120. 4th Cup: Patterns Pattern Matchingme = name: “Nicolás” age: 26 company: name: “Cubox”{ name: name, age: age } = mename #=> “Nicolás”age #=> 26
  121. 121. 4th Cup: Patterns Pattern Matching{ name, age } = me
  122. 122. 4th Cup: Patterns Pattern Matching{ name, age } = mename #=> “Nicolás”
  123. 123. 4th Cup: Patterns Pattern Matching{ name, age } = mename #=> “Nicolás”age #=> 26
  124. 124. 5th CupCollecting Collections
  125. 125. 5th Cup: Collecting Collections Iterating over arrayslist = [1..10]for item in list doSomethingWith(item)
  126. 126. 5th Cup: Collecting Collections Iterating over arrayslist = [1..10]for item in list doSomethingWith(item)
  127. 127. 5th Cup: Collecting Collections Iterating over objectsme = name: “Nicolás”, age: 26for key, value of me console.log “#{key}: #{value}”
  128. 128. 5th Cup: Collecting Collections Iterating over objectsme = name: “Nicolás”, age: 26for key, value of me console.log “#{key}: #{value}”
  129. 129. 5th Cup: Collecting Collections Comprehensionsalert n for n in [1..5]
  130. 130. 5th Cup: Collecting Collections Comprehensionsalert n for n in [1..5]
  131. 131. 5th Cup: Collecting Collections Comprehensionsdoubles = (n * 2 for n in [1..5])
  132. 132. 5th Cup: Collecting Collections Filtering Comprehensionsalert n for n in [1..5] when n > 2
  133. 133. 5th Cup: Collecting Collections Filtering Comprehensionsalert n for n in [1..5] when n > 2
  134. 134. 5th Cup: Collecting Collections Filtering Comprehensionsalert n for n in [1..5] when n > 2for n in [1..5] continue unless n > 2 alert n
  135. 135. 5th Cup: Collecting Collections Filtering Comprehensionsalert n for n in [1..5] when n > 2for n in [1..5] continue unless n > 2 alert n
  136. 136. Interlude this
  137. 137. Interlude: thisfunction isCute() { return this.cute;}
  138. 138. Interlude: this var cuteKitty = { cute: true, isCute: isCute };
  139. 139. Interlude: this var meanKitty = { cute: false, isCute: isCute };
  140. 140. Interlude: thiscuteKitty.isCute() meanKitty.isCute()
  141. 141. Interlude: thiscuteKitty.isCute() meanKitty.isCute() true
  142. 142. Interlude: thiscuteKitty.isCute() meanKitty.isCute() true false
  143. 143. Interlude: thisfunction whatHappensNow() { console.log(this);}whatHappensNow()
  144. 144. Interlude: thisfunction whatHappensNow() { console.log(this);}whatHappensNow()> [window]
  145. 145. Interlude: this$(“a.sign-out”).click(function() { console.log(this);});
  146. 146. Interlude: this$(“a.sign-out”).click(function() { console.log(this);});
  147. 147. Interlude: this$(“a.sign-out”).click(function() { console.log(this);});<a href=”#” class=”delete”>Delete</a>
  148. 148. Interlude: thisfunction returnThis() { return this;}
  149. 149. Interlude: thisfunction returnThis() { return this;}returnThis.apply(42); //=> 42
  150. 150. Interlude: thisfunction returnThis() { return this;}returnThis.apply(42); //=> 42returnThis.apply(“hi”); //=> “hi”
  151. 151. 6th CupContext, the classy way
  152. 152. 6th Cup: Context, the classy wayUser = (id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
  153. 153. 6th Cup: Context, the classy way Context AccessorUser = (id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
  154. 154. 6th Cup: Context, the classy way Context AccessorUser = (id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
  155. 155. 6th Cup: Context, the classy way Context AccessorUser = (id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
  156. 156. 6th Cup: Context, the classy way Context AccessorUser = (id, name) -> this.id = id this.name = name this.element = $(“#user-#{this.id}”)
  157. 157. 6th Cup: Context, the classy way Context AccessorUser = (id, name) -> @id = id @name = name @element = $(“#user-#{@id}”)
  158. 158. 6th Cup: Context, the classy way Property ArgumentsUser = (id, name) -> @id = id @name = name @element = $(“#user-#{@id}”)
  159. 159. 6th Cup: Context, the classy way Property ArgumentsUser = (id, name) -> @id = id @name = name @element = $(“#user-#{@id}”)
  160. 160. 6th Cup: Context, the classy way Property ArgumentsUser = (@id, @name) -> @element = $(“#user-#{@id}”)
  161. 161. 6th Cup: Context, the classy way Property ArgumentsUser = (@id, @name) -> @element = $(“#user-#{@id}”)
  162. 162. 6th Cup: Context, the classy way Property ArgumentsUser = (@id, @name) -> @element = $(“#user-#{@id}”)
  163. 163. 6th Cup: Context, the classy wayUser = (@id, @name) -> @element = $(“#user-#{@id}”)
  164. 164. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”)User.prototype.signOut = -> $.ajax(...)
  165. 165. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”)User.prototype.signOut = -> $.ajax(...)
  166. 166. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”)User.prototype.signOut = -> $.ajax(...)
  167. 167. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click -> this.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  168. 168. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click -> this.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  169. 169. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click -> this.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  170. 170. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) self = this $(“a.sign-out”, @element).click -> self.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  171. 171. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) self = this $(“a.sign-out”, @element).click -> self.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  172. 172. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click => this.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  173. 173. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click => this.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  174. 174. 6th Cup: Context, the classy way Bound FunctionsUser = (@id, @name) -> @element = $(“#user-#{@id}”) $(“a.sign-out”, @element).click => this.signOut() falseUser.prototype.signOut = -> $.ajax(...)
  175. 175. 6th Cup: Context, the classy wayUser = (@id, @name) -> @element = $(“#user-#{@id}”)User.prototype.signOut = -> ...
  176. 176. 6th Cup: Context, the classy way Classesclass User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  177. 177. 6th Cup: Context, the classy way Classesclass User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  178. 178. 6th Cup: Context, the classy way Classesclass User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  179. 179. 6th Cup: Context, the classy way Classesclass User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  180. 180. 6th Cup: Context, the classy way Inheritanceclass User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  181. 181. 6th Cup: Context, the classy way Inheritanceclass SignedInUser extends User ...class SignedOutUser extends User ...
  182. 182. 6th Cup: Context, the classy way superclass SignedInUser extends User constructor: (args...) -> super args... $(“a.sign-out”, @element).click => this.signOut()
  183. 183. 6th Cup: Context, the classy way On variable localityclass User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  184. 184. 6th Cup: Context, the classy way On variable localityclass window.User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  185. 185. 6th Cup: Context, the classy way On variable localityclass window.User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  186. 186. 6th Cup: Context, the classy way On variable localityclass this.User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  187. 187. 6th Cup: Context, the classy way On variable localityclass @User constructor: (@id, @name) -> @element = $(“#user-#{@id}”) signOut: -> ...
  188. 188. We’ve Covered➡ Object Literals ➡ Existential Operator➡ String Interpolation ➡ Context and this➡ Functions ➡ Property Accessors➡ Default Arguments ➡ Bound Functions➡ Splats ➡ Classes➡ Ranges ➡ Inheritance➡ Pattern Matching ➡ super
  189. 189. So…
  190. 190. …is it worth it?
  191. 191. Questions?
  192. 192. Thanks!
  193. 193. Thanks!http://github.com/foca @godfoca
  194. 194. Thanks! http://github.com/foca @godfocajobs@cuboxsa.com
  195. 195. Follow-up:Loop closures and do
  196. 196. Follow-up: Loop closures and dofor i in [1..5] console.log i
  197. 197. Follow-up: Loop closures and dofor i in [1..5] setTimeout (-> console.log i), 100
  198. 198. Follow-up: Loop closures and dofor i in [1..5] setTimeout (-> console.log i), 100> 5> 5> 5> 5> 5
  199. 199. Follow-up: Loop closures and dofor i in [1..5] setTimeout (-> console.log i), 100> 5> 5> 5> 5> 5
  200. 200. Follow-up: Loop closures and dofor i in [1..5] ((i) -> setTimeout (-> console.log i), 100 )(i)> 1> 2> ...
  201. 201. Follow-up: Loop closures and dofor i in [1..5] do (i) -> setTimeout (-> console.log i), 100> 1> 2> ...
  202. 202. Follow-up:Comprehension Madness
  203. 203. Follow-up: Comprehension Madness Keep It Simple, StupidA = [1, 2, 3, 4, 5]B = [8, 7, 1, 2]cartesian = ([x, y] for x in A for y in B)
  204. 204. Follow-up: Comprehension Madness Keep It Simple, Stupid(ret.push(val) unless val in ret) for val in orig when shouldAdd(val)

×