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

Javascript: ES6 Overview

Javascript: ES6 Overview

I gave a short talk about some of the new features of javascript coming with ES6.

Source material: https://github.com/lukehoban/es6features

Kevin Sołtysiak

January 19, 2015
Tweet

More Decks by Kevin Sołtysiak

Other Decks in Programming

Transcript

  1. JAVASCRIPT ES6
    « The future »
    Kevin Soltysiak - @ksol - http://www.ksol.fr

    StrasbourgJS ~ 2015-19-01

    View Slide

  2. JAVASCRIPT ES 6
    • New features
    • Improved syntax
    • Soon to be standardized

    View Slide

  3. ARROW FUNCTIONS
    • Shorthand for function definitions
    • Shares the lexical context (unlike regular functions)

    View Slide

  4. ARROW FUNCTIONS
    // Expression bodies
    var odds = evens.map(v => v + 1);
    var nums = evens.map((v, i) => v + i);
    // Lexical this
    var bob = {
    _name: "Bob",
    _friends: [],
    printFriends: () => {
    this._friends.forEach(f =>
    console.log(this._name + " knows " + f));
    }
    }

    View Slide

  5. ENHANCED LITERALS
    • Shorthands for writing object literals

    View Slide

  6. ENHANCED LITERALS
    var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
    // Super calls
    return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42
    };

    View Slide

  7. CLASSES
    • You can declare classes
    • Still prototypal inheritance at work, this is only syntactic

    View Slide

  8. CLASSES
    class SkinnedMesh extends THREE.Mesh {
    constructor(geometry, materials) {
    super(geometry, materials);
    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
    }
    update(camera) {
    //...
    super.update();
    }
    static defaultMatrix() {
    return new THREE.Matrix4();
    }
    }

    View Slide

  9. TEMPLATE STRINGS
    • Allows interpolations and multiline strings

    View Slide

  10. TEMPLATE STRINGS
    // Basic literal string creation
    `In JavaScript "\n" is a line-feed.`
    // Multiline strings
    `In JavaScript this is
    not legal.`
    // Interpolate variable bindings
    var name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`

    View Slide

  11. DEFAULT ARGUMENTS
    • Functions can have default arguments
    • Sugar to convert arguments from and to arrays

    View Slide

  12. DEFAULT ARGUMENTS
    function f(x, y=12) {
    // y is 12 if not passed (or passed as undefined)
    return x + y;
    }
    f(3) == 15

    View Slide

  13. DEFAULT ARGUMENTS
    function f(x, ...y) {
    // y is an Array
    return x * y.length;
    }
    f(3, "hello", true) == 6
    function f(x, y, z) {
    return x + y + z;
    }
    // Pass each elem of array as argument
    f(...[1,2,3]) == 6

    View Slide

  14. DESTRUCTURING
    • Allows you to use pattern matching in many contexts

    View Slide

  15. DESTRUCTURING
    // list matching
    var [a, , b] = [1,2,3];
    // object matching
    var { op: a, lhs: { op: b }, rhs: c }
    = getASTNode()
    // object matching shorthand
    // binds `op`, `lhs` and `rhs` in scope
    var {op, lhs, rhs} = getASTNode()

    View Slide

  16. DESTRUCTURING
    / Can be used in parameter position
    function g({name: x}) {
    console.log(x);
    }
    g({name: 5})
    // Fail-soft destructuring with defaults
    var [a = 1] = [];
    a === 1;

    View Slide

  17. LET + CONST
    • « var » binds to the function
    • « let » binds to the block
    • « const » is single-assignment

    View Slide

  18. LET + CONST
    function f() {
    {
    let x;
    {
    let y = "out";
    // okay, block scoped name
    const x = « sneaky";
    // error, const
    x = "foo";
    }
    // error, already declared in block
    let x = « inner »;
    // y is not defined here
    }
    }

    View Slide

  19. ITERATORS
    • Allows you to create custom iterators
    • Used with « for … of »

    View Slide

  20. ITERATORS
    let fibonacci = {
    [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
    next() {
    [pre, cur] = [cur, pre + cur];
    return { done: false, value: cur }
    }
    }
    }
    }

    View Slide

  21. ITERATORS
    for (var n of fibonacci) {
    // truncate the sequence at 1000
    if (n > 1000)
    break;
    print(n);
    }

    View Slide

  22. MODULES
    • Language-level support for component definition
    • Implicitly async model – no code executes until requested modules
    are available and processed.

    View Slide

  23. MODULES
    // lib/math.js
    export function sum(x, y) {
    return x + y;
    }
    export var pi = 3.141593;
    // app.js
    import * as math from "lib/math";
    alert("2π = " + math.sum(math.pi, math.pi));
    // otherApp.js
    import {sum, pi} from "lib/math";
    alert("2π = " + sum(pi, pi));

    View Slide

  24. MAP & SET
    • Efficient data structures for common algorithms
    • Also available « leak-free » via WeakMap & WeakSet

    View Slide

  25. SUBCLASSABLE BUILT-INS
    • built-ins like Array, Date and DOM Elements can be subclassed.

    View Slide

  26. PROMISE
    • API for asynchronous programming
    • First class representation of a value that may be made available in the
    future
    • Already used in many libraries (jQuery, Ember.js, etc)
    • Many implementations for today (Q, RSVP, etc)

    View Slide

  27. NEW APIS
    • Many new library additions, including core Math libraries, Array
    conversion helpers, and Object.assign for copying.

    View Slide

  28. NEW APIS
    "abcde".contains("cd") // true
    "abc".repeat(3) // "abcabcabc"
    Array.from(document.querySelectorAll('*')) // Returns a real Array
    Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
    [0, 0, 0].fill(7, 1) // [0,7,7]
    [1,2,3].findIndex(x => x == 2) // 1
    ["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
    ["a", "b", "c"].keys() // iterator 0, 1, 2
    ["a", "b", "c"].values() // iterator "a", "b", "c"

    View Slide

  29. ALSO
    • Generators
    • Binary/Octal literals
    • Unicode
    • Symbols
    • Proxy objects
    • Reflection API
    • Tail recursive calls

    View Slide

  30. SUPPORT ?
    • In the browser: it’s getting there !
    • In node.js: runtime flags can enable some features
    • io.js: some features enabled by default, other via runtime flags
    • Spec should be final mid-2015

    View Slide

  31. SUPPORT ?
    • Projects like 6to5 (github/6to5/6to5) compiles ES6 to ES5
    • You can develop in ES6 today !

    View Slide

  32. QUESTIONS ?

    View Slide

  33. THANKS !
    Kevin Soltysiak - @ksol - http://www.ksol.fr

    StrasbourgJS ~ 2015-19-01
    Slides strongly inspired from github.com/lukehoban/es6features

    View Slide