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

ECMAScript 6 - part 1

ECMAScript 6 - part 1

block scoping, classes, modules, destructuring, default parameters

Sayanee

May 12, 2013
Tweet

More Decks by Sayanee

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Sunday, 12 May, 13

    View full-size slide

  3. 1995
    birth
    Sunday, 12 May, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  20. online repl
    Sunday, 12 May, 13

    View full-size slide

  21. standards documentation
    Sunday, 12 May, 13

    View full-size slide

  22. other resources
    Sunday, 12 May, 13

    View full-size slide

  23. Sunday, 12 May, 13

    View full-size slide