Let's Have a Cup of CoffeeScript

A run through a lot of features CoffeeScript offers to ease your JavaScript development.

Transcript

1. Let’s Have a Cup of
   

   View Slide

2. View Slide

3. JavaScript
   

   View Slide

4. View Slide

5. JavaScript
   

   View Slide

6. View Slide

7. 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”
   }
   }
   

   View Slide

8. 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”
   

   View Slide

9. me = {
   name: “Nicolás”,
   location: “Montevid
   age: 26,
   likesWorkingOn: [“R
   twitter: “@godfoca”
   github: “http://git
   

   View Slide

10. me = {
    name: “Nicolás”
    location: “Mont
    age: 26,
    likesWorkingOn:
    twitter: “@godf
    

    View Slide

11. = {
    name: “Nico
    location: “
    age: 26,
    me
    There’s no var
    

    View Slide

12. View Slide

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”
    }
    }
    

    View Slide

14. View Slide

15. 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”
    }
    }
    

    View Slide

16. 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”
    

    View Slide

17. 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”
    

    View Slide

18. 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”
    

    View Slide

19. 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”
    

    View Slide

20. 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”
    

    View Slide

21. Let’s Have a Cup of
    

    View Slide

22. Let’s Have a Cup (or six) of
    

    View Slide

23. 1st Cup
    A simple comparison
    

    View Slide

24. 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
    

    View Slide

25. 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
    

    View Slide

26. 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
    

    View Slide

27. 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
    

    View Slide

28. 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
    

    View Slide

29. square = (num) -> num * num
    list = [1..5]
    squares = (square n for n in list)
    1st Cup: A simple comparison
    

    View Slide

30. square = (num) -> num * num
    list = [1..5]
    squares = (square n for n in list)
    1st Cup: A simple comparison
    

    View Slide

31. square = (num) -> num * num
    list = [1..5]
    squares = (square n for n in list)
    1st Cup: A simple comparison
    

    View Slide

32. square = (num) -> num * num
    list = [1..5]
    squares = (square n for n in list)
    1st Cup: A simple comparison
    

    View Slide

33. square = (num) -> num * num
    list = [1..5]
    squares = (square n for n in list)
    1st Cup: A simple comparison
    

    View Slide

34. 2nd Cup
    The Useless Calculator
    

    View Slide

35. 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
    

    View Slide

36. 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
    

    View Slide

37. 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
    

    View Slide

38. 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
    

    View Slide

39. 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
    

    View Slide

40. 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
    

    View Slide

41. 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
    

    View Slide

42. 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
    

    View Slide

43. 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
    

    View Slide

44. 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
    

    View Slide

45. 3rd Cup
    Your Favorite Language
    

    View Slide

46. languageOfChoice = (lang) ->
    “#{lang} rocks!”
    3rd Cup: Your Favorite Language
    

    View Slide

47. languageOfChoice = (lang) ->
    “#{lang} rocks!”
    3rd Cup: Your Favorite Language
    

    View Slide

48. languageOfChoice = (lang) ->
    “#{lang} rocks!”
    3rd Cup: Your Favorite Language
    

    View Slide

49. languageOfChoice = (lang) ->
    “#{lang} rocks!”
    3rd Cup: Your Favorite Language
    

    View Slide

50. languageOfChoice = (lang) ->
    “#{lang} rocks!”
    console.log languageOfChoice(“Ruby”)
    > Ruby rocks!
    3rd Cup: Your Favorite Language
    

    View Slide

51. languageOfChoice = (lang) ->
    “#{lang} rocks!”
    Implicit Return
    3rd Cup: Your Favorite Language
    

    View Slide

52. languageOfChoice = (lang) ->
    return “#{lang} rocks!”
    Implicit Return
    3rd Cup: Your Favorite Language
    

    View Slide

53. languageOfChoice = (lang) ->
    if lang == “PHP”
    “Get outta here!”
    else
    “#{lang} rocks!”
    Implicit Return
    3rd Cup: Your Favorite Language
    

    View Slide

