escmascript 6: get ready for the future. now
DESCRIPTION
Learn about upcoming features of ECMAScript 6 that you can try out today!TRANSCRIPT
Get Ready ForThe Future. Now
ECMAScript 6
@szafranek
July 2008
ES4Dec 1999
ES3
Dec 2013Dec 2009
ES5 ES6
ES6 aka Harmony
Backwards compatibility
No “bad parts”are removed
“Better carrots”
Superset of ES 5 strict mode
Block scope
5
hoisting
var i = 1;function b() { i = 10; for (var i = 0; i < 3; i++) { //... }}b();console.log(i);
1
hoisting
var i = 1;function b() { i = 10; for (var i = 0; i < 3; i++) { //... }}b();console.log(i); // 1
1
let
letlet
letlet
•Block scope
letlet
•Block scope•No hoisting
letlet
•Block scope•No hoisting•Fails fast
letlet
•Block scope•No hoisting•Fails fast
= better var
var i = 1;function b() { i = 10; for (let i = 0; i < 3; i++) { //... }}b();console.log(i); // 10
var things = {};for (var i = 0; i < 3; i++) { things["fun" + i] = function() { console.log(i); };}
things["fun0"](); // 3things["fun1"](); // 3things["fun2"](); // 3
var things = {};for (var i = 0; i < 3; i++) { things["fun" + i] = (function(index) { return function() { console.log(index); }; }(i));}
things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2
var things = {};for (var i = 0; i < 3; i++) { let index = i; things["fun" + i] = function() { console.log(index); };}
things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2
constconst
const pi = Math.PI;// ...pi = 10; // SyntaxError
const
function process() { const factor = 10; let result = 5; result *= 3; // thousands lines of code... return result * factor;}
Most variables don't change over time.Using const helps spot unwanted side effects.
constconst = better let
function process() { const factor = 10; let result = 5; result *= 3; // thousands lines of code... return result * factor;}
Most variables don't change over time.Using const helps spot unwanted side effects.
“I am a full const nazi nowadays”
John Carmack: "I am a full const nazi nowadays, and I chide any programmer that doesn’t const every variable and parameter that can be."http://www.phoronix.com/scan.php?page=news_item&px=MTI3NDQ
Use let and const today
defs.js
http://blog.lassus.se/2013/05/defsjs.html
Destructing
10
let point = [3, 7];let [x, y] = point;
console.log(x, y);
let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];
console.log(primary, secondary); // blue red
let point = [3, 7, 5];let [, y] = point;
console.log(y); // 7
Selecting only elements you want
let coords = {long: 11, lat: 45};let {long, lat} = coords;
console.log(long, lat); // 11 45
Destructing objects
let coords = {long: 11, lat: 45};let {long: longitude, lat: latitude} = coords;
console.log(longitude, latitude); // 11 45
Mapping to custom names
Spread operator
let numbers = [3, 10, 7];Math.max(...numbers); // 10
let nodeArray = [...document.querySelectorAll("p")];
var nodeList = document.querySelectorAll("p");var nodeArray =[].slice.apply(nodeList);
ES6
ES5
Rest parameters
function tax(rate, ...values) { //...}
tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]
15
function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}
function tax() { var args = Array.prototype.slice.call(arguments); var rate = args[0]; var values = args.splice(1);
var taxedValues = []; for (var i = 0; i < values.length; i++) { var value = values[i]; taxedValues.push(rate * value); }; return taxedValues;}
ES5
ES6
function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}
function tax() { var args = Array.prototype.slice.call(arguments); var rate = args[0]; var values = args.splice(1);
var taxedValues = []; for (var i = 0; i < values.length; i++) { var value = values[i]; taxedValues.push(rate * value); }; return taxedValues;}
ES5
ES6
Iterators
let elements = ["one", "two", "three"];elements.customProperty = "Won't show up";for (let element of elements) { console.log(element);}
// "one" "two" "three"
Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};
for (var key in obj) { if (obj.hasOwnProperty(key)) { console.log(key, obj[key]); }}
Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};
import items from @"iter";for (let [key, value] of items(obj) { console.log(key, value);}
ES6
ES5
built-in iterators
keys(obj);values(obj);items(obj);
allKeys(obj);allValues(obj);allItems(obj);
Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};
import items from @"iter";for (let [key, value] of items(obj) { console.log(key, value);}
Modulesin progress!
18
module Map { export function zoom(coords) { console.log("zooming to ", coords); }; export function pan(coords) { console.log("panning to ", coords); }; export var defaultMode = "satellite";};
import {zoom, defaultMode} from Map;zoom({lat: 30, long: 10});
module loaders
Loader.load('map.js', function (map) { map.zoom({lat: 30, long: 10});}, errorCallback);
loader pipeline
Loader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();
Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable with ES6 modules.
https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
loader pipeline
Loader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();
// CoffeeScript!
Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable with ES6 modules.
https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
loader pipeline
Loader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();
// CoffeeScript!// AMD, Common.js!
Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable with ES6 modules.
https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}
Arrow functions
function tax(rate, ...values) { return values.map(value => rate * value);}
lexical this
function Greeter() { this.name = "jsDay"; this.hello = function() { console.log("Hello " + this.name); }}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);
ES5
function Greeter() { this.name = "jsDay"; this.hello = function() { console.log("Hello " + this.name); }}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);
ES5
function Greeter() { this.name = "jsDay"; this.hello = () => console.log("Hello " + this.name)}var greet = new Greeter();setTimeout(greet.hello, 1000);
ES6
Last but not least...
20
Classes
function Vehicle(name) { this.name = name;}Vehicle.prototype.drive = function () { return "Wrooom";};
// Inheritancefunction Car(name, maxSpeed) { Vehicle.call(this, name); this.maxSpeed = maxSpeed;}
Car.prototype = Object.create(Vehicle.prototype);Car.prototype.constructor = Car;Car.prototype.drive = function () { return Vehicle.prototype.drive.call(this) + " at " + this.maxSpeed;};
class Vehicle { constructor(name) { this.name = name; } drive() { return "Wrooom"; }}
// Inheritanceclass Car extends Vehicle { constructor(name, maxSpeed) { super.constructor(name); this.maxSpeed = maxSpeed; } drive() { return super.drive() + " at " + this.maxSpeed; }}
Iterators
Classes
Destructing
Block scope
ModulesIterators
Iterators
Spread operatorRest parameters
Arrow functions
Iterators
Maps
Promises WeakMapsSetsUnicode Proxies
Iterators
Binary data
Tail callsGeneratorsTemplate stringsAPI improvements
Comprehensions
ES6 today
Firefox Nightly*
Some features are not implemented as in the recent version of the spec, e.g. let.
Chrome Canaryabout:flags
node --harmony
Thank you!
@szafranek
www.2ality.com
www.brendaneich.com
kangax.github.io/es5-compat-table/es6
Photo credits
QuakeCon
cloud2013
Monty Python
iluvgadgets
1