Upload
others
View
15
Download
1
Embed Size (px)
Citation preview
ECMASCRIPT 6 IN DEPTH
ECMAWHAT?ECMAScript is the standardized language
Best known implementation is JavaScript
ECMAScript 6 is a superset of current version
WHAT'S THE BIG DEAL?
JavaScript
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
Any application that can be written in JavaScript, will eventually be written in JavaScript.
~Atwood's Law
BACKGROUNDCurrent version is ECMAScript 5.1 (2011)
Next version is officially ECMAScript 2015
ECMAScript 6 (ES6) mindshare tough to penetrate
BACKGROUNDECMAScript 6 is complete
Spec is finalized
Publication in June 2015
Browsers continually implementing features
Fully compliant browser by end of 2015?
USING ES6 TODAYTranspile: ES6 -> ES5
ES6 Shims
Sourcemaps
Module System
PART IBlock ScopingArrow FunctionsObject Literal SyntaxClassesDefault Parameters"..." OperatorDestructring AssigmentTemplate Strings / Tagged TemplatesModules
BLOCK SCOPINGES < 6 has lexical scoping only
ES6 introduces let and const for block scoping
Block scoped function declarations
let foo = 'bar'; console.log(foo); // bar
console.log(foo); // Reference Error let foo = 'bar';
var foo = 'bar'; { let foo = 'baz'; console.log(foo); // baz } console.log(foo); // bar
const foo = 'bar'; console.log(foo) // bar foo = 'baz' // TypeError
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
{ foo(); // ok
function foo() {} }
foo(); // ReferenceError
ARROW FUNCTIONSTerse function syntax
Lexical "this" binding
Inspired by C# and CoffeeScript
// ES5 function square(x) { return x * x; }
// ES6 let square = x => x * x;
// ES5 [1, 2, 3].map(function (x) { return x * x; }
// ES6 [1, 2, 3].map(x => x * x);
arg => expr
arg => { stmt1; stmt2; ... }
(arg1, arg2, ...) => expr
(arg1, arg2, ...) => { stmt1; stmt2; ... }
// 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(); }); }
() => {} 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
OBJECT LITERAL SYNTAXES6 introduces object literal enhancements
Property shorthand
Compact method syntax
Computed properties
var a = 1, b = 2;
// ES5 var foo = { a: a, b: b };
// ES6 let foo = { a, b };
// ES5 var foo = { bar: function (x) { return x; } }
// ES6 let foo = { bar(x) { return x; } }
let foo = { ['foo' + 'Bar']: function (x) { return x + x; } }
foo.fooBar(3); // 6
CLASSESClasses are the most divisive ES6 addition
Syntactic sugaring of constructor functions and prototypes
// ES5 function Foo(bar) { this.bar = bar; }
Foo.prototype.baz = function() { }
var foo = new Foo('bar');
// ES6 class Foo { constructor(bar) { this.bar = bar; } baz() { } }
let foo = new Foo('bar');
class Foo { constructor(bar) { this.bar = bar; } static baz() { } }
let foo = new Foo('bar'); Foo.baz() // ok foo.baz(); // undefined
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
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
CLASSES - PROSFriendlier to class-based OO developers
Standardized vs. various lib/framework implementations
Tooling (IDEs, transpilers, type checkers, etc.)
Subclassing built-in objects
CLASSES - CONSSyntax very different from semantics
Constructor-based inheritance
Encourages inheritance over composition
super()
DEFAULT PARAMETERS
// ES5 function foo (bar) { var bar = bar || 'baz'; }
// ES6 function foo(bar='baz') { }
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
function f(arg, cb=Function.prototype) { // do something... cb(arg); }
let myCb = x => { console.log(x); };
f('foo', myCb); // foo f('foo'); // no-op
THE "..." OR "SPREAD" OPERATORDual personality:
Gathering values ("rest" parameters)
Spreading values ("spread" operator)
"REST" PARAMETERS
// ES5 function foo () { var args = [].slice.call(arguments); console.log(args.shift()); ok }
// ES6 function foo(...rest) { console.log(rest.shift()); ok }
function f(arg, ...rest) {} // ok
function f(arg1, arg2, ...rest) {} // ok
function f(...rest, arg) {} // SyntaxError
SPREAD OPERATOR
let arr1 = [4, 5]; let arr2 = [1, 2, 3, ...arr1, 6]; console.log(arr2); // [1, 2, 3, 4, 5, 6]
function foo (a, b, c, d, e, f) {}
let args = [3, 4]; foo(1, 2, ...args, 5, 6);
// 'apply' for constructors let dateParts = [1995, 11, 1];
new Date(...dateParts); // Fri Dec 01 1995
DESTRUCTURING ASSIGNMENTConcise syntax for extracting data from arrays and objects
// 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];
let [a, , , [, e]] = [1, 2, 3, [4, 5]];
console.log(a); // 1 console.log(e); // 5
let a = 1, b = 2;
[b, a] = [a, b];
console.log(a); // 2 console.log(b); // 1
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
// ES5 var obj = {a: 1, b: 2}; var a = obj.a; var b = obj.b;
// ES6 let {a, b} = {a: 1, b: 2};
let {b: {c, d}} = {a: 1, b: {c: 3, d: 4}};
console.log(c); // 3 console.log(d); // 4
let {a: one, b: two} = {a: 1, b: 2};
console.log(one); // 1 console.log(one); // 2
TEMPLATE STRINGSString literals allowing embedded expressions
Supports multi-line strings
// ES5 var name = 'Dave'; var greeting = 'Good morning ' + name;
// ES6 let name = 'Dave'; let greeting = Good morning ${name};
// ES5 var aString = 'string text line\n' + 'string text line2\n';
// ES6 let aString = string text line 1 string text line2;
TAGGED TEMPLATE STRINGSModify output of template strings with a function
Function takes an array of string literals, and ...rest values
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
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"
MODULESStandardized module syntax, sync and async
Replaces CommonJS, AMD, and UMD
CommonJS-like syntax
Named Exports
// foo.js export bar = (baz) => baz; export baz = (fum) => fum;
Default exports (favored)
// foo.js let bar = (baz) => baz; let baz = (fum) => fum; export default { bar, baz };
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';
MODULE LOADER APIDefine, load, configure modules programmatically
Each host environment implements 'System'
// 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 });
USING ES6 MODULES TODAYUntil loader API is implemented, build layer transpile/transform:
BrowserifyWebPackJSPM/SystemJS
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
QUESTIONS?
THANKS!
TIM DOHERTY@TimCDoherty
timdoherty.net