ecmascript 6 in depth · ecmascript 6 (es6) mindshare tough to penetrate. background ecmascript 6...
TRANSCRIPT
![Page 1: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/1.jpg)
ECMASCRIPT 6 IN DEPTH
![Page 2: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/2.jpg)
ECMAWHAT?ECMAScript is the standardized language
Best known implementation is JavaScript
ECMAScript 6 is a superset of current version
![Page 3: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/3.jpg)
WHAT'S THE BIG DEAL?
![Page 4: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/4.jpg)
JavaScript
![Page 5: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/5.jpg)
Despite its quirks...
JavaScript is the most widely deployedprogramming language in the world
Browser : Server : Database : Automation
It's king of the web, no other language even comes close
![Page 6: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/6.jpg)
![Page 7: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/7.jpg)
Any application that can be written in JavaScript, will eventually be written in JavaScript.
~Atwood's Law
![Page 8: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/8.jpg)
BACKGROUNDCurrent version is ECMAScript 5.1 (2011)
Next version is officially ECMAScript 2015
ECMAScript 6 (ES6) mindshare tough to penetrate
![Page 9: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/9.jpg)
BACKGROUNDECMAScript 6 is complete
Spec is finalized
Publication in June 2015
Browsers continually implementing features
Fully compliant browser by end of 2015?
![Page 10: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/10.jpg)
USING ES6 TODAYTranspile: ES6 -> ES5
ES6 Shims
Sourcemaps
Module System
![Page 11: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/11.jpg)
PART IBlock ScopingArrow FunctionsObject Literal SyntaxClassesDefault Parameters"..." OperatorDestructring AssigmentTemplate Strings / Tagged TemplatesModules
![Page 12: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/12.jpg)
BLOCK SCOPINGES < 6 has lexical scoping only
ES6 introduces let and const for block scoping
Block scoped function declarations
![Page 13: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/13.jpg)
let foo = 'bar'; console.log(foo); // bar
![Page 14: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/14.jpg)
console.log(foo); // Reference Error let foo = 'bar';
![Page 15: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/15.jpg)
var foo = 'bar'; { let foo = 'baz'; console.log(foo); // baz } console.log(foo); // bar
![Page 16: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/16.jpg)
const foo = 'bar'; console.log(foo) // bar foo = 'baz' // TypeError
![Page 17: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/17.jpg)
const foo = [1, 2, 3]; foo = [4, 5]; // TypeError foo.concat([4, 5]); console.log(foo); // [1, 2, 3, 4, 5]
const locks assignment only, not value
![Page 18: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/18.jpg)
{ foo(); // ok
function foo() {} }
foo(); // ReferenceError
![Page 19: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/19.jpg)
ARROW FUNCTIONSTerse function syntax
Lexical "this" binding
Inspired by C# and CoffeeScript
![Page 20: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/20.jpg)
// ES5 function square(x) { return x * x; }
// ES6 let square = x => x * x;
![Page 21: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/21.jpg)
// ES5 [1, 2, 3].map(function (x) { return x * x; }
// ES6 [1, 2, 3].map(x => x * x);
![Page 22: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/22.jpg)
arg => expr
arg => { stmt1; stmt2; ... }
(arg1, arg2, ...) => expr
(arg1, arg2, ...) => { stmt1; stmt2; ... }
![Page 23: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/23.jpg)
// ES5 function Widget() { var that = this; var b = document.querySelector('#btn1'); b.addEventListener('click', function() { that.someMethod(); }); }
// ES6 function Widget() { let b = document.querySelector('#btn1'); b.addEventListener('click', () => { this.someMethod(); }); }
![Page 24: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/24.jpg)
() => {} can be used almost everywhere function() is used, but...
Best for short, simple functions, where terseness shines
Always function expressions, can't be hoisted
Deprecated "arguments" object is not available
![Page 25: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/25.jpg)
OBJECT LITERAL SYNTAXES6 introduces object literal enhancements
Property shorthand
Compact method syntax
Computed properties
![Page 26: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/26.jpg)
var a = 1, b = 2;
// ES5 var foo = { a: a, b: b };
// ES6 let foo = { a, b };
![Page 27: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/27.jpg)
// ES5 var foo = { bar: function (x) { return x; } }
// ES6 let foo = { bar(x) { return x; } }
![Page 28: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/28.jpg)
let foo = { ['foo' + 'Bar']: function (x) { return x + x; } }
foo.fooBar(3); // 6
![Page 29: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/29.jpg)
CLASSESClasses are the most divisive ES6 addition
Syntactic sugaring of constructor functions and prototypes
![Page 30: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/30.jpg)
// ES5 function Foo(bar) { this.bar = bar; }
Foo.prototype.baz = function() { }
var foo = new Foo('bar');
![Page 31: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/31.jpg)
// ES6 class Foo { constructor(bar) { this.bar = bar; } baz() { } }
let foo = new Foo('bar');
![Page 32: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/32.jpg)
class Foo { constructor(bar) { this.bar = bar; } static baz() { } }
let foo = new Foo('bar'); Foo.baz() // ok foo.baz(); // undefined
![Page 33: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/33.jpg)
class Foo { constructor(bar) { this.bar = bar; } }
class FooBar extends Foo { constructor(bar) { super(bar); } }
let fooBar = new FooBar('baz'); console.log(fooBar.bar); // baz fooBar instanceof Foo // true
![Page 34: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/34.jpg)
class Foo extends Array{ first() { return this[0]; } last() { return this[this.length - 1]; } }
let foo = new Foo(1, 2, 3); foo.first(); // 1 foo.last(); // 3 foo instanceof Array // true
![Page 35: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/35.jpg)
CLASSES - PROSFriendlier to class-based OO developers
Standardized vs. various lib/framework implementations
Tooling (IDEs, transpilers, type checkers, etc.)
Subclassing built-in objects
![Page 36: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/36.jpg)
CLASSES - CONSSyntax very different from semantics
Constructor-based inheritance
Encourages inheritance over composition
super()
![Page 37: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/37.jpg)
DEFAULT PARAMETERS
![Page 38: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/38.jpg)
// ES5 function foo (bar) { var bar = bar || 'baz'; }
// ES6 function foo(bar='baz') { }
![Page 39: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/39.jpg)
function f({foo='fee', bar='baz'}={}) { console.log(foo + ', ' + bar); }
f({foo: 'fum', bar: 'bim'}); // fum, bim f({foo: 'fum'}); // fum, baz f(); // fee, baz
![Page 40: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/40.jpg)
function f(arg, cb=Function.prototype) { // do something... cb(arg); }
let myCb = x => { console.log(x); };
f('foo', myCb); // foo f('foo'); // no-op
![Page 41: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/41.jpg)
THE "..." OR "SPREAD" OPERATORDual personality:
Gathering values ("rest" parameters)
Spreading values ("spread" operator)
![Page 42: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/42.jpg)
"REST" PARAMETERS
![Page 43: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/43.jpg)
// ES5 function foo () { var args = [].slice.call(arguments); console.log(args.shift()); ok }
// ES6 function foo(...rest) { console.log(rest.shift()); ok }
![Page 44: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/44.jpg)
function f(arg, ...rest) {} // ok
function f(arg1, arg2, ...rest) {} // ok
function f(...rest, arg) {} // SyntaxError
![Page 45: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/45.jpg)
SPREAD OPERATOR
![Page 46: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/46.jpg)
let arr1 = [4, 5]; let arr2 = [1, 2, 3, ...arr1, 6]; console.log(arr2); // [1, 2, 3, 4, 5, 6]
![Page 47: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/47.jpg)
function foo (a, b, c, d, e, f) {}
let args = [3, 4]; foo(1, 2, ...args, 5, 6);
![Page 48: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/48.jpg)
// 'apply' for constructors let dateParts = [1995, 11, 1];
new Date(...dateParts); // Fri Dec 01 1995
![Page 49: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/49.jpg)
DESTRUCTURING ASSIGNMENTConcise syntax for extracting data from arrays and objects
![Page 50: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/50.jpg)
// ES5 var arr = [1, 2, 3]; var a = arr[0]; var b = arr[1]; var c = arr[2];
// ES6 let [a, b, c] = [1, 2, 3];
![Page 51: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/51.jpg)
let [a, , , [, e]] = [1, 2, 3, [4, 5]];
console.log(a); // 1 console.log(e); // 5
![Page 52: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/52.jpg)
let a = 1, b = 2;
[b, a] = [a, b];
console.log(a); // 2 console.log(b); // 1
![Page 53: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/53.jpg)
let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(rest.length); // 3 console.log(rest.shift()); // 3 console.log(rest.shift()); // 4 console.log(rest.shift()); // 5
![Page 54: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/54.jpg)
// ES5 var obj = {a: 1, b: 2}; var a = obj.a; var b = obj.b;
// ES6 let {a, b} = {a: 1, b: 2};
![Page 55: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/55.jpg)
let {b: {c, d}} = {a: 1, b: {c: 3, d: 4}};
console.log(c); // 3 console.log(d); // 4
![Page 56: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/56.jpg)
let {a: one, b: two} = {a: 1, b: 2};
console.log(one); // 1 console.log(one); // 2
![Page 57: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/57.jpg)
TEMPLATE STRINGSString literals allowing embedded expressions
Supports multi-line strings
![Page 58: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/58.jpg)
// ES5 var name = 'Dave'; var greeting = 'Good morning ' + name;
// ES6 let name = 'Dave'; let greeting = Good morning ${name};
![Page 59: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/59.jpg)
// ES5 var aString = 'string text line\n' + 'string text line2\n';
// ES6 let aString = string text line 1 string text line2;
![Page 60: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/60.jpg)
TAGGED TEMPLATE STRINGSModify output of template strings with a function
Function takes an array of string literals, and ...rest values
![Page 61: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/61.jpg)
function upper(strs, ...vals) { return strs.reduce(function (p, c, i) { if (i > 0) { p += vals[i-1].toUpperCase(); } return p + c; }, ''); }
let him = 'Dave', me = 'Hal'; let str = upperHello ${him}, it's ${me}; console.log(str); // Hello DAVE, it's HAL
![Page 62: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/62.jpg)
function raw(strs, ...vals) { console.log(strs); console.log(strs.raw); }
rawFoo\nBar; // ["Foo↵Bar"] // ["Foo\nBar"]
console.log(String.raw('Foo\nBar')); // "Foo\nBar"
![Page 63: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/63.jpg)
MODULESStandardized module syntax, sync and async
Replaces CommonJS, AMD, and UMD
CommonJS-like syntax
![Page 64: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/64.jpg)
Named Exports
// foo.js export bar = (baz) => baz; export baz = (fum) => fum;
![Page 65: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/65.jpg)
Default exports (favored)
// foo.js let bar = (baz) => baz; let baz = (fum) => fum; export default { bar, baz };
![Page 66: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/66.jpg)
Imports
// default exports import foo from './foo';
// named exports import { bar, baz } from './foo';
// default + named exports import foo, { bar, baz } from './foo';
// named exports as object import * as foo from './foo';
// load module but don't import import './foo';
![Page 67: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/67.jpg)
MODULE LOADER APIDefine, load, configure modules programmatically
Each host environment implements 'System'
![Page 68: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/68.jpg)
// load one module (with ES6 promises) System.import('myModule') .then(myModule => { // use myModule });
// load multiple modules Promise.all( ['m1', 'm2', 'm3']. map(m => System.import(m))) .then(([m1, m2, m3]) => { // use m1, m2, m3 });
![Page 69: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/69.jpg)
USING ES6 MODULES TODAYUntil loader API is implemented, build layer transpile/transform:
BrowserifyWebPackJSPM/SystemJS
![Page 70: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/70.jpg)
RESOURCES
- Kyle Simpson- Dr. Axel Rauschmeyer
- Nicholas Zakas
ECMA-262 6th Edition, The 2015 ECMAScript LanguageSpecification (Final Draft)YDKJS - ES6 & BeyondUsing ECMAScript 6 TodayUnderstanding ECMAScript 6Learn ES6 - BabelKangax compatibility tableES6 Fiddle
![Page 71: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/71.jpg)
QUESTIONS?
![Page 72: ECMASCRIPT 6 IN DEPTH · ECMAScript 6 (ES6) mindshare tough to penetrate. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing](https://reader036.vdocuments.site/reader036/viewer/2022062605/5fcac88b8f958547456f0b46/html5/thumbnails/72.jpg)
THANKS!
TIM DOHERTY@TimCDoherty
timdoherty.net