$30 off During Our Annual Pro Sale. View Details »

Exploring ES6

Max Stoiber
January 27, 2016

Exploring ES6

What is ES6, what does it add to JavaScript, and how can you use it today? This talk will answer those questions, and, in answering them, make you a more productive JavaScript developer. Learn about arrow functions, block scoping, template literals and much more!

Max Stoiber

January 27, 2016
Tweet

More Decks by Max Stoiber

Other Decks in Technology

Transcript

  1. Exploring ES6
    Max Stoiber - @mxstbr

    View Slide

  2. Max Stoiber
    Max Stoiber – @mxstbr – mxstbr.com
    Freelance Front-End Developer
    @mxstbr
    Co-Organiser of the React Vienna Meetup

    View Slide

  3. ES6? ES2015? ESxxxx?
    Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  4. TC39
    Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  5. Max Stoiber – @mxstbr – mxstbr.com
    ES5: 2009

    View Slide

  6. Max Stoiber – @mxstbr – mxstbr.com
    ES6: 2015

    View Slide

  7. Max Stoiber – @mxstbr – mxstbr.com
    ~6 YEARS!

    View Slide

  8. Max Stoiber – @mxstbr – mxstbr.com
    ➡ ES6 TOO LARGE
    ~6 YEARS!

    View Slide

  9. Max Stoiber – @mxstbr – mxstbr.com
    YEARLY RELEASES

    View Slide

  10. Max Stoiber – @mxstbr – mxstbr.com
    STAGES

    View Slide

  11. Max Stoiber – @mxstbr – mxstbr.com
    STAGE 0: STRAWMAN
    STAGE 1: PROPOSAL
    STAGE 2: DRAFT
    STAGE 3: CANDIDATE
    STAGE 4: FINISHED

    View Slide

  12. Max Stoiber – @mxstbr – mxstbr.com
    STAGE 0: STRAWMAN
    STAGE 1: PROPOSAL
    STAGE 2: DRAFT
    STAGE 3: CANDIDATE
    STAGE 4: FINISHED

    View Slide

  13. Max Stoiber – @mxstbr – mxstbr.com
    STAGE 0: STRAWMAN
    STAGE 1: PROPOSAL
    STAGE 2: DRAFT
    STAGE 3: CANDIDATE
    STAGE 4: FINISHED

    View Slide

  14. Max Stoiber – @mxstbr – mxstbr.com
    STAGE 0: STRAWMAN
    STAGE 1: PROPOSAL
    STAGE 2: DRAFT
    STAGE 3: CANDIDATE
    STAGE 4: FINISHED

    View Slide

  15. Max Stoiber – @mxstbr – mxstbr.com
    STAGE 0: STRAWMAN
    STAGE 1: PROPOSAL
    STAGE 2: DRAFT
    STAGE 3: CANDIDATE
    STAGE 4: FINISHED

    View Slide

  16. Max Stoiber – @mxstbr – mxstbr.com
    STAGE 0: STRAWMAN
    STAGE 1: PROPOSAL
    STAGE 2: DRAFT
    STAGE 3: CANDIDATE
    STAGE 4: FINISHED

    View Slide

  17. USING ESxxxx today?
    Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  18. TRANSPILING
    Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  19. Max Stoiber – @mxstbr – mxstbr.com
    BABEL

    View Slide

  20. Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  21. Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  22. ES6
    Max Stoiber – @mxstbr – mxstbr.com

    View Slide

  23. Max Stoiber – @mxstbr – mxstbr.com
    let & const

    View Slide

  24. Max Stoiber – @mxstbr – mxstbr.com
    Block scoped

    View Slide

  25. Max Stoiber – @mxstbr – mxstbr.com
    if (true) {
    var a = 0;
    }
    console.log(a);
    // "0"

    View Slide

  26. Max Stoiber – @mxstbr – mxstbr.com
    if (true) {
    let a = 0;
    }
    console.log(a);
    // "ReferenceError"

    View Slide

  27. Max Stoiber – @mxstbr – mxstbr.com
    Constants

    View Slide

  28. Max Stoiber – @mxstbr – mxstbr.com
    var a = 0;
    a = 1;
    console.log(a);
    // "1"

    View Slide

  29. Max Stoiber – @mxstbr – mxstbr.com
    const a = 0;
    a = 1;
    // "SyntaxError"

    View Slide

  30. Max Stoiber – @mxstbr – mxstbr.com
    Blocks

    View Slide

  31. Max Stoiber – @mxstbr – mxstbr.com
    Replace IIFEs

    View Slide

  32. Max Stoiber – @mxstbr – mxstbr.com
    (function() {
    var a = 0;
    }());
    console.log(a);
    // "ReferenceError"

    View Slide

  33. Max Stoiber – @mxstbr – mxstbr.com
    {
    let a = 0;
    }
    console.log(a);
    // "ReferenceError"

    View Slide

  34. Max Stoiber – @mxstbr – mxstbr.com
    Template Literals

    View Slide

  35. Max Stoiber – @mxstbr – mxstbr.com
    Easy String Construction

    View Slide

  36. Max Stoiber – @mxstbr – mxstbr.com
    var name = "Max";
    var twitter = "@mxstbr";
    console.log("Find " + name + " on Twitter: " + twitter);
    // "Find Max on Twitter: @mxstbr"

    View Slide

  37. Max Stoiber – @mxstbr – mxstbr.com
    const name = "Max";
    const twitter = "@mxstbr";
    console.log(`Find ${name} on Twitter: ${twitter}`);
    // "Find Max on Twitter: @mxstbr"

    View Slide

  38. Max Stoiber – @mxstbr – mxstbr.com
    Arrow Functions

    View Slide

  39. Max Stoiber – @mxstbr – mxstbr.com
    Shorter function declarations

    View Slide

  40. Max Stoiber – @mxstbr – mxstbr.com
    var obj = {
    hello: function(name) {
    console.log("Hello", name);
    }
    }
    obj.hello("world");
    // "Hello world"

    View Slide

  41. Max Stoiber – @mxstbr – mxstbr.com
    const obj = {
    hello: (name) => {
    console.log(`Hello ${name}`);
    }
    }
    obj.hello("world");
    // "Hello world"

    View Slide

  42. Max Stoiber – @mxstbr – mxstbr.com
    Lexical Binding

    View Slide

  43. Max Stoiber – @mxstbr – mxstbr.com
    function Person(age) {
    // this = instance of Person
    this.age = age;
    setInterval(function growUp() {
    this.age++; // Does not refer to the Person instance!
    }, 1000);
    }
    var Max = new Person(19);

    View Slide

  44. Max Stoiber – @mxstbr – mxstbr.com
    function Person(age) {
    // self = instance of Person
    var self = this;
    self.age = age;
    setInterval(function growUp() {
    self.age++; // Correctly refers to the Person instance!
    }, 1000);
    }
    var Max = new Person(19);

    View Slide

  45. Max Stoiber – @mxstbr – mxstbr.com
    function Person(age) {
    this.age = age;
    setInterval(function growUp() {
    this.age++; // Correctly refers to the Person instance!
    }.bind(this), 1000); // Bind the Person instance!
    }
    var Max = new Person(19);

    View Slide

  46. Max Stoiber – @mxstbr – mxstbr.com
    function Person(age) {
    this.age = age;
    setInterval(() => { // Does not bind its own “this”!
    this.age++; // Correctly refers to the Person instance!
    }, 1000);
    }
    const Max = new Person(19);

    View Slide

  47. Max Stoiber – @mxstbr – mxstbr.com
    Default Argument Values

    View Slide

  48. Max Stoiber – @mxstbr – mxstbr.com
    function add(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
    }

    View Slide

  49. Max Stoiber – @mxstbr – mxstbr.com
    function add(x = 0, y = 0) {
    return x + y;
    }

    View Slide

  50. Max Stoiber – @mxstbr – mxstbr.com
    Object Literals

    View Slide

  51. Max Stoiber – @mxstbr – mxstbr.com
    function foo() {
    console.log("bar");
    }
    var funcs = {
    foo: foo
    };
    funcs.foo();
    // "bar"

    View Slide

  52. Max Stoiber – @mxstbr – mxstbr.com
    function foo() {
    console.log("bar");
    }
    const funcs = {
    foo
    };
    funcs.foo();
    // "bar"

    View Slide

  53. Max Stoiber – @mxstbr – mxstbr.com
    Destructuring

    View Slide

  54. Max Stoiber – @mxstbr – mxstbr.com
    Arrays

    View Slide

  55. Max Stoiber – @mxstbr – mxstbr.com
    var employees = ["Max", "Peter", "Hans"];
    var Max = employees[0];
    var Peter = employees[1];
    var Hans = employees[2];
    console.log(Max, Peter, Hans);
    // "Max" "Peter" "Hans"

    View Slide

  56. Max Stoiber – @mxstbr – mxstbr.com
    const employees = ["Max", "Peter", “Hans"];
    let [ Max, Peter, Hans ] = employees;
    console.log(Max, Peter, Hans);
    // "Max" "Peter" "Hans"

    View Slide

  57. Max Stoiber – @mxstbr – mxstbr.com
    Objects

    View Slide

  58. Max Stoiber – @mxstbr – mxstbr.com
    var Max = {
    name: "Max Stoiber",
    occupation: "Developer"
    }
    var name = Max.name;
    var occupation = Max.occupation;
    console.log(name, occupation);
    // "Max Stoiber" "Developer"

    View Slide

  59. Max Stoiber – @mxstbr – mxstbr.com
    let Max = {
    name: "Max Stoiber",
    occupation: "Developer"
    }
    let { name, occupation } = Max;
    console.log(name, occupation);
    // "Max Stoiber" "Developer"

    View Slide

  60. Max Stoiber – @mxstbr – mxstbr.com
    Classes

    View Slide

  61. Max Stoiber – @mxstbr – mxstbr.com
    Easier OOP

    View Slide

  62. Max Stoiber – @mxstbr – mxstbr.com
    function Person(age) {
    this.age = age;
    }
    Person.prototype.growUp = function () {
    return this.age += 1;
    };
    var Max = new Person(19);
    Max.growUp();
    console.log(Max.age);
    // "20"

    View Slide

  63. Max Stoiber – @mxstbr – mxstbr.com
    class Person {
    constructor(age) {
    this.age = age;
    }
    growUp() {
    this.age += 1;
    }
    }
    const Max = new Person(19);
    Max.growUp();
    console.log(Max.age);
    // "20"

    View Slide

  64. Max Stoiber – @mxstbr – mxstbr.com
    let & const
    Blocks
    Template Literals
    Arrow Functions
    Default Argument Values
    Object Literals
    Destructuring
    Classes

    View Slide

  65. @mxstbr
    Max Stoiber – @mxstbr – mxstbr.com

    View Slide