Let's Have a Cup of CoffeeScript

5,026 views
4,920 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
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,026
On SlideShare
0
From Embeds
0
Number of Embeds
385
Actions
Shares
0
Downloads
208
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide
  • \n
  • Here to talk CoffeeScript \nCS is lang generates JS\n***\nBut first: JavaScript\n
  • Quick Hack: 10 days\nLisp and self, political: C syntax\nBut, web’s lingua franca\nSome Good Parts\nSome Not-So-Good Parts\n
  • Not-So-Good outweigh Good\nCoffee focuses on Good\nHides bad.\n***\nbut first, this is me\n
  • but first, this is me\nname / location / work\nhere’s some javascript\nthere’s something very wrong with it\n
  • \n
  • \n
  • \n
  • there’s no var\nme is global\npotentially dangerous\nand a very common mistake\ndon’t want to debug sth for 3 hours\nfind out it was you who made the mistake\nvery frustrating\n
  • fortunately here to talk about cs\ncs has no var keyword :)\n
  • perfectly valid cs\n*whew*\nin cs all vars are local\nwant global? force it\n***\nhaml\n
  • cs and haml compared a lot\nboth abstractions\nboth generate known language\n…both have significant whitespace\n\n
  • fns must be indented if span mult lines\nifs and other statements as well\nbut cs also takes advantage w/ obj lit\n***\nignore curlies\n
  • by making curly braces optional\n
  • if you indent your keys properly\n
  • it goes beyond curly braces\nif we write one key:value per line\n
  • commas are also optional\n
  • so this is me, in coffeescript\n
  • just one cup? unacceptable\nstructured in various examples\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • VERY succinct\ndare I say more expressive\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • let’s talk functions\nsimple syntax\nargs, arrow, body\n
  • call as any other fn\n***\nimplicit return\n
  • no need to return from functions\n
  • last statement always has implicit return\n***\nif/etc constructs\n
  • even if last statement is an if, while, etc\n
  • it always has an implicit return\n***\ndefault args, favorite lang?\n
  • fns can take def args\n\n
  • \n
  • ***\noptional parens\n
  • you prob noticed I call fns w/o ()\n
  • this is perfectly valid\n
  • what do you expect will happen?\n
  • fns are 1st class objects\nreferring to a fn will return the fn obj\n
  • if the fn takes no arguments\nparens are mandatory\n***\nhaving to choose one lang is unfair\nI like ruby, js, python, lua, coffee…\nlet’s make our function accept mult args\nalready in js: arguments, but clunky\n
  • by using ... we tell the function\ntake all args, pass array w/ them to the fn\n
  • by using ... we tell the function\ntake all args, pass array w/ them to the fn\n***\nsplat when calling\n
  • let’s say we have an array\n
  • can use splats to expand it to args\n\nbut even if we like a lot of langs\nwe always have a favorite\n
  • splats can be after arguments\n
  • ***\nbut splats don’t need to go at the end\n
  • as long as you have only one splat\nthey can go anywhere\n
  • \n
  • go back to thinking positive\nwhat happens when called with 1 arg?\n
  • or no args?\n
  • so let’s fix that\nwe need to return both separately\ncheck ‘best’ -> return I love...\ncheck ‘langs’ -> return I like...\ndefine array, add each bit iff, join array\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • let’s try it\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ***\nranges\n
  • \n
  • very much like ruby\nexcept only for numbers\nwe have inclusive ranges\n
  • and exclusive ranges\n***\nnot only for generating arrays\n
  • ranges are useful for slicing\n
  • and they support negative ind\n
  • \n
  • \n
  • \n
  • \n
  • assign mult vars at the same time\n
  • assign mult vars at the same time\n
  • assign mult vars at the same time\n
  • 1st is matched to the 1st element\n
  • 2nd element is matched to 2nd\n
  • this works\nwe get what we want\n
  • but syntax is very noisy\nin fact, it was better before!\n
  • we match a list to a list\n
  • \n
  • \n
  • \n
  • assign mult vars at the same time\n
  • assign mult vars at the same time\n
  • assign mult vars at the same time\n
  • assign mult vars at the same time\n
  • what would happen now?\n
  • what would happen now?\n
  • what would happen now?\n
  • non-splat args always take precedence over splats\n***\nranges…pat match is not only meant for arrays\n
  • we’ve an obj literal\nwe want to get the name and age\n
  • simple, right?\nbut we want pattern matching\n
  • \n
  • \n
  • \n
  • \n
  • but still, there’s repetition\nvar == key\n
  • \n
  • \n
  • ***\ncollections\n
  • - iterations\n- array comprehensions\n\n
  • basic iteration on an array\n
  • you use in for arrays\n
  • can also iterate over key/val on objects\n
  • watch out! of for gral objects\n
  • comprehensions\niterate over a list and do sth with items\n
  • just a postfix for (almost)\n
  • also, map\n
  • or select/filter\n\n
  • when is equivalent to skipping items\nreturned array only has subset\n***\nif you expanded this into a full for\n
  • when is equivalent to skipping steps\n
  • ***\nthis\n
  • <show hands> how many fully understand this?\njavascript has keyword “this”\nit refers to current “evaluation context”\nakin to current scope\n
  • we have a cat\n
  • \n
  • \n
  • \n
  • \n
  • this is the receiver when explicit receiver\n
  • can anyone tell?\n
  • no receiver: this is top context\n
  • \n
  • \n
  • \n
  • how does jquery do it?\n
  • fn.apply\n
  • “this” refers to whatever we pass\n***\nfinal cup: context\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ***\ncs takes @ from ruby\n
  • there’s a bit of repetition\n***\nproperty arguments\n
  • define arguments…\n\n
  • … just to assign them to this.whatever\n
  • shorthand syntax\n
  • assigns the first argument to this.id\n
  • assigns the second argument to this.name\n
  • \n
  • let’s say user has signout fn\n\n
  • triggers ajax request\nwe don’t care about internals\n
  • trigger by a browser event\n
  • naive implementation\n
  • naive implementation\ndoesn’t work\n
  • dom element\n
  • \n
  • naive solution\n
  • naive solution\n
  • better solution\n
  • better solution\nforces this inside function\nwraps function so it calls apply\n
  • ***\nlet’s disregard the impl\n
  • pretty, but not idiomatic\nthis looks a lot like a class\n
  • \n
  • class keyword\n
  • constructor function\n
  • other functions are just nested\nno explicit prototypes\n
  • user abilities depend on user signed in or not\neg only signed in users can signOut\n
  • user abilities depend on user signed in or not\nwe can extend User to provide specifics\n
  • and we can use super\n
  • CS wraps everything on an ANON FREE fn\nso everything is truly local to the file it’s defined on\nnice, but we want classes outside!\n\n\n
  • global class\n\n
  • anon free fn => this is window\n\n
  • anon free fn => this is window\n\n
  • you can use @\n\n
  • \n
  • \n
  • \n
  • you tell me :)\n\n
  • there’s a large community\n
  • big names using it like 37s\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • let’s take this simple for loop\n
  • suppose we need timeouts\nwe wrap it in a function\nbut…\n
  • \n
  • \n
  • js passes last value to closure\n
  • solution: autocalling fn\nensure closure gets proper val\n
  • cs has a shorthand :)\n
  • \n
  • this can start getting weird\n\n
  • and get downright out of hand\n
  • down this road lies madness\nKeep It Simple, Stupid\n
  • 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)

    ×