54. languageOfChoice = (lang) ->
    if lang == “PHP”
    return “Get outta here!”
    else
    return “#{lang} rocks!”
    Implicit Return
    3rd Cup: Your Favorite Language
    

    View Slide

55. Default Arguments
    languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    3rd Cup: Your Favorite Language
    

    View Slide

56. languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    console.log languageOfChoice(“Lua”)
    > Lua rocks!
    Default Arguments
    3rd Cup: Your Favorite Language
    

    View Slide

57. languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    console.log languageOfChoice(“Lua”)
    > Lua rocks!
    console.log languageOfChoice()
    > Ruby rocks!
    Default Arguments
    3rd Cup: Your Favorite Language
    

    View Slide

58. Optional Parentheses
    languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    3rd Cup: Your Favorite Language
    

    View Slide

59. languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    console.log languageOfChoice “Lua”
    > Lua rocks!
    Optional Parentheses
    3rd Cup: Your Favorite Language
    

    View Slide

60. languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    console.log languageOfChoice “Lua”
    > Lua rocks!
    console.log languageOfChoice
    Optional Parentheses
    3rd Cup: Your Favorite Language
    

    View Slide

61. languageOfChoice = (lang = “Ruby”) ->
    “#{lang} rocks!”
    console.log languageOfChoice “Lua”
    > Lua rocks!
    console.log languageOfChoice
    > [Function]
    Optional Parentheses
    3rd Cup: Your Favorite Language
    

    View Slide

62. 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
    

    View Slide

63. Splats
    languagesOfChoice = (langs...) ->
    “I like #{langs.join(“, “)}”
    3rd Cup: Your Favorite Language
    

    View Slide

64. Splats
    languagesOfChoice = (langs...) ->
    “I like #{langs.join(“, “)}”
    languagesOfChoice “Ruby”, “JS”, “Python”
    > I like Ruby, JS, Python
    3rd Cup: Your Favorite Language
    

    View Slide

65. Splats
    myLangs = [“Ruby”, “JS”, “Python”]
    3rd Cup: Your Favorite Language
    

    View Slide

66. Splats
    myLangs = [“Ruby”, “JS”, “Python”]
    languagesOfChoice myLangs...
    > I like Ruby, JS, Python
    3rd Cup: Your Favorite Language
    

    View Slide

67. Splats
    languagesOfChoice = (best, langs...) ->
    “I love #{best},
    and I like #{langs.join(“, “)}”
    3rd Cup: Your Favorite Language
    

    View Slide

68. 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
    

    View Slide

69. Splats
    languagesOfChoice = (langs..., worst) ->
    “I like #{langs.join(“, “)},
    but I hate #{worst}”
    3rd Cup: Your Favorite Language
    

    View Slide

70. 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
    

    View Slide

71. 4th Cup
    Getting Inside Your Objects
    

    View Slide

72. list = [“Ruby”, “JS”, “Python”]
    4th Cup: Getting Inside Your Objects
    

    View Slide

73. list = [“Ruby”, “JS”, “Python”]
    first_two = list[0..1]
    4th Cup: Getting Inside Your Objects
    Tasty Slices
    

    View Slide

74. list = [“Ruby”, “JS”, “Python”]
    first_two = list[0..1]
    first_two #=> [“Ruby”, “JS”]
    4th Cup: Getting Inside Your Objects
    Tasty Slices
    

    View Slide

75. list = [“Ruby”, “JS”, “Python”]
    last_two = list[1..-1]
    4th Cup: Getting Inside Your Objects
    Tasty Slices
    

    View Slide

76. list = [“Ruby”, “JS”, “Python”]
    last_two = list[1..-1]
    last_two #=> [“JS”, “Python”]
    4th Cup: Getting Inside Your Objects
    Tasty Slices
    

    View Slide

