Download - ESCMAScript 6: Get Ready For The Future. Now
![Page 1: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/1.jpg)
Get Ready ForThe Future. Now
ECMAScript 6
@szafranek
![Page 2: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/2.jpg)
July 2008
ES4Dec 1999
ES3
![Page 3: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/3.jpg)
Dec 2013Dec 2009
ES5 ES6
![Page 4: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/4.jpg)
ES6 aka Harmony
![Page 5: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/5.jpg)
Backwards compatibility
![Page 6: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/6.jpg)
No “bad parts”are removed
![Page 7: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/7.jpg)
“Better carrots”
![Page 8: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/8.jpg)
Superset of ES 5 strict mode
![Page 9: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/9.jpg)
Block scope
5
![Page 10: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/10.jpg)
hoisting
var i = 1;function b() { i = 10; for (var i = 0; i < 3; i++) { //... }}b();console.log(i);
1
![Page 11: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/11.jpg)
hoisting
var i = 1;function b() { i = 10; for (var i = 0; i < 3; i++) { //... }}b();console.log(i); // 1
1
![Page 12: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/12.jpg)
let
![Page 13: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/13.jpg)
letlet
![Page 14: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/14.jpg)
letlet
•Block scope
![Page 15: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/15.jpg)
letlet
•Block scope•No hoisting
![Page 16: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/16.jpg)
letlet
•Block scope•No hoisting•Fails fast
![Page 17: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/17.jpg)
letlet
•Block scope•No hoisting•Fails fast
= better var
![Page 18: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/18.jpg)
var i = 1;function b() { i = 10; for (let i = 0; i < 3; i++) { //... }}b();console.log(i); // 10
![Page 19: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/19.jpg)
var things = {};for (var i = 0; i < 3; i++) { things["fun" + i] = function() { console.log(i); };}
things["fun0"](); // 3things["fun1"](); // 3things["fun2"](); // 3
![Page 20: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/20.jpg)
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
![Page 21: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/21.jpg)
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
![Page 22: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/22.jpg)
constconst
const pi = Math.PI;// ...pi = 10; // SyntaxError
![Page 23: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/23.jpg)
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.
![Page 24: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/24.jpg)
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.
![Page 25: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/25.jpg)
“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
![Page 26: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/26.jpg)
Use let and const today
defs.js
http://blog.lassus.se/2013/05/defsjs.html
![Page 27: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/27.jpg)
Destructing
10
![Page 28: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/28.jpg)
let point = [3, 7];let [x, y] = point;
console.log(x, y);
![Page 29: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/29.jpg)
let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];
console.log(primary, secondary); // blue red
![Page 30: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/30.jpg)
let point = [3, 7, 5];let [, y] = point;
console.log(y); // 7
Selecting only elements you want
![Page 31: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/31.jpg)
let coords = {long: 11, lat: 45};let {long, lat} = coords;
console.log(long, lat); // 11 45
Destructing objects
![Page 32: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/32.jpg)
let coords = {long: 11, lat: 45};let {long: longitude, lat: latitude} = coords;
console.log(longitude, latitude); // 11 45
Mapping to custom names
![Page 33: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/33.jpg)
Spread operator
let numbers = [3, 10, 7];Math.max(...numbers); // 10
![Page 34: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/34.jpg)
let nodeArray = [...document.querySelectorAll("p")];
var nodeList = document.querySelectorAll("p");var nodeArray =[].slice.apply(nodeList);
ES6
ES5
![Page 35: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/35.jpg)
Rest parameters
function tax(rate, ...values) { //...}
tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]
15
![Page 36: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/36.jpg)
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
![Page 37: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/37.jpg)
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
![Page 38: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/38.jpg)
Iterators
let elements = ["one", "two", "three"];elements.customProperty = "Won't show up";for (let element of elements) { console.log(element);}
// "one" "two" "three"
![Page 39: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/39.jpg)
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
![Page 40: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/40.jpg)
built-in iterators
keys(obj);values(obj);items(obj);
allKeys(obj);allValues(obj);allItems(obj);
![Page 41: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/41.jpg)
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);}
![Page 42: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/42.jpg)
Modulesin progress!
18
![Page 43: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/43.jpg)
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});
![Page 44: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/44.jpg)
module loaders
Loader.load('map.js', function (map) { map.zoom({lat: 30, long: 10});}, errorCallback);
![Page 45: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/45.jpg)
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
![Page 46: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/46.jpg)
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
![Page 47: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/47.jpg)
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
![Page 48: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/48.jpg)
function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}
![Page 49: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/49.jpg)
Arrow functions
function tax(rate, ...values) { return values.map(value => rate * value);}
![Page 50: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/50.jpg)
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
![Page 51: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/51.jpg)
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
![Page 52: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/52.jpg)
Last but not least...
20
![Page 53: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/53.jpg)
![Page 54: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/54.jpg)
Classes
![Page 55: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/55.jpg)
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;};
![Page 56: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/56.jpg)
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; }}
![Page 57: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/57.jpg)
Iterators
![Page 58: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/58.jpg)
Classes
Destructing
Block scope
ModulesIterators
Iterators
Spread operatorRest parameters
Arrow functions
![Page 59: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/59.jpg)
Iterators
![Page 60: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/60.jpg)
Maps
Promises WeakMapsSetsUnicode Proxies
Iterators
Binary data
Tail callsGeneratorsTemplate stringsAPI improvements
Comprehensions
![Page 61: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/61.jpg)
ES6 today
![Page 62: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/62.jpg)
Firefox Nightly*
Some features are not implemented as in the recent version of the spec, e.g. let.
![Page 63: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/63.jpg)
Chrome Canaryabout:flags
![Page 64: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/64.jpg)
node --harmony
![Page 65: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/65.jpg)
Thank you!
@szafranek
www.2ality.com
www.brendaneich.com
kangax.github.io/es5-compat-table/es6
![Page 66: ESCMAScript 6: Get Ready For The Future. Now](https://reader034.vdocuments.mx/reader034/viewer/2022042714/554c138cb4c905f1518b4b75/html5/thumbnails/66.jpg)
Photo credits
QuakeCon
cloud2013
Monty Python
iluvgadgets
1