Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EcmaScript 6 - the future is here

EcmaScript 6 - the future is here

Talk given at JsDay (Verona, Italy) - May 2014

Sebastiano Armeli

May 16, 2014
Tweet

More Decks by Sebastiano Armeli

Other Decks in Programming

Transcript

  1. ES6

  2. History 1995 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
  3. History 2005 2007 2008 2009 2011 2013 2014 ES 4

    again! (Adobe, Mozilla,! Google)! ES 3.1 ! (Microsoft, Yahoo)! beginning ES 5 spec finalized (June) ECMA-262 Ed.5 (June) ES 6 proposals freeze (Dec) ECMA-262 Ed.6 target release (27th April) latest spec draft (July) Agreement: ES3.1 & ES-Harmony! ! ES3.1 becomes ES5
  4. ES-Harmony Proposal ES 6 Candidate ECMA-262 Ed.6 standardized ES 6

    Specification Draft TC39 Process Strawman Proposal
  5. (Fat) arrow function var y = (x) => x +

    1 var y = function(x) { return x + 1; } ES6 ES5
  6. (Fat) arrow function var y = (x) => x +

    1 var y = function(x) { return x + 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding
  7. (Fat) arrow function var y = (x) => x +

    1 var y = function(x) { return x + 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding
  8. (Fat) arrow function var y = (x) => x +

    1 var y = function(x) { return x + 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding
  9. let x = (x) => {return x + 1} var

    x = function(x) { return x + 1; } let x = (x, y) => ({ x: x, y: y }) var x = function(x, y) { return { x: x, y: y }; } ES6 ES5
  10. let map = words => words.map((w) => w.length); var map

    = function(words) { return words.map(function(w) { return w.length; } } ES6 ES5 map([‘sea’, ‘beach’, ‘do’]); // [3,5,2]
  11. 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
  12. Block Scoping Each BLOCK has got its lexical environment let/const

    bind variables to the lexical environment Variables declared with let/const are NOT hoisted
  13. var vs let (function() { console.log(y) // “undefined” if (true)

    { var y = “value”; } console.log(y) // “value” }());
  14. 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” }());
  15. const (function() { const X; X = “foo”; // ERROR:

    x unitialized }()); (function() { const X = “foo”; X = “foo2”; // ERROR: x is read-only }());
  16. Destructing array var [x,y] = [‘a’, ‘b’]; ! console.log(x); //

    ‘a’ ! console.log(y); // ‘b’ ! ! var [x,y] = [y, x]; ! console.log(x); // ‘b’
  17. Destructing object var obj = {width: 50, height: 100}; !

    var {width, height} = obj; ! console.log(width); // 50
  18. Destructing multiple return value var fn = function(){ return [“50”,

    “100”]; } ! var [width, height] = fn(); ! console.log(width); //50 console.log(height); //100
  19. Rest parameters function fn(a, …args) { console.log(args); //[“b”, “c”] args.forEach(function(arg)

    { console.log(arg); }; } ! fn(“a”, “b”, “c”); ! // b // c
  20. Spread operator function fn(a, b, c) {} ! var array

    = [“A”, “B”, “C”]; fn.apply(null, array);
  21. function fn(a, b, c) {} ! var array = [“A”,

    “B”, “C”]; fn.apply(null, array); fn(…array); Spread operator
  22. for-of var array = [“a”, “b”, “c”]; ! for (let

    el of array) { console.log(el); } ! // “a” // “b” // “c”
  23. Array comprehension var array = [1, 2, 11, 20]; !

    var array_c = [x (for x of array) (if x > 10)]; ! // [11, 20]
  24. 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}
  25. ! 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”
  26. ! 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
  27. Set Set of values - NO duplicates Different type of

    values add(key)/ has(key) / delete(key) entries() -> Iterator
  28. let countries = new Set(); countries.add(“US”); countries.add(“Italy”); countries.add(“US”); ! countries.values().next().value;

    // “US” ! countries.values().next().value; // “Italy” ! for(let country of countries) { console.log(country); }
  29. let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !

    dict.get(“A”); // “1” dict.delete(“B”); ! for(let w of dict.keys()) { console.log(w); // “A” // “B” } ! for(let w of dict.values()) { console.log(w); // 1 // 2 }
  30. WeakMap Avoid memory leaks Reference to the key obj held

    weakly Key must be an object No iterators methods
  31. Module ! module “ads” { export function register(ad) { return

    ad; } } ! import {register} from “ads”; var app = { doIt: function() { register({}); } } export app; app.js lib/ads.js
  32. ! module “widget” {…} module “widget/button” {…} module “widget/text” {…}

    ! ! import ‘lib/ad’ as c; import { meth as method } from ‘a'; ! ! export default class {}; // Ad.js import Ad from ‘ad'; // app.js
  33. Class / Subclass ! 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; } }
  34. ! 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() { return Animal.prototype.toString.call(this) + “ owned by ” + this.ownerName; }
  35. 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); } !
  36. var object = { method() { return “a”; } }

    object.method(); // “a” !
  37. var object = { method() { return “a”; } }

    object.method(); // “a” ! function f(x, y) { return {x: x, y: y};} function f(x, y) { return {x, y}; } =
  38. Proxies var obj = {num: 1}; ! obj = Proxy(obj,

    { set: function (target, property, value) { target[property] = value + 1; } }); ! obj.num = 2 // [[Set]] console.log(obj.num); // 3
  39. Proxies 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/