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

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