77. list = [“Ruby”, “JS”, “Python”]
    4th Cup: Getting Inside Your Objects
    

    View Slide

78. list = [“Ruby”, “JS”, “Python”]
    Head Tail
    4th Cup: Getting Inside Your Objects
    

    View Slide

79. list = [“Ruby”, “JS”, “Python”]
    head = list[0]
    tail = list[1..-1]
    4th Cup: Getting Inside Your Objects
    

    View Slide

80. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

81. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    Pattern
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

82. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    Values
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    Pattern
    

    View Slide

83. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    Values
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    Variables
    

    View Slide

84. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

85. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

86. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    head #=> “Ruby”
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

87. list = [“Ruby”, “JS”, “Python”]
    [head, tail] = [list[0], list[1..-1]]
    head #=> “Ruby”
    tail #=> [“JS”, “Python”]
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

88. list = [“Ruby”, “JS”, “Python”]
    [head, tail...] = list
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

89. list = [“Ruby”, “JS”, “Python”]
    [head, tail...] = list
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

90. list = [“Ruby”, “JS”, “Python”]
    [head, tail...] = list
    head #=> “Ruby”
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

91. list = [“Ruby”, “JS”, “Python”]
    [head, tail...] = list
    head #=> “Ruby”
    tail #=> [“JS”, “Python”]
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

92. list = [“Ruby”, “JS”, “Python”]
    [top, rest..., bottom] = list
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

93. list = [“Ruby”, “JS”, “Python”]
    [top, rest..., bottom] = list
    top #=> “Ruby”
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

94. list = [“Ruby”, “JS”, “Python”]
    [top, rest..., bottom] = list
    top #=> “Ruby”
    bottom #=> “Python”
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

95. list = [“Ruby”, “JS”, “Python”]
    [top, rest..., bottom] = list
    top #=> “Ruby”
    bottom #=> “Python”
    rest #=> [“JS”]
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

96. list = [“Ruby”, “JS”]
    [top, rest..., bottom] = list
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

97. list = [“Ruby”, “JS”]
    [top, rest..., bottom] = list
    top #=> “Ruby”
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

98. list = [“Ruby”, “JS”]
    [top, rest..., bottom] = list
    top #=> “Ruby”
    bottom #=> “JS”
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

99. list = [“Ruby”, “JS”]
    [top, rest..., bottom] = list
    top #=> “Ruby”
    bottom #=> “JS”
    rest #=> []
    Pattern Matching
    4th Cup: Getting Inside Your Objects
    

    View Slide

100. me =
     name: “Nicolás”
     company: “Cubox”
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

101. me =
     name: “Nicolás”
     company: “Cubox”
     name = me.name
     company = me.company
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

102. me =
     name: “Nicolás”
     company: “Cubox”
     { name: name, company: company } = me
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

103. me =
     name: “Nicolás”
     company: “Cubox”
     { name: name, company: company } = me
     Pattern
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

104. Pattern Matching
     4th Cup: Getting Inside Your Objects
     me =
     name: “Nicolás”
     company: “Cubox”
     { name: name, company: company } = me
     Variables
     

     View Slide

105. me =
     name: “Nicolás”
     company: “Cubox”
     { name: name, company: company } = me
     Values
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

106. me =
     name: “Nicolás”
     company: “Cubox”
     { name: name, company: company } = me
     name #=> “Nicolás”
     company #=> “Cubox”
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

107. { name, company } = me
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

108. { name, company } = me
     name #=> “Nicolás”
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

109. { name, company } = me
     name #=> “Nicolás”
     company #=> 26
     Pattern Matching
     4th Cup: Getting Inside Your Objects
     

     View Slide

110. 5th Cup
     Collecting Collections
     

     View Slide

111. list = [1..10]
     for item in list
     doSomethingWith(item)
     5th Cup: Collecting Collections
     Iterating over arrays
     

     View Slide

