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

Transcript

1. ! @nzgb " @bevacqua ponyfoo.com
2. Practical ES6 for the Modern JavaScript Tinkerer ! @nzgb " @bevacqua ponyfoo.com
3. Goals ! @nzgb " @bevacqua ponyfoo.com Simplicity Conciseness Expressiveness
4. ! @nzgb " @bevacqua ponyfoo.com Object Literals
5. ! @nzgb " @bevacqua ponyfoo.com Property Value Shorthand var x = 1 var y = 2 var position = { x: x, y: y }
6. ! @nzgb " @bevacqua ponyfoo.com Property Value Shorthand var x = 1 var y = 2 var position = { x, y }
7. ! @nzgb " @bevacqua ponyfoo.com Method Definition var car = { position: 0, move: function (distance) { this.position += distance } }
8. ! @nzgb " @bevacqua ponyfoo.com Method Definition var car = { position: 0, move (distance) { this.position += distance } }
9. ! @nzgb " @bevacqua ponyfoo.com Computed Property Name function prop (key, value) { var result = {} result[key] = value return result }
10. ! @nzgb " @bevacqua ponyfoo.com function prop (key, value) { var result = { [key]: value } return result } Computed Property Name
11. ! @nzgb " @bevacqua ponyfoo.com function prop (key, value) { return { [key]: value } } Computed Property Name
12. ! @nzgb " @bevacqua ponyfoo.com Arrow Functions
13. ! @nzgb " @bevacqua ponyfoo.com var double = function (value) { return value * 2 } Arrow Function No function keyword
14. ! @nzgb " @bevacqua ponyfoo.com var double = (value) => { return value * 2 } Arrow Function Fat => arrow instead
15. ! @nzgb " @bevacqua ponyfoo.com var double = (value) => { return value * 2 } Arrow Function Single parameter? Implicit (parenthesis)
16. ! @nzgb " @bevacqua ponyfoo.com var double = value => { return value * 2 } Arrow Function Single expression? Implicit return, {}
17. ! @nzgb " @bevacqua ponyfoo.com var double = value => value * 2 Arrow Function (left, right) => left && 'left' || right && 'right' || undefined But, Avoid complexity!
18. ! @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
19. ! @nzgb " @bevacqua ponyfoo.com var timer = { seconds: 0, start: function () { var add = () => this.seconds++ setInterval(add, 1000) } } Arrow Function Lexical scoping
20. ! @nzgb " @bevacqua ponyfoo.com Classes
21. ! @nzgb " @bevacqua ponyfoo.com function Cat () { this.hunger = 0 setInterval(() => this.hunger++, 500) } Cat.prototype.eat = function () { this.hunger -= 20 } Classes Prototypal inheritance
22. ! @nzgb " @bevacqua ponyfoo.com class Cat { constructor () { this.hunger = 0 setInterval(() => this.hunger++, 500) } eat () { this.hunger -= 20 } } Classes Syntactic class sugar
23. class Cat { constructor () { this.hunger = 0 setInterval(() => this.hunger++, 500) } eat () { this.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes There's no commas
24. class Cat { constructor () { this.hunger = 0 setInterval(() => this.hunger++, 500) } eat () { this.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes Method definition syntax
25. class Cat { constructor () { this.hunger = 0 setInterval(() => this.hunger++, 500) } eat () { this.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes Constructor as a method
26. class Cat { constructor () { this.hunger = 0 setInterval(() => this.hunger++, 500) } static eat (cat) { cat.hunger -= 20 } } ! @nzgb " @bevacqua ponyfoo.com Classes Explicitly static methods
27. class WildCat extends Cat { constructor () { super('wild', 'cat') this.hunger = 40 } } ! @nzgb " @bevacqua ponyfoo.com Classes Standarized inheritance model Explicit super constructor call
28. ! @nzgb " @bevacqua ponyfoo.com Destructuring
29. ! @nzgb " @bevacqua ponyfoo.com var position = { x: 1, y: 2 } var x = position.x var y = position.y Destructuring
30. ! @nzgb " @bevacqua ponyfoo.com var position = { x: 1, y: 2 } var {x} = position var {y} = position Destructuring
31. ! @nzgb " @bevacqua ponyfoo.com var position = { x: 1, y: 2 } var {x,y} = position Destructuring
32. ! @nzgb " @bevacqua ponyfoo.com var position = { x: 1, y: 2 } var {x: posX} = position Destructuring
33. ! @nzgb " @bevacqua ponyfoo.com var position = { x: 1, y: 2 } var {x,y,z} = position // z is undefined Destructuring
34. ! @nzgb " @bevacqua ponyfoo.com var position = { x: 1, y: 2 } var {x,y,z=0} = position // z is 0 Destructuring
35. ! @nzgb " @bevacqua ponyfoo.com var person = { p: { x: 1, y: 2 } } var {p:{x,y}} = person Destructuring
36. ! @nzgb " @bevacqua ponyfoo.com var empty = {} var {not:{here}} = empty // throws: empty.not.here Destructuring not is undefined
37. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2] var x = position[0] var y = position[1] Destructuring Before ES6
38. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2] var [x,y] = position Destructuring Destructuring an array
39. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2, 0] var x = position[0] var z = position[2] Destructuring Before ES6
40. ! @nzgb " @bevacqua ponyfoo.com var position = [1, 2, 0] var [x,,z] = position Destructuring Skipping indices
41. ! @nzgb " @bevacqua ponyfoo.com var left = 20 var right = 10 var aux = left left = right right = aux Destructuring
42. ! @nzgb " @bevacqua ponyfoo.com var left = 20 var right = 10; [right, left] = [left, right] Destructuring Swapping, destructured
43. ! @nzgb " @bevacqua ponyfoo.com function (base, m) { return base * (m || 2) } Destructuring Defaults before ES6
44. ! @nzgb " @bevacqua ponyfoo.com function (base, m=2) { return base * m } Destructuring Defaults via destructuring
45. ! @nzgb " @bevacqua ponyfoo.com Destructuring Also in arrow functions (base, m=2) => base * m
46. ! @nzgb " @bevacqua ponyfoo.com Destructuring Anywhere in parameter list (x=1,y=2,z=3) => x+y+z
47. ! @nzgb " @bevacqua ponyfoo.com Destructuring Destructure objects, too! (options={a:true}) => { console.log(options) }
48. ! @nzgb " @bevacqua ponyfoo.com Destructuring Or the whole parameter list ({a=true, b=1}) => { console.log(a, b) }
49. ! @nzgb " @bevacqua ponyfoo.com Destructuring Default to an empty object ({a=true, b=1}={}) => { console.log(a, b) }
50. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters
51. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters function () { var list = [].slice.call(arguments) } Never again .slice arguments
52. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters Use rest … instead function (…list) { }
53. ! @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() }
54. ! @nzgb " @bevacqua ponyfoo.com Rest Parameters Effortless using …rest function (x, y, …rest) { }
55. ! @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
56. Spread Operator ! @nzgb " @bevacqua ponyfoo.com
57. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Combining arrays before ES6 [1].concat([2, 3]).concat(4)
58. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Spread makes it easier! [1, …[2, 3], 4, …more]
59. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Dynamic calls need .apply before ES6 merge.apply(null, [ 'a', 'b', 'c' ])
60. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Avoid .apply, use spread instead merge(…[ 'a', 'b', 'c' ])
61. ! @nzgb " @bevacqua ponyfoo.com Spread Operator new + apply in ES5 is …hard new (Date.bind.apply(Date, [ null, 2015, 11, 7 ]))
62. ! @nzgb " @bevacqua ponyfoo.com Spread Operator new + apply in ES6 is …easy new Date(…[ 2015, 11, 7 ])
63. ! @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)
64. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Spread while destructuring! var all = [1, 2, 3, 4] var [first, …rest] = all
65. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Obnoxious casting before ES6 var all = document.querySelectorAll('a') var links = [].slice.call(all)
66. ! @nzgb " @bevacqua ponyfoo.com Spread Operator Iterables are easy to cast NodeList is iterable by default var all = document.querySelectorAll('a') var links = […all]
67. ! @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))
68. ! @nzgb " @bevacqua ponyfoo.com Template Literals Strings, really.
69. ! @nzgb " @bevacqua ponyfoo.com Template Literals Clunky concatenation before ES6 'Hello, ' + name + '!' `Hello, ${name}!` Expression interpolation
70. ! @nzgb " @bevacqua ponyfoo.com Template Literals [ 'Before ES6', 'multiline strings', 'were noisy' ].join('\n') Arrays, concatenation, escapes, even comments
71. ! @nzgb " @bevacqua ponyfoo.com Template Literals `In ES6, just use template literals Multiline supported!` Multiline support built into template literals
72. ! @nzgb " @bevacqua ponyfoo.com Tagged Templates
73. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag = (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
74. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag = (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
75. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag = (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
76. ! @nzgb " @bevacqua ponyfoo.com Template Literals var tag = (parts, …model) => parts.reduce( (all, part, i) => all + model[i-1] + part ) tag`Hello ${name}!`
77. ! @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
78. ! @nzgb " @bevacqua ponyfoo.com Let Variables
79. ! @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
80. ! @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
81. 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”
82. ! @nzgb " @bevacqua ponyfoo.com “Temporal Dead” Zone
83. 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
84. ! @nzgb " @bevacqua ponyfoo.com Constants
85. 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)
86. ! @nzgb " @bevacqua ponyfoo.com
87. ! @nzgb " @bevacqua ponyfoo.com Iterators Generators Promises Built-ins Unicode Modules Proxies Reflection Map Set WeakMap WeakSet
88. ! @nzgb " @bevacqua ponyfoo.com ponyfoo.com /articles/es6
89. ! @nzgb " @bevacqua ponyfoo.com