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

Practical ES6 for the Modern JavaScript Tinkerer

Practical ES6 for the Modern JavaScript Tinkerer

ES6 is now a standard. We're seeing increasing adoption across the web and the fear of missing out is invading your senses. This talk will introduce you to the most practical aspects of ES6, how to use it today in production, what new features are the most useful, and how to migrate away from your ES5 lifestyle, gradually towards adoption of ES6 features. Eventually, you'll be using ES6 without even realizing you ever made "the switch".

Nicolás Bevacqua

December 03, 2015
Tweet

More Decks by Nicolás Bevacqua

Other Decks in Programming

Transcript

  1. ! @nzgb " @bevacqua ponyfoo.com Property Value Shorthand var x

    = 1 var y = 2 var position = { x: x, y: y }
  2. ! @nzgb " @bevacqua ponyfoo.com Method Definition var car =

    { position: 0, move: function (distance) { this.position += distance } }
  3. ! @nzgb " @bevacqua ponyfoo.com Method Definition var car =

    { position: 0, move (distance) { this.position += distance } }
  4. ! @nzgb " @bevacqua ponyfoo.com Computed Property Name function prop

    (key, value) { var result = {} result[key] = value return result }
  5. ! @nzgb " @bevacqua ponyfoo.com function prop (key, value) {

    var result = { [key]: value } return result } Computed Property Name
  6. ! @nzgb " @bevacqua ponyfoo.com function prop (key, value) {

    return { [key]: value } } Computed Property Name
  7. ! @nzgb " @bevacqua ponyfoo.com var double = function (value)

    { return value * 2 } Arrow Function No function keyword
  8. ! @nzgb " @bevacqua ponyfoo.com var double = (value) =>

    { return value * 2 } Arrow Function Fat => arrow instead
  9. ! @nzgb " @bevacqua ponyfoo.com var double = (value) =>

    { return value * 2 } Arrow Function Single parameter? Implicit (parenthesis)
  10. ! @nzgb " @bevacqua ponyfoo.com var double = value =>

    { return value * 2 } Arrow Function Single expression? Implicit return, {}
  11. ! @nzgb " @bevacqua ponyfoo.com var double = value =>

    value * 2 Arrow Function (left, right) => left && 'left' || right && 'right' || undefined But, Avoid complexity!
  12. ! @nzgb " @bevacqua ponyfoo.com [1, 2, 3, 4, 5]

    .filter(x => x > 2) .map(x => x * 2) .reduce((x, y) => x + y) // <- 24 Arrow Function Improved expressiveness
  13. ! @nzgb " @bevacqua ponyfoo.com var timer = { seconds:

    0, start: function () { var add = () => this.seconds++ setInterval(add, 1000) } } Arrow Function Lexical scoping
  14. ! @nzgb " @bevacqua ponyfoo.com function Cat () { this.hunger

    = 0 setInterval(() => this.hunger++, 500) } Cat.prototype.eat = function () { this.hunger -= 20 } Classes Prototypal inheritance
  15. ! @nzgb " @bevacqua ponyfoo.com class Cat { constructor ()

    { this.hunger = 0 setInterval(() => this.hunger++, 500) } eat () { this.hunger -= 20 } } Classes Syntactic class sugar
  16. class Cat { constructor () { this.hunger = 0 setInterval(()

    => this.hunger++, 500) } eat () { this.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes There's no commas
  17. class Cat { constructor () { this.hunger = 0 setInterval(()

    => this.hunger++, 500) } eat () { this.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes Method definition syntax
  18. class Cat { constructor () { this.hunger = 0 setInterval(()

    => this.hunger++, 500) } eat () { this.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes Constructor as a method
  19. class Cat { constructor () { this.hunger = 0 setInterval(()

    => this.hunger++, 500) } static eat (cat) { cat.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes Explicitly static methods
  20. class WildCat extends Cat { constructor () { super('wild', 'cat')

    this.hunger = 40 } } ! @nzgb " @bevacqua ponyfoo.com Classes Standarized inheritance model Explicit super constructor call
  21. ! @nzgb " @bevacqua ponyfoo.com var position = { x:

    1, y: 2 } var x = position.x var y = position.y Destructuring
  22. ! @nzgb " @bevacqua ponyfoo.com var position = { x:

    1, y: 2 } var {x} = position var {y} = position Destructuring
  23. ! @nzgb " @bevacqua ponyfoo.com var position = { x:

    1, y: 2 } var {x,y} = position Destructuring
  24. ! @nzgb " @bevacqua ponyfoo.com var position = { x:

    1, y: 2 } var {x: posX} = position Destructuring
  25. ! @nzgb " @bevacqua ponyfoo.com var position = { x:

    1, y: 2 } var {x,y,z} = position // z is undefined Destructuring
  26. ! @nzgb " @bevacqua ponyfoo.com var position = { x:

    1, y: 2 } var {x,y,z=0} = position // z is 0 Destructuring
  27. ! @nzgb " @bevacqua ponyfoo.com var person = { p:

    { x: 1, y: 2 } } var {p:{x,y}} = person Destructuring
  28. ! @nzgb " @bevacqua ponyfoo.com var empty = {} var

    {not:{here}} = empty // throws: empty.not.here Destructuring not is undefined
  29. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2]

    var x = position[0] var y = position[1] Destructuring Before ES6
  30. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2]

    var [x,y] = position Destructuring Destructuring an array
  31. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2,

    0] var x = position[0] var z = position[2] Destructuring Before ES6
  32. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2,

    0] var [x,,z] = position Destructuring Skipping indices
  33. ! @nzgb " @bevacqua ponyfoo.com var left = 20 var

    right = 10 var aux = left left = right right = aux Destructuring
  34. ! @nzgb " @bevacqua ponyfoo.com var left = 20 var

    right = 10; [right, left] = [left, right] Destructuring Swapping, destructured
  35. ! @nzgb " @bevacqua ponyfoo.com function (base, m) { return

    base * (m || 2) } Destructuring Defaults before ES6
  36. ! @nzgb " @bevacqua ponyfoo.com function (base, m=2) { return

    base * m } Destructuring Defaults via destructuring
  37. ! @nzgb " @bevacqua ponyfoo.com Destructuring Or the whole parameter

    list ({a=true, b=1}) => { console.log(a, b) }
  38. ! @nzgb " @bevacqua ponyfoo.com Destructuring Default to an empty

    object ({a=true, b=1}={}) => { console.log(a, b) }
  39. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters function () {

    var list = [].slice.call(arguments) } Never again .slice arguments
  40. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters Named parameters and

    the rest function () { var rest = [].slice.call(arguments) var y = rest.shift() var x = rest.shift() }
  41. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters Arrows require parenthesis

    for rest var sumAll = (…all) => all .reduce((x,y) => x+y) sumAll(1, 1, 2, 3, 5, 8) // <- 20
  42. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Dynamic calls need

    .apply before ES6 merge.apply(null, [ 'a', 'b', 'c' ])
  43. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Avoid .apply, use

    spread instead merge(…[ 'a', 'b', 'c' ])
  44. ! @nzgb " @bevacqua ponyfoo.com Spread Operator new + apply

    in ES5 is …hard new (Date.bind.apply(Date, [ null, 2015, 11, 7 ]))
  45. ! @nzgb " @bevacqua ponyfoo.com Spread Operator new + apply

    in ES6 is …easy new Date(…[ 2015, 11, 7 ])
  46. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Separating array elements

    is tedious before ES6 var all = [1, 2, 3, 4] var first = all[0] var rest = all.slice(1)
  47. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Spread while destructuring!

    var all = [1, 2, 3, 4] var [first, …rest] = all
  48. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Obnoxious casting before

    ES6 var all = document.querySelectorAll('a') var links = [].slice.call(all)
  49. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Iterables are easy

    to cast NodeList is iterable by default var all = document.querySelectorAll('a') var links = […all]
  50. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Printing external links

    […document.querySelectorAll('a')] .map(a => a.href) .filter(href => !href .startsWith(location.origin)) .forEach(href => console.log(href))
  51. ! @nzgb " @bevacqua ponyfoo.com Template Literals Clunky concatenation before

    ES6 'Hello, ' + name + '!' `Hello, ${name}!` Expression interpolation
  52. ! @nzgb " @bevacqua ponyfoo.com Template Literals [ 'Before ES6',

    'multiline strings', 'were noisy' ].join('\n') Arrays, concatenation, escapes, even comments
  53. ! @nzgb " @bevacqua ponyfoo.com Template Literals `In ES6, just

    use template literals Multiline supported!` Multiline support built into template literals
  54. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag =

    (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
  55. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag =

    (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
  56. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag =

    (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
  57. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag =

    (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
  58. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag =

    (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!` Strictly better than 'single' or "double" quoted strings
  59. ! @nzgb " @bevacqua ponyfoo.com Let, Const, and the “TDZ”

    function multiplySmall (input) { if (input < 10) { var mult = 2 return mult * input } return input } var mult is function-scoped
  60. ! @nzgb " @bevacqua ponyfoo.com Let, Const, and the “TDZ”

    function multiplySmall (input) { if (input < 10) { let mult = 2 return mult * input } return input } let mult is block-scoped
  61. function multiplySmall (input) { if (input < 10) { let

    mult = 2 return mult * input } return input } let mult is hoisted to top of block ! @nzgb " @bevacqua ponyfoo.com Let, Const, and the “TDZ”
  62. TDZ for amount variable ! @nzgb " @bevacqua ponyfoo.com Let,

    Const, and the “TDZ” if (true) { // other // statements let amount = 2 } [ Accessing amount within TDZ throws
  63. const is like let, except: items must be initialized items

    is read-only items is not immutable ! @nzgb " @bevacqua ponyfoo.com Let, Const, and the “TDZ” const items = [1,2,3] items = [5] items.push(4)
  64. ! @nzgb " @bevacqua ponyfoo.com Iterators Generators Promises Built-ins Unicode

    Modules Proxies Reflection Map Set WeakMap WeakSet