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 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