Practical ES6 for the Modern JavaScript Tinkerer

! @nzgb " @bevacqua ponyfoo.com

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

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

! @nzgb " @bevacqua ponyfoo.com Object Literals

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

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

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

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

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

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

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

! @nzgb " @bevacqua ponyfoo.com Arrow Functions

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

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

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

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

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

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

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

! @nzgb " @bevacqua ponyfoo.com Classes

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

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

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

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

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

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

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

! @nzgb " @bevacqua ponyfoo.com Destructuring

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

1, y: 2 } var {x} = position var {y} = position Destructuring

1, y: 2 } var {x,y} = position Destructuring

1, y: 2 } var {x: posX} = position Destructuring

1, y: 2 } var {x,y,z} = position // z is undefined Destructuring

1, y: 2 } var {x,y,z=0} = position // z is 0 Destructuring

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

! @nzgb " @bevacqua ponyfoo.com Rest Parameters

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

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

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

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

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

Spread Operator ! @nzgb " @bevacqua ponyfoo.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

! @nzgb " @bevacqua ponyfoo.com Tagged Templates

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

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

! @nzgb " @bevacqua ponyfoo.com Let Variables

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

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

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”

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

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

! @nzgb " @bevacqua ponyfoo.com Constants

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)

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

! @nzgb " @bevacqua ponyfoo.com ponyfoo.com /articles/es6

Practical ES6 for the Modern JavaScript Tinkerer

Practical ES6 for the Modern JavaScript Tinkerer

More Decks by Nicolás Bevacqua

Other Decks in Programming

Featured

Transcript