112. list = [1..10]
     for item in list
     doSomethingWith(item)
     Iterating over arrays
     5th Cup: Collecting Collections
     

     View Slide

113. me = name: “Nicolás”, age: 26
     for key, value of me
     console.log “#{key}: #{value}”
     Iterating over objects
     5th Cup: Collecting Collections
     

     View Slide

114. me = name: “Nicolás”, age: 26
     for key, value of me
     console.log “#{key}: #{value}”
     Iterating over objects
     5th Cup: Collecting Collections
     

     View Slide

115. doubles = (n * 2 for n in [1..5])
     5th Cup: Collecting Collections
     Comprehensions
     

     View Slide

116. n * 2 for n in [1..5] when n > 2
     Filtering Comprehensions
     5th Cup: Collecting Collections
     

     View Slide

117. n * 2 for n in [1..5] when n > 2
     Filtering Comprehensions
     5th Cup: Collecting Collections
     

     View Slide

118. 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
     

     View Slide

119. 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
     

     View Slide

120. 6th Cup
     Context, the classy way
     

     View Slide

121. User = (id, name) ->
     this.id = id
     this.name = name
     this.element = $(“#user-#{this.id}”)
     6th Cup: Context, the classy way
     

     View Slide

122. Context Accessor
     6th Cup: Context, the classy way
     User = (id, name) ->
     this.id = id
     this.name = name
     this.element = $(“#user-#{this.id}”)
     

     View Slide

123. Context Accessor
     6th Cup: Context, the classy way
     User = (id, name) ->
     this.id = id
     this.name = name
     this.element = $(“#user-#{this.id}”)
     

     View Slide

124. Context Accessor
     6th Cup: Context, the classy way
     User = (id, name) ->
     this.id = id
     this.name = name
     this.element = $(“#user-#{this.id}”)
     

     View Slide

125. Context Accessor
     6th Cup: Context, the classy way
     User = (id, name) ->
     this.id = id
     this.name = name
     this.element = $(“#user-#{this.id}”)
     

     View Slide

126. User = (id, name) ->
     @id = id
     @name = name
     @element = $(“#user-#{@id}”)
     Context Accessor
     6th Cup: Context, the classy way
     

     View Slide

127. Property Arguments
     6th Cup: Context, the classy way
     User = (id, name) ->
     @id = id
     @name = name
     @element = $(“#user-#{@id}”)
     

     View Slide

128. User = (id, name) ->
     @id = id
     @name = name
     @element = $(“#user-#{@id}”)
     Property Arguments
     6th Cup: Context, the classy way
     

     View Slide

129. Property Arguments
     6th Cup: Context, the classy way
     User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     

     View Slide

130. Property Arguments
     6th Cup: Context, the classy way
     User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     

     View Slide

131. User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     Property Arguments
     6th Cup: Context, the classy way
     

     View Slide

132. User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     6th Cup: Context, the classy way
     

     View Slide

133. User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     User.prototype.signOut = ->
     $.ajax(...)
     Bound Functions
     6th Cup: Context, the classy way
     

     View Slide

134. User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     User.prototype.signOut = ->
     $.ajax(...)
     Bound Functions
     6th Cup: Context, the classy way
     

     View Slide

135. User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     User.prototype.signOut = ->
     $.ajax(...)
     Bound Functions
     6th Cup: Context, the classy way
     

     View Slide

136. 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
     

     View Slide

137. 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
     

     View Slide

138. 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
     

     View Slide

139. 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
     

     View Slide

140. 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
     

     View Slide

141. 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
     

     View Slide

142. 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
     

     View Slide

143. 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
     

     View Slide

144. User = (@id, @name) ->
     @element = $(“#user-#{@id}”)
     User.prototype.signOut = ->
     ...
     6th Cup: Context, the classy way
     

     View Slide

145. class User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     6th Cup: Context, the classy way
     Classes
     

     View Slide

146. 6th Cup: Context, the classy way
     Classes
     class User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     

     View Slide

147. 6th Cup: Context, the classy way
     Classes
     class User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     

     View Slide

148. 6th Cup: Context, the classy way
     Classes
     class User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     

     View Slide

149. 6th Cup: Context, the classy way
     Inheritance
     class User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     

     View Slide

150. 6th Cup: Context, the classy way
     Inheritance
     class SignedInUser extends User
     ...
     class SignedOutUser extends User
     ...
     

     View Slide

151. 6th Cup: Context, the classy way
     super
     class SignedInUser extends User
     constructor: (args...) ->
     super args...
     $(“a.sign-out”, @element).click =>
     this.signOut()
     

     View Slide

152. class User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     6th Cup: Context, the classy way
     On variable locality
     

     View Slide

153. class window.User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     6th Cup: Context, the classy way
     On variable locality
     

     View Slide

154. class window.User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     6th Cup: Context, the classy way
     On variable locality
     

     View Slide

155. class this.User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     6th Cup: Context, the classy way
     On variable locality
     

     View Slide

156. class @User
     constructor: (@id, @name) ->
     @element = $(“#user-#{@id}”)
     signOut: ->
     ...
     6th Cup: Context, the classy way
     On variable locality
     

     View Slide

157. View Slide

158. We’ve Covered
     ➡ Object Literals
     ➡ String Interpolation
     ➡ Functions
     ➡ Default Arguments
     ➡ Splats
     ➡ Ranges
     ➡ Pattern Matching
     ➡ Context and this
     ➡ Property Accessors
     ➡ Bound Functions
     ➡ Classes
     ➡ Inheritance
     ➡ super
     

     View Slide

159. So…
     

     View Slide

160. …is it worth it?
     

     View Slide

161. View Slide

162. View Slide

163. Questions?
     

     View Slide

164. Thanks!
     

     View Slide

165. Thanks!
     http://github.com/foca
     @godfoca
     

     View Slide

166. Thanks!
     http://github.com/foca
     @godfoca
     jobs@cuboxsa.com
     

     View Slide

167. View Slide

168. Follow-up:
     Existential Operator
     

     View Slide

169. languagesOfChoice = (best, langs...) ->
     “I love #{best},
     and I like #{langs.join(“, “)}”
     Follow-up: Existential Operator
     

     View Slide

170. languagesOfChoice = (best, langs...) ->
     “I love #{best},
     and I like #{langs.join(“, “)}”
     languagesOfChoice “Ruby”
     > I love Ruby, and I like
     Follow-up: Existential Operator
     

     View Slide

171. 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
     

     View Slide

172. 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 “)
     

     View Slide

173. 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
     

     View Slide

174. 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
     

     View Slide

175. 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
     

     View Slide

176. 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
     

     View Slide

177. languagesOfChoice “Ruby”, “JS”, “Python”
     > I love Ruby, and I like JS, Python
     Follow-up: Existential Operator
     

     View Slide

178. languagesOfChoice “Ruby”, “JS”, “Python”
     > I love Ruby, and I like JS, Python
     languagesOfChoice “Ruby”
     > I love Ruby
     Follow-up: Existential Operator
     

     View Slide

179. 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
     

     View Slide

180. 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
     

     View Slide

181. expr?
     Follow-up: Existential Operator
     

     View Slide

182. expr?
     typeof expr !== undefined && expr !== null
     Follow-up: Existential Operator
     

     View Slide

183. x ?= y
     Follow-up: Existential Operator
     

     View Slide

184. x ?= y
     x = y unless x?
     Follow-up: Existential Operator
     

     View Slide

185. obj = x: { y: 2 }
     Follow-up: Existential Operator
     

     View Slide

186. obj = x: { y: 2 }
     obj.x?.y
     Follow-up: Existential Operator
     

     View Slide

187. obj = x: { y: 2 }
     obj.x?.y
     if obj.x? then obj.x.y else undefined
     Follow-up: Existential Operator
     

     View Slide

188. obj = x: { y: 2 }
     obj.x?.y
     if obj.x? then obj.x.y else undefined
     Follow-up: Existential Operator
     

     View Slide

189. obj = x: { y: 2 }
     obj.x?.y
     if obj.x? then obj.x.y else undefined
     Follow-up: Existential Operator
     

     View Slide

190. obj = x: { y: 2 }
     obj.x?.y
     if obj.x? then obj.x.y else undefined
     Follow-up: Existential Operator
     

     View Slide

191. func?()
     Follow-up: Existential Operator
     

     View Slide

192. func?()
     func() if typeof func == “function”
     Follow-up: Existential Operator
     

     View Slide

193. options.callback?()
     Follow-up: Existential Operator
     

     View Slide

194. Follow-up:
     this
     

     View Slide

195. function isCute() {
     return this.cute;
     }
     Follow-up: this
     

     View Slide

196. var cuteKitty = {
     cute: true,
     isCute: isCute
     };
     Follow-up: this
     

     View Slide

197. var meanKitty = {
     cute: false,
     isCute: isCute
     };
     Follow-up: this
     

     View Slide

198. meanKitty.isCute()
     cuteKitty.isCute()
     Follow-up: this
     

     View Slide

199. cuteKitty.isCute()
     true
     meanKitty.isCute()
     Follow-up: this
     

     View Slide

200. cuteKitty.isCute()
     true
     meanKitty.isCute()
     false
     Follow-up: this
     

     View Slide

201. function whatHappensNow() {
     console.log(this);
     }
     whatHappensNow()
     Follow-up: this
     

     View Slide

202. function whatHappensNow() {
     console.log(this);
     }
     whatHappensNow()
     > [window]
     Follow-up: this
     

     View Slide

203. $(“a.sign-out”).click(function() {
     console.log(this);
     });
     Follow-up: this
     

     View Slide

204. $(“a.sign-out”).click(function() {
     console.log(this);
     });
     Follow-up: this
     

     View Slide

205. $(“a.sign-out”).click(function() {
     console.log(this);
     });
     Delete
     Follow-up: this
     

     View Slide

206. function returnThis() {
     return this;
     }
     Follow-up: this
     

     View Slide

207. function returnThis() {
     return this;
     }
     returnThis.apply(42); //=> 42
     Follow-up: this
     

     View Slide

208. function returnThis() {
     return this;
     }
     returnThis.apply(42); //=> 42
     returnThis.apply(“hi”); //=> “hi”
     Follow-up: this
     

     View Slide

209. Follow-up:
     Loop closures and do
     

     View Slide

210. for i in [1..5]
     console.log i
     Follow-up: Loop closures and do
     

     View Slide

211. for i in [1..5]
     setTimeout (-> console.log i), 100
     Follow-up: Loop closures and do
     

     View Slide

212. for i in [1..5]
     setTimeout (-> console.log i), 100
     > 5
     > 5
     > 5
     > 5
     > 5
     Follow-up: Loop closures and do
     

     View Slide

213. View Slide

214. for i in [1..5]
     setTimeout (-> console.log i), 100
     > 5
     > 5
     > 5
     > 5
     > 5
     Follow-up: Loop closures and do
     

     View Slide

215. for i in [1..5]
     ((i) ->
     setTimeout (-> console.log i), 100
     )(i)
     > 1
     > 2
     > ...
     Follow-up: Loop closures and do
     

     View Slide

216. for i in [1..5]
     do (i) ->
     setTimeout (-> console.log i), 100
     > 1
     > 2
     > ...
     Follow-up: Loop closures and do
     

     View Slide

217. Follow-up:
     Comprehension Madness
     

     View Slide

218. 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
     

     View Slide

219. (ret.push(val) unless val in ret) for val in orig when shouldAdd(val)
     Keep It Simple, Stupid
     Follow-up: Comprehension Madness
     

     View Slide

220. View Slide