Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's Have a Cup of CoffeeScript

Let's Have a Cup of CoffeeScript

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

Nicolás Sanguinetti

September 26, 2011
Tweet

More Decks by Nicolás Sanguinetti

Other Decks in Programming

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
    [email protected]

    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