Slide 1

Slide 1 text

ECMAScript 6 A tour

Slide 2

Slide 2 text

The ‘let’ statement

Slide 3

Slide 3 text

var myvar = 'global'; function f() { console.log(myvar); if (true) { var myvar = 'local'; } console.log(myvar); }

Slide 4

Slide 4 text

var myvar = 'global'; function f() { console.log(myvar); if (true) { var myvar = 'local'; } console.log(myvar); } > undefined > local

Slide 5

Slide 5 text

Hoisting

Slide 6

Slide 6 text

function infiltrate() { // do something // ... var bulletCount = 10; // do something else // ... var handler = function() { // handle difficult things }; }

Slide 7

Slide 7 text

function infiltrate() { var bulletCount; var handler; // do something // ... bulletCount = 10; // do something else // ... handler = function() { // handle difficult things }; }

Slide 8

Slide 8 text

function f() { console.log(bulletCount); var bulletCount = 42; console.log(bulletCount); }

Slide 9

Slide 9 text

function f() { console.log(bulletCount); var bulletCount = 42; console.log(bulletCount); } > undefined > 42

Slide 10

Slide 10 text

'use strict'; function f() { console.log(bulletCount); let bulletCount = 42; console.log(bulletCount); } > ReferenceError: can't access lexical declaration `bulletCount’ before initialization

Slide 11

Slide 11 text

Function Scope

Slide 12

Slide 12 text

function getAnswer() { if (true) { var theAnswer = 42; } console.log(theAnswer); }

Slide 13

Slide 13 text

function getAnswer() { if (true) { var theAnswer = 42; } console.log(theAnswer); } > 42

Slide 14

Slide 14 text

'use strict'; function getAnswer() { if (true) { let theAnswer = 42; } console.log(theAnswer); } > ReferenceError: theAnswer is not defined

Slide 15

Slide 15 text

‘use strict’; let myvar = 'global'; function f() { console.log(myvar); if (true) { let myvar = 'local'; } console.log(myvar); }

Slide 16

Slide 16 text

‘use strict’; let myvar = 'global'; function f() { console.log(myvar); if (true) { let myvar = 'local'; } console.log(myvar); } > global > global

Slide 17

Slide 17 text

‘use strict’; let myvar = 'global'; function f() { console.log(myvar); if (true) { let myvar = ‘local'; console.log(myvar); } }

Slide 18

Slide 18 text

‘use strict’; let myvar = 'global'; function f() { console.log(myvar); if (true) { let myvar = ‘local'; console.log(myvar); } } > global > local

Slide 19

Slide 19 text

Protip #1 Use ‘let’ for mutable references

Slide 20

Slide 20 text

The ‘const’ statement

Slide 21

Slide 21 text

'use strict'; const theAnswer = 42; theAnswer = 87;

Slide 22

Slide 22 text

'use strict'; const theAnswer = 42; theAnswer = 87; > Exception: SyntaxError: invalid assignment to const foo

Slide 23

Slide 23 text

'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana' }; agents['Figgis'] = 'Cyril';

Slide 24

Slide 24 text

'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana' }; agents = { 'Figgis': 'Cyril' };

Slide 25

Slide 25 text

'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana' }; agents = { 'Figgis': 'Cyril' }; > Exception: SyntaxError: invalid assignment to const agents

Slide 26

Slide 26 text

Protip #2 Use ‘const’ for immutable references

Slide 27

Slide 27 text

Protip #3 Replace all usages of ‘var’ with either ‘let’ or ‘const’ depending on context

Slide 28

Slide 28 text

The array spread operator

Slide 29

Slide 29 text

var theNumbers = [4, 8, 15]; function addThree(a, b, c) { return a + b + c; }

Slide 30

Slide 30 text

var theNumbers = [4, 8, 15]; function addThree(a, b, c) { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers);

Slide 31

Slide 31 text

var theNumbers = [4, 8, 15]; function addThree(a, b, c) { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers); // ECMAScript 6 addThree(...theNumbers);

Slide 32

Slide 32 text

addThree(...theNumbers); addThree(4, 8, 15);

Slide 33

Slide 33 text

var foo = [15, 16]; var theNumbers = [4, 8, ...foo, 23, 42]; console.log(theNumbers);

Slide 34

Slide 34 text

> Array [ 4, 8, 15, 16, 23, 42 ] var foo = [15, 16]; var theNumbers = [4, 8, ...foo, 23, 42]; console.log(theNumbers);

Slide 35

Slide 35 text

Protip #4 Replace Function.apply with the array spread operator

Slide 36

Slide 36 text

var theNumbers = [4, 8, 15, 16, 23, 42]; var theNumbersCopy = [...theNumbers]; Protip #5 Use the array spread operator to copy arrays

Slide 37

Slide 37 text

Template Strings

Slide 38

Slide 38 text

let thing = 'piggies'; let quantity = 3; console.log(`${quantity} little ${thing}`); > 3 little piggies

Slide 39

Slide 39 text

function sayHello(name) { return `Hello, ${name}!`; } console.log(sayHello('Kreiger'));

Slide 40

Slide 40 text

function sayHello(name) { return `Hello, ${name}!`; } console.log(sayHello('Kreiger')); > Hello, Kreiger!

Slide 41

Slide 41 text

let multiline = `This is a multiline string!`;

Slide 42

Slide 42 text

for…of loops

Slide 43

Slide 43 text

var theNumbers = [4, 8, 15, 16, 23, 42]; var total = 0; for (var i in theNumbers) { total += i; }

Slide 44

Slide 44 text

var theNumbers = [4, 8, 15, 16, 23, 42]; var total = 0; for (var i in theNumbers) { total += i; } > “0012345”

Slide 45

Slide 45 text

Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); }

Slide 46

Slide 46 text

Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); } > 0 > 1 > 2 > sumOfSquares

Slide 47

Slide 47 text

var theNumbers = [4, 8, 15, 16, 23, 42]; var total = 0; for (var i of theNumbers) { total += i; }

Slide 48

Slide 48 text

var theNumbers = [4, 8, 15, 16, 23, 42]; var total = 0; for (var i of theNumbers) { total += i; } > 108

Slide 49

Slide 49 text

Arrow Functions

Slide 50

Slide 50 text

var nums = [4, 8, 15, 16, 23, 42]; // ECMAScript 5 var squares = nums.map(function(n) { return n * n; }); // ECMAScript 6 let squares = nums.map((n) => n * n);

Slide 51

Slide 51 text

const squareNumber = n => n * n; const squareNumber = (n) => n * n; const addNumbers = a, b => a + b; // Error! const addNumbers = (a, b) => a + b; const addNumbers = (a, b) => { return a + b; };

Slide 52

Slide 52 text

function Person() { this.age = 0; setInterval(function growUp() { this.age++; }, 1000); } var p = new Person();

Slide 53

Slide 53 text

function Person() { var self = this; self.age = 0; setInterval(function growUp() { self.age++; }, 1000); } var p = new Person();

Slide 54

Slide 54 text

function Person() { this.age = 0; setInterval(() => { this.age++; }, 1000); } var p = new Person();

Slide 55

Slide 55 text

Computed Object Properties

Slide 56

Slide 56 text

var p1 = new Person('Sterling', 'Archer'); var p2 = new Person('Lana', 'Kane'); var ages = {}; ages[p1.firstName + ' ' + p1.lastName] = 37; ages[p1.firstName + ' ' + p1.lastName] = 33; { 'Sterling Archer': 37, 'Lana Kane': 33 }

Slide 57

Slide 57 text

let p1 = new Person('Sterling', 'Archer'); let p2 = new Person('Lana', 'Kane'); let ages = { [p1.firstName + ' ' + p1.lastName]: 37, [p2.firstName + ' ' + p2.lastName]: 33 }; { 'Sterling Archer': 37, 'Lana Kane': 33 }

Slide 58

Slide 58 text

Property Value Shorthand in Object Literals

Slide 59

Slide 59 text

var agentName = 'Sterling Archer'; var obj = { agentName: agentName }; { agentName: 'Sterling Archer' }

Slide 60

Slide 60 text

const agentName = 'Sterling Archer'; const obj = { agentName }; { agentName: 'Sterling Archer' }

Slide 61

Slide 61 text

Method Shorthand in Object Literals

Slide 62

Slide 62 text

var atom = { value: 1, addValue: function (value) { return atom.value + value; } };

Slide 63

Slide 63 text

const atom = { value: 1, addValue(value) { return atom.value + value; } };

Slide 64

Slide 64 text

Rest Parameters

Slide 65

Slide 65 text

function handleEvent(event) { var args = Array.slice.call(null, arguments, 1); args.forEach(function(arg) { // do something }); }; handleEvent('click', arg1, arg2, arg3);

Slide 66

Slide 66 text

function handleEvent(event, ...args) { args.forEach(function(arg) { // do something }); }; handleEvent('click', arg1, arg2, arg3);

Slide 67

Slide 67 text

Default Parameters

Slide 68

Slide 68 text

function frobulate(arg1, arg2) { arg1 = arg1 || 23; arg2 = arg2 || 42; } frobulate(); frobulate(10); frobulate(10, 20);

Slide 69

Slide 69 text

function frobulate(arg1, arg2) { if (typeof arg1 === 'undefined') { arg1 = 23; } if (typeof arg2 === 'undefined') { arg2 = 42; } } frobulate(); frobulate(10); frobulate(10, 20);

Slide 70

Slide 70 text

function frobulate(arg1 = 23, arg2 = 42) { // do something } frobulate(); frobulate(10); frobulate(10, 20);

Slide 71

Slide 71 text

function frobulate(arg1, arg2 = 42) { // do something } frobulate(); frobulate(10); frobulate(10, 20);

Slide 72

Slide 72 text

More! • Classes • Destructuring • Generators • New data structures (Map, WeakMap, Set, WeakSet) • Promises • Symbols • New methods on Object, String, Array, Math, Number • Better Unicode support • Modules

Slide 73

Slide 73 text

Use it Now Use shipping features in modern browsers https://kangax.github.io/compat-table/es6/

Slide 74

Slide 74 text

Use it Now Use io.js https://iojs.org

Slide 75

Slide 75 text

Use it Now Compile down to ECMAScript 5 with Babel http://babeljs.io

Slide 76

Slide 76 text