ES6: The future is now
-
Upload
sebastiano-armeli-battana -
Category
Technology
-
view
361 -
download
2
description
Transcript of ES6: The future is now
![Page 1: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/1.jpg)
Sebastiano Armeli @sebarmeli
http://html5hub.com/wp-content/uploads/2013/11/es6-hiway-sign.png
![Page 2: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/2.jpg)
@sebarmeliSebastiano Armeli
![Page 3: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/3.jpg)
ES6
![Page 4: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/4.jpg)
History1995 1996 1997 1998 1999 2000 2003
(May) B. Eich invented Mocha
(Dec) LiveScript renamed to JavaScript
JSScript
(June) ECMA-262 Ed.1!! by TC39 committee
ECMA-262 Ed.2
ECMA-262 Ed.3
ECMA-262 Ed.4 started
ECMA-262 Ed.4 abandoned
(Sep) Mocha renamed to LiveScript
![Page 5: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/5.jpg)
History2005 2007 2008 2009 2011 2014 2015
ES 4 again!(Adobe, Mozilla,! Google)!
ES 3.1 !(Microsoft, Yahoo)! beginning
ES 5 spec finalized
(June) ECMA-262 Ed.5
(Dec) ES 6 spec completion
(Mar) Start publication!(Jun) ECMA-262 Ed.6 ! target release
(July) Agreement:! ES3.1 & ES-Harmony!!ES3.1 becomes ES5
![Page 6: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/6.jpg)
ECMA-262TC39
ES 4
ES-HarmonyES.Next
ES 6
ECMA
ES 7es-discuss
![Page 7: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/7.jpg)
Iteration & Generators
SummaryArrow Functions
Collections Modularity / Classes / Templates
Scoping / Destructing / Parameters
API improvements Proxies
![Page 8: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/8.jpg)
Iteration & Generators
Summary
Collections Modularity / Classes / Templates
Scoping / Destructing / Parameters
API improvements Proxies
Arrow Functions
![Page 9: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/9.jpg)
(Fat) arrow functionvar y = (x) => x + 1 var y = function(x) {
return x + 1; }
ES6 ES5
![Page 10: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/10.jpg)
(Fat) arrow functionvar y = function(x) { return x + 1; }
ES6 ES5
Syntax sugar
var y = (x) => x + 1
![Page 11: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/11.jpg)
(Fat) arrow functionvar y = function(x) { return x + 1; }
ES6 ES5
Syntax sugar
Lexical `this` binding
var y = (x) => x + 1
![Page 12: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/12.jpg)
(Fat) arrow functionvar y = function(x) { return x + 1; }
ES6 ES5
No constructor
Syntax sugar
Lexical `this` binding
var y = (x) => x + 1
![Page 13: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/13.jpg)
var y = (x) => {return x + 1}
var y = function(x) { return x + 1; }
ES6 ES5
![Page 14: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/14.jpg)
var y = (x) => {return x + 1}
var y = function(x) { return x + 1; }
var z = (x, y) => ({ x: x, y: y })
var z = function(x, y) { return { x: x, y: y }; }
ES6 ES5
![Page 15: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/15.jpg)
var mapFn = words => words.map((w) => w.length);
var mapFn = function(words) { return words.map(function(w) { return w.length; } }
ES6
ES5
mapFn([‘sea’, ‘beach’, ‘do’]); // [3,5,2]
![Page 16: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/16.jpg)
var obj = { doIt: function(){}, handle: function(){ var that = this; document.addEventListener(‘click’, function(e) { that.doIt(); }); } }
ES3
![Page 17: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/17.jpg)
var obj = { doIt: function(){}, handle: function(){ document.addEventListener(‘click’, function(e) { this.doIt(); }.bind(this)); } }
ES5
var obj = { doIt: function(){}, handle: function(){ var that = this; document.addEventListener(‘click’, function(e) { that.doIt(); }); } }
ES3
![Page 18: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/18.jpg)
var obj = { doIt: function(){}, handle: function(){ document.addEventListener(‘click’, (e) => this.doIt()); } }
ES6
![Page 19: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/19.jpg)
Object.getPrototypeOf(() => {})
![Page 20: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/20.jpg)
Object.getPrototypeOf(() => {})
Function.prototype
![Page 21: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/21.jpg)
When to use ‘function’ ?
![Page 22: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/22.jpg)
Constructors
Generators
(Methods in object literals)
![Page 23: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/23.jpg)
SummaryArrow Functions
Collections
API improvements Proxies
Scoping / Destructing / Parameters
Iteration & Generators
Modularity / Classes / Templates
![Page 24: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/24.jpg)
Block ScopingEach BLOCK has got its lexical environment
let/const bind variables to the lexical environment
Variables declared with let/const are NOT hoisted
![Page 25: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/25.jpg)
var vs let(function() { console.log(y) // “undefined” if (true) { var y = “value”; } console.log(y) // “value” }());
![Page 26: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/26.jpg)
var vs let
(function() { if (true) { let y = “value”; } console.log(y) // ERROR!! }());
(function() { console.log(y) // “undefined” if (true) { var y = “value”; } console.log(y) // “value” }());
![Page 27: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/27.jpg)
const(function() { const X; X = “foo”; // ERROR: x unitialized }());
(function() { const X = “foo”; X = “foo2”; // ERROR: x is read-only }());
![Page 28: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/28.jpg)
Block functions
if (true) { function fn () {} } !
fn(); // ERROR!
![Page 29: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/29.jpg)
Destructing arrayvar [x,y] = [‘a’, ‘b’]; !
console.log(x); // ‘a’ !
console.log(y); // ‘b’ !
!
var [x,y] = [y, x]; !
console.log(x); // ‘b’
![Page 30: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/30.jpg)
Destructing objectvar obj = {width: 50, height: 100}; !
!
var {width: w, height: h} = obj; var {width, height} = obj; !
!
console.log(width); // 50 console.log(w); // 50 console.log(height); // 100 console.log(h); // 100
![Page 31: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/31.jpg)
Multiple return valuevar fn = function(){ return [“50”, “100”]; } !
var [width, height] = fn(); !
console.log(width); //50 console.log(height); //100
![Page 32: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/32.jpg)
var fn = function(){ return { foo: “bar”, fizz: “buzz” } } !
var {foo, fizz} = fn(); !
console.log(foo); //“bar” console.log(fizz); //“buzz”
![Page 33: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/33.jpg)
Parameter default values
function(foo) { foo = foo || “a”; }
![Page 34: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/34.jpg)
function(foo) { foo = foo || “a”; }
function(foo = “a”) {}
Parameter default values
![Page 35: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/35.jpg)
function fn(…args) { console.log(args); //[“a”, “b”, “c”] args.forEach(function(arg) { console.log(arg); }); } !
fn(“a”, “b”, “c”); !
// a // b // c
Rest parameters
![Page 36: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/36.jpg)
Rest parametersfunction fn(a, …args) { console.log(args); //[“b”, “c”] args.forEach(function(arg) { console.log(arg); }); } !
fn(“a”, “b”, “c”); !
// b // c
![Page 37: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/37.jpg)
Spread operator
function fn(a, b, c) {} !
var array = [“A”, “B”, “C”];
fn.apply(null, array);
![Page 38: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/38.jpg)
function fn(a, b, c) {} !
var array = [“A”, “B”, “C”];
fn.apply(null, array);
fn(…array);
Spread operator
![Page 39: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/39.jpg)
function fn({id, name}) { console.log(name); } !
fn({name: “Seb”}); // “Seb
Named parameters
![Page 40: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/40.jpg)
Iteration & Generators
Summary
Collections
API improvements Proxies
Arrow Functions Scoping / Destructing / Parameters
Modularity / Classes / Templates
![Page 41: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/41.jpg)
for-of
for-of loop on ‘iterables’ and iterators
Arrays/Sets/Maps are ’iterables’
for-in limitations
![Page 42: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/42.jpg)
for-ofvar array = [“a”, “b”, “c”]; !
for (let el of array) { console.log(el); } !
// “a” // “b” // “c”
![Page 43: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/43.jpg)
Iterable{ @@iterator: function() -> iterator }
{ next: function() -> any }
Iterators
![Page 44: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/44.jpg)
Iterator
var array = [“a”, “b”, “c”]; !
array.entries() // Array Iterator array.keys() // Array Iterator
Iterator from Array, Map, Set
![Page 45: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/45.jpg)
function* g() { yield “a”; yield “b”; }
Generator
var generator = g();
generator ‘constructor’
generator.next(); //{ value: “a”, done: false} generator.next(); //{ value: “b”, done: false}generator.next(); //{ value: undefined, done: true}
![Page 46: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/46.jpg)
!
function* g() { yield “a”; var retVal = yield “b”; return retVal; }
var generator = g();
generator.next().value; //“a” generator.next().value; //“b” generator.next(“c”).value; //“c”
![Page 47: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/47.jpg)
!function* asyncFn() { var data = yield getUser(); doSomethingElse(data); }
function run(genFunction) { var generator = genFunction(); generator.next().value.then(function(val){ generator.next(val); }, function(err) { generator.throw(err); }); }
run(asyncFn);
Promise
![Page 48: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/48.jpg)
for (let el of generator) { console.log(el); }
Generators are iterables
![Page 49: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/49.jpg)
Iteration & Generators
Summary
Collections
API improvements Proxies
Arrow Functions Scoping / Destructing / Parameters
Modularity / Classes / Templates
![Page 50: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/50.jpg)
SetNO duplicates values
![Page 51: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/51.jpg)
SetNO duplicates values
Different types in a set
![Page 52: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/52.jpg)
SetNO duplicates values
Different types in a set
add(key)/ has(key) / delete(key)
![Page 53: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/53.jpg)
SetNO duplicates values
Different types in a set
add(key)/ has(key) / delete(key)
values() -> Iterator
![Page 54: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/54.jpg)
let countries = new Set(); countries.add(“US”); countries.add(“Italy”); countries.add(“US”); !
countries // Set [“US”, “Italy”]
![Page 55: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/55.jpg)
let countries = new Set([“US”, “Italy”]); countries // Set [“US”, “Italy”] !
!
!
countries.delete(“Italy”); countries // Set [“US”]
![Page 56: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/56.jpg)
!
for(let country of countries.values()) { console.log(country); // “US” } !
for(let country of countries) { console.log(country); // “US” }
![Page 57: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/57.jpg)
Map{“foo” : “bar” }
![Page 58: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/58.jpg)
Map{“foo” : “bar” }
Keys can be objects
![Page 59: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/59.jpg)
Map{“foo” : “bar” }
Keys can be objects
get(key); has(key); set(key,val)
![Page 60: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/60.jpg)
Map{“foo” : “bar” }
get(key); has(key); set(key,val)
delete(key); clear(); forEach();
Keys can be objects
![Page 61: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/61.jpg)
let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !dict // Map {“A”: 1, “B”: 2}
![Page 62: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/62.jpg)
let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !dict // Map {“A”: 1, “B”: 2} !dict.get(“A”); // “1” dict.delete(“B”);
![Page 63: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/63.jpg)
for(let w of dict.keys()) { // Map Iterator console.log(w); // “A” } !for(let w of dict.values()) { // Map Iterator console.log(w); // 1 } !dict.clear(); dict.size; // 0
![Page 64: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/64.jpg)
let dict = new Map([[“x”, 1], [“y”, 2]]); !!dict; // Map {x: 1, y: 2} !!!for(let w of dict) { ! console.log(w); // [“x”, 1] // [“y”, 2] !});
![Page 65: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/65.jpg)
dict.forEach(function(val, key, map) { ! console.log(val); // x // y ! console.log(key); // 1 // 2 ! console.log(map); // Map { x: 1, y: 2} !});
![Page 66: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/66.jpg)
WeakMapAvoid memory leaks
![Page 67: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/67.jpg)
WeakMapAvoid memory leaks
Reference to the key obj held weakly
![Page 68: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/68.jpg)
WeakMapAvoid memory leaks
Reference to the key obj held weakly
Keys must be an objects
![Page 69: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/69.jpg)
WeakMapAvoid memory leaks
Reference to the key obj held weakly
Keys must be an objects
No iterators methods
![Page 70: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/70.jpg)
Object properties !
with !
Map / WeakMap
![Page 71: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/71.jpg)
Summary
Collections
API improvements Proxies
Arrow Functions Scoping / Destructing / Parameters Iteration & Generators
Modularity / Classes / Templates
![Page 72: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/72.jpg)
Object Literal!
let obj = { ! __proto__: parentObj, meth1(a,b) { ! } !};
![Page 73: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/73.jpg)
Module!export function register(ad) { return ad; }
!
import {register} from “ads”; var app = { doIt: function() { register({}); } } export app;
app.js
lib/ads.js
![Page 74: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/74.jpg)
export default class {}; // Ad.js import Ad from ‘ad'; // app.'s !!import { meth as method } from ‘a’;
![Page 75: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/75.jpg)
Class!
class Animal { constructor(name) { this.name = name; } toString() { return “This is: ” + this.name; } }
![Page 76: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/76.jpg)
Subclass - super!class Cat extends Animal { constructor(name, ownerName) { super(name); this.ownerName = ownerName; } ! toString() { return super() + “ owned by ” + this.ownerName; } }
![Page 77: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/77.jpg)
!class Animal { constructor(name) { this.name = name; } toString() { return “This is: ” + this.name; } } class Cat extends Animal { constructor(name, ownerName) { super.constructor(name); this.ownerName = ownerName; } ! toString() { return super.toString() + “ owned by ” + this.ownerName; } }
![Page 78: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/78.jpg)
!function Animal(name) { this.name = name; } !Animal.prototype.toString = function() { return “This is: ” + this.name; }; !function Cat(name, ownerName) { Animal.call(this, name); this.ownerName = ownerName; } !Cat.prototype = Object.create(Animal.prototype); Cat.prototype.constructor = Cat; Cat.prototype.parent = Animal; !Cat.prototype.toString = function() { var super = Animal.prototype.toString.call(this); return super + “ owned by ” + this.ownerName; };
![Page 79: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/79.jpg)
Template stringsvar a = “hello”; var b = “world”; !
`${a} ${b}!`
![Page 80: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/80.jpg)
Template stringsvar a = “hello”; var b = “world”; !
`${a} ${b}!`
var multiline = `Hello world !!!`;
![Page 81: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/81.jpg)
Summary
Collections
API improvements Proxies
Arrow Functions Scoping / Destructing / Parameters Iteration & Generators
Modularity / Classes / Templates
![Page 82: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/82.jpg)
String methodsString.prototype.startsWith(str) => boolean
String.prototype.endsWith(str) => boolean
String.prototype.contains(str) => boolean
String.prototype.repeat(num) => string
![Page 83: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/83.jpg)
Number methods
Number.isInteger(num) => boolean
Number.isNaN(num) => boolean
Number.isFinite(num) => boolean
…
![Page 84: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/84.jpg)
Array methodsArray.from(obj) => Array
Array.prototype.entries => Iterator
Array.of(…args) => Array
Array.prototype.keys => Iterator
Array.prototype.values => Iterator
![Page 85: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/85.jpg)
var divs = document.querySelectorAll("div"); !
Array.from(divs); !
// [<div></div>, </div></div>] !
Array.of(10, 11); !
// [10, 11] !
![Page 86: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/86.jpg)
var array = [“a”, “b”, “c”]; !
for (let [index, el] of array.entries()) { console.log(index, el); // 0 “a” // 1 “b” // 2 “c” } !
for (let index of array.keys()) { console.log(index); } !
for (let el of array.values()) { console.log(el); } !
![Page 87: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/87.jpg)
Object methods
Object.setPrototypeOf(obj, proto)
Object.assign(obj, mixin)
Object.is(value1, value2)
![Page 88: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/88.jpg)
Math methodsMath.log2(num) => num
Math.log10(num) => num
Math.sinh(num) => num
Math.cosh(num) => num
…
![Page 89: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/89.jpg)
Summary
Collections
API improvements Proxies
Arrow Functions Scoping / Destructing / Parameters Iteration & Generators
Modularity / Classes / Templates
![Page 90: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/90.jpg)
ProxiesProxy(targetObject, interceptors) !
Different use cases (logging, mocking)
Meta-programming
![Page 91: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/91.jpg)
var obj = {num: 1}; !obj = new Proxy(obj, { set: function (target, property, value) { target[property] = value + 1; } }); !obj.num = 2 // [[Set]] console.log(obj.num); // 3
Proxies
![Page 92: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/92.jpg)
function createDefensiveObject(target) { return new Proxy(target, { get: function(target, property) { if (property in target) { return target[property]; } else { throw new ReferenceError(); } } }); } !var obj = createDefensiveObject({name: “Seb”}); console.log(obj.lastname); //ReferenceError
http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/
Proxies
![Page 93: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/93.jpg)
Iteration & Generators
RecapArrow Functions
Collections
Scoping / Destructing / Parameters
API improvements Proxies
Modularity / Classes / Templates
![Page 94: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/94.jpg)
Promises
Symbols
Better Unicode support
Optimized tail calls
Other Features..
![Page 95: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/95.jpg)
ES6 today
Traceur compiler (Google)
es6-transpiler
es6-module-transpiler (Square)
es6-shim
defs.js
![Page 96: ES6: The future is now](https://reader033.fdocuments.net/reader033/viewer/2022061214/549a3f10b4795927538b4d4a/html5/thumbnails/96.jpg)
http://wiki.ecmascript.org
https://people.mozilla.org/~jorendorff/es6-draft.html
http://kangax.github.io/compat-table/es6/
http://esdiscuss.org/
@sebarmeliSebastiano Armeli