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

Exploring ES6

48619fc17b3ab68472aebd56c0106278?s=47 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!

48619fc17b3ab68472aebd56c0106278?s=128

Max Stoiber

January 27, 2016
Tweet

Transcript

  1. Exploring ES6 Max Stoiber - @mxstbr

  2. Max Stoiber Max Stoiber – @mxstbr – mxstbr.com Freelance Front-End

    Developer @mxstbr Co-Organiser of the React Vienna Meetup
  3. ES6? ES2015? ESxxxx? Max Stoiber – @mxstbr – mxstbr.com

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

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

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

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

  8. Max Stoiber – @mxstbr – mxstbr.com ➡ ES6 TOO LARGE

    ~6 YEARS!
  9. Max Stoiber – @mxstbr – mxstbr.com YEARLY RELEASES

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

  11. Max Stoiber – @mxstbr – mxstbr.com STAGE 0: STRAWMAN STAGE

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

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

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

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

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

    1: PROPOSAL STAGE 2: DRAFT STAGE 3: CANDIDATE STAGE 4: FINISHED
  17. USING ESxxxx today? Max Stoiber – @mxstbr – mxstbr.com

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

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

  20. Max Stoiber – @mxstbr – mxstbr.com

  21. Max Stoiber – @mxstbr – mxstbr.com

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

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

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

  25. Max Stoiber – @mxstbr – mxstbr.com if (true) { var

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

    a = 0; } console.log(a); // "ReferenceError"
  27. Max Stoiber – @mxstbr – mxstbr.com Constants

  28. Max Stoiber – @mxstbr – mxstbr.com var a = 0;

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

    a = 1; // "SyntaxError"
  30. Max Stoiber – @mxstbr – mxstbr.com Blocks

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

  32. Max Stoiber – @mxstbr – mxstbr.com (function() { var a

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

    0; } console.log(a); // "ReferenceError"
  34. Max Stoiber – @mxstbr – mxstbr.com Template Literals

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

  36. Max Stoiber – @mxstbr – mxstbr.com var name = "Max";

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

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

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

  40. Max Stoiber – @mxstbr – mxstbr.com var obj = {

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

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

  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);
  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);
  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);
  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);
  47. Max Stoiber – @mxstbr – mxstbr.com Default Argument Values

  48. Max Stoiber – @mxstbr – mxstbr.com function add(x, y) {

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

    y = 0) { return x + y; }
  50. Max Stoiber – @mxstbr – mxstbr.com Object Literals

  51. Max Stoiber – @mxstbr – mxstbr.com function foo() { console.log("bar");

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

    } const funcs = { foo }; funcs.foo(); // "bar"
  53. Max Stoiber – @mxstbr – mxstbr.com Destructuring

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

  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"
  56. Max Stoiber – @mxstbr – mxstbr.com const employees = ["Max",

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

  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"
  59. Max Stoiber – @mxstbr – mxstbr.com let Max = {

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

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

  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"
  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"
  64. Max Stoiber – @mxstbr – mxstbr.com let & const Blocks

    Template Literals Arrow Functions Default Argument Values Object Literals Destructuring Classes
  65. @mxstbr Max Stoiber – @mxstbr – mxstbr.com