ECMAScript 6 - part 1

block scoping, classes, modules, destructuring, default parameters

Transcript

1. ecmascript 6
   today!
   www.sayan.ee
   Sunday, 12 May, 13
   

   View Slide

2. Sunday, 12 May, 13
   

   View Slide

3. 1995
   birth
   Sunday, 12 May, 13
   

   View Slide

4. 1995 1999
   birth
   standardised
   Sunday, 12 May, 13
   

   View Slide

5. 1995 1999 2005
   birth
   standardised
   es3
   js1.5
   Sunday, 12 May, 13
   

   View Slide

6. 1995 1999 2005 2013
   birth
   standardised
   es3
   js1.5
   es6
   js2.0
   harmony
   Sunday, 12 May, 13
   

   View Slide

7. es6
   modules
   block scoping
   generators
   proxies
   binary data
   string templates
   destructuring
   rest args
   name objects
   hash table weak maps
   comprehension
   classes
   Sunday, 12 May, 13
   

   View Slide

8. es6
   modules
   block scoping
   destructuring
   classes
   google
   traceur
   features use today!
   Sunday, 12 May, 13
   

   View Slide

9. block scoping - let
   now
   var jsFuture = "es6";
   (function () {
   if (!jsFuture) {
   var jsFuture = "es5";
   }
   console.log(jsFuture);
   }());
   es6
   Sunday, 12 May, 13
   

   View Slide

10. block scoping - let
    now
    var jsFuture = "es6";
    (function () {
    if (!jsFuture) {
    var jsFuture = "es5";
    }
    console.log(jsFuture);
    }());
    // var jsFuture;
    // jsFuture = es5
    es6
    Sunday, 12 May, 13
    

    View Slide

11. var jsFuture = "es6";
    (function () {
    if (!jsFuture) {
    let jsFuture = "es5";
    }
    console.log(jsFuture);
    // jsFuture = es6
    }());
    block scoping - let
    now
    var jsFuture = "es6";
    (function () {
    if (!jsFuture) {
    var jsFuture = "es5";
    }
    console.log(jsFuture);
    }());
    // var jsFuture;
    // jsFuture = es5
    es6
    variables are block scoped
    Sunday, 12 May, 13
    

    View Slide

12. block scoping - const
    now
    var LATEST_IE = 11;
    LATEST_IE = 6;
    console.log( 'I now have IE' + LATEST_IE);
    Sunday, 12 May, 13
    

    View Slide

13. block scoping - const
    now
    var LATEST_IE = 11;
    LATEST_IE = 6;
    console.log( 'I now have IE' + LATEST_IE);
    es6
    const LATEST_IE = 11;
    LATEST_IE = 6;
    console.log( 'I now have IE' + LATEST_IE);
    variables are read-only
    Sunday, 12 May, 13
    

    View Slide

14. classes
    now es6
    var Language = function(config) {
    this.name = config.name;
    this.founder = config.founder;
    this.year = config.year;
    };
    Language.prototype.summary = function() {
    return this.name +
    " was created by " +
    this.founder +
    " in " + this.year;
    };
    // extending Language?
    Sunday, 12 May, 13
    

    View Slide

15. classes
    now es6
    google
    traceur
    var Language = function(config) {
    this.name = config.name;
    this.founder = config.founder;
    this.year = config.year;
    };
    Language.prototype.summary = function() {
    return this.name +
    " was created by " +
    this.founder +
    " in " + this.year;
    };
    // extending Language?
    class Language {
    constructor(name, founder, year) {
    this.name = name;
    this.founder = founder;
    this.year = year;
    }
    summary() {
    return this.name +
    " was created by " +
    this.founder +
    " in " + this.year;
    }
    }
    class MetaLanguage extends Language {
    constructor(x, y, z, version) {
    super(x, y, z);
    this.version = version;
    }
    }
    extendable code
    Sunday, 12 May, 13
    

    View Slide

16. modules
    now es6
    google
    traceur
    var circle = (function() {
    "use strict";
    var pi = 3.141;
    function area(radius) {
    return "Area of Circle with radius " + radius + " is " +
    (pi * radius * radius);
    }
    function circumference(radius) {
    return "Circumference of Circle with radius " + radius +
    " is " + (2 * pi * radius);
    }
    return Object.preventExtensions(Object.create(null, {
    pi: {
    get: function() {
    return pi;
    },
    enumerable: true
    },
    area: {
    get: function() {
    return area;
    },
    enumerable: true
    },
    circumference: {
    get: function() {
    return circumference;
    },
    enumerable: true
    }
    }));
    }).call(this);
    module circle {
    export var pi = 3.141;
    export function area(radius) {
    return
    "Area of Circle with radius "
    + radius + " is "
    + (pi * radius * radius);
    }
    export function circumference(radius) {
    return
    "Circumference of Circle with radius
    " + radius + " is "
    + (2 * pi * radius);
    }
    }
    console.log( circle.area(3) );
    console.log( circle.circumference(2) );
    classes can be instantiated as objects
    while modules cannot
    Sunday, 12 May, 13
    

    View Slide

17. // Variable Swapping
    var a = 'Brisbane', b = 'Singapore', temp;
    temp = b;
    b = a;
    a = temp;
    // Multiple-Variable returns
    function jsEngines() {
    return ['V8', 'SpiderMonkey', 'Trident'];
    }
    var chrome = jsEngines()[0], firefox = jsEngine()[1], ie = jsEngine()[2];
    destructuring
    now
    Sunday, 12 May, 13
    

    View Slide

18. // Variable Swapping
    var a = 'Brisbane', b = 'Singapore', temp;
    temp = b;
    b = a;
    a = temp;
    // Multiple-Variable returns
    function jsEngines() {
    return ['V8', 'SpiderMonkey', 'Trident'];
    }
    var chrome = jsEngines()[0], firefox = jsEngine()[1], ie = jsEngine()[2];
    destructuring
    now
    es6
    google
    traceur
    // Variable Swapping
    var [a, b] = ['Brisbane', 'Singapore'];
    console.log('I bought plane ticket ' + a + '-' + b + ' for CampJS');
    [a,b] = [b,a];
    console.log('oops!! I meant, I bought plane ticket ' + a + '-' + b + ' for CampJS');
    // Multiple-Variable returns
    function jsEngines() {
    return ['V8', 'SpiderMonkey', 'Trident'];
    }
    var [chrome, firefox, ie] = jsEngines();
    Sunday, 12 May, 13
    

    View Slide

19. compatibility table
    firefox
    chrome
    Sunday, 12 May, 13
    

    View Slide

20. online repl
    Sunday, 12 May, 13
    

    View Slide

21. standards documentation
    Sunday, 12 May, 13
    

    View Slide

22. other resources
    Sunday, 12 May, 13
    

    View Slide

23. Sunday, 12 May, 13
    

    View Slide