Practical ES6 for the Modern JavaScript Tinkerer

Slide 1

Slide 1 text

! @nzgb " @bevacqua ponyfoo.com

Slide 2

Slide 2 text

Practical ES6 for the Modern JavaScript Tinkerer ! @nzgb " @bevacqua ponyfoo.com

Slide 3

Slide 3 text

Goals ! @nzgb " @bevacqua ponyfoo.com Simplicity Conciseness Expressiveness

Slide 4

Slide 4 text

! @nzgb " @bevacqua ponyfoo.com Object Literals

Slide 5

Slide 5 text

! @nzgb " @bevacqua ponyfoo.com Property Value Shorthand var x = 1 var y = 2 var position = { x: x, y: y }

Slide 6

Slide 6 text

! @nzgb " @bevacqua ponyfoo.com Property Value Shorthand var x = 1 var y = 2 var position = { x, y }

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

! @nzgb " @bevacqua ponyfoo.com Arrow Functions

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

! @nzgb " @bevacqua ponyfoo.com var double = value => value * 2 Arrow Function (left, right) => left && 'left' || right && 'right' || undefined But, Avoid complexity!

Slide 18

Slide 18 text

! @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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

! @nzgb " @bevacqua ponyfoo.com Classes

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

class WildCat extends Cat { constructor () { super('wild', 'cat') this.hunger = 40 } } ! @nzgb " @bevacqua ponyfoo.com Classes Standarized inheritance model Explicit super constructor call

Slide 28

Slide 28 text

! @nzgb " @bevacqua ponyfoo.com Destructuring

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

! @nzgb " @bevacqua ponyfoo.com var empty = {} var {not:{here}} = empty // throws: empty.not.here Destructuring not is undefined

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

! @nzgb " @bevacqua ponyfoo.com var left = 20 var right = 10; [right, left] = [left, right] Destructuring Swapping, destructured

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

! @nzgb " @bevacqua ponyfoo.com function (base, m=2) { return base * m } Destructuring Defaults via destructuring

Slide 45

Slide 45 text

! @nzgb " @bevacqua ponyfoo.com Destructuring Also in arrow functions (base, m=2) => base * m

Slide 46

Slide 46 text

! @nzgb " @bevacqua ponyfoo.com Destructuring Anywhere in parameter list (x=1,y=2,z=3) => x+y+z

Slide 47

Slide 47 text

! @nzgb " @bevacqua ponyfoo.com Destructuring Destructure objects, too! (options={a:true}) => { console.log(options) }

Slide 48

Slide 48 text

! @nzgb " @bevacqua ponyfoo.com Destructuring Or the whole parameter list ({a=true, b=1}) => { console.log(a, b) }

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

! @nzgb " @bevacqua ponyfoo.com Rest Parameters

Slide 51

Slide 51 text

! @nzgb " @bevacqua ponyfoo.com Rest Parameters function () { var list = [].slice.call(arguments) } Never again .slice arguments

Slide 52

Slide 52 text

! @nzgb " @bevacqua ponyfoo.com Rest Parameters Use rest … instead function (…list) { }

Slide 53

Slide 53 text

! @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() }

Slide 54

Slide 54 text

! @nzgb " @bevacqua ponyfoo.com Rest Parameters Effortless using …rest function (x, y, …rest) { }

Slide 55

Slide 55 text

! @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

Slide 56

Slide 56 text

Spread Operator ! @nzgb " @bevacqua ponyfoo.com

Slide 57

Slide 57 text

! @nzgb " @bevacqua ponyfoo.com Spread Operator Combining arrays before ES6 [1].concat([2, 3]).concat(4)

Slide 58

Slide 58 text

! @nzgb " @bevacqua ponyfoo.com Spread Operator Spread makes it easier! [1, …[2, 3], 4, …more]

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

! @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)

Slide 64

Slide 64 text

! @nzgb " @bevacqua ponyfoo.com Spread Operator Spread while destructuring! var all = [1, 2, 3, 4] var [first, …rest] = all

Slide 65

Slide 65 text

! @nzgb " @bevacqua ponyfoo.com Spread Operator Obnoxious casting before ES6 var all = document.querySelectorAll('a') var links = [].slice.call(all)

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

! @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))

Slide 68

Slide 68 text

! @nzgb " @bevacqua ponyfoo.com Template Literals Strings, really.

Slide 69

Slide 69 text

! @nzgb " @bevacqua ponyfoo.com Template Literals Clunky concatenation before ES6 'Hello, ' + name + '!' `Hello, ${name}!` Expression interpolation

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

! @nzgb " @bevacqua ponyfoo.com Template Literals `In ES6, just use template literals Multiline supported!` Multiline support built into template literals

Slide 72

Slide 72 text

! @nzgb " @bevacqua ponyfoo.com Tagged Templates

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

! @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

Slide 78

Slide 78 text

! @nzgb " @bevacqua ponyfoo.com Let Variables

Slide 79

Slide 79 text

! @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

Slide 80

Slide 80 text

! @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

Slide 81

Slide 81 text

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”

Slide 82

Slide 82 text

! @nzgb " @bevacqua ponyfoo.com “Temporal Dead” Zone

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

! @nzgb " @bevacqua ponyfoo.com Constants

Slide 85

Slide 85 text

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)

Slide 86

Slide 86 text

! @nzgb " @bevacqua ponyfoo.com

Slide 87

Slide 87 text

! @nzgb " @bevacqua ponyfoo.com Iterators Generators Promises Built-ins Unicode Modules Proxies Reflection Map Set WeakMap WeakSet