Front End London: Intro to ES6

Aea964cf59c0c81fff752896f070cbbb?s=47 Jack Franklin
October 04, 2014

Front End London: Intro to ES6

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

October 04, 2014
Tweet

Transcript

  1. 1.
  2. 3.
  3. 4.
  4. 6.
  5. 7.
  6. 8.

    var jack = { name: ‘jack’, friends: [‘james’, ‘steve’], printFriends:

    function() { this.friends.forEach(function(f) { log(this.name, ‘knows’, f);
 })
 } }; ! // undefined knows james // undefined knows steve
  7. 9.

    var jack = { name: ‘jack’, friends: [‘james’, ‘steve’], printFriends:

    function() { this.friends.forEach((f) => { log(this.name, ‘knows’, f);
 })
 } }; ! // jack knows james // jack knows steve
  8. 10.

    var someAjax = { name: ‘jack’, get: function() { $.getJSON(url,

    function(d) { log(this.name, d); })
 } };
  9. 12.
  10. 13.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
  11. 14.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
  12. 15.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
  13. 17.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
  14. 18.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
  15. 19.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
  16. 20.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
  17. 21.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
  18. 23.

    var jack = { name: ‘jack’, age: 22, about() {

    log(this.name, this.age);
 } };
  19. 24.

    var jack = { ['hello_' + (() => 'world')()]: 42

    }; ! console.log(jack.hello_world); // 42
  20. 27.

    var f =`Multiline strings with back ticks in ES6.` !

    console.log(f); ! Multiline strings with back ticks in ES6
  21. 32.
  22. 34.
  23. 36.

    function getInfo(print: false) { if(print) { log(this.name, this.age);
 } else

    { return `${this.name} ${this.age}`
 }
 } ! getInfo();
  24. 38.

    function total(x, y, z) { log(x + y + z);

    }; ! total(1, 2, 3) ! total.apply(null, [1, 2, 3]); ! total(...[1, 2, 3]);
  25. 39.

    function total(x, y, z) { log(x + y + z);

    }; ! total(1, 2, 3) ! total.apply(null, [1, 2, 3]); ! total(...[1, 2, 3]);
  26. 41.
  27. 43.

    foo = 2; ! var fad = 2; ! !

    function() { bar = 3; ! var baz = 4;
 } ! foo: 2, fad: 2, bar: 3 baz: 4
  28. 44.

    function() { if(x) { var foo = 3; } var

    baz = 4;
 } foo: 3, baz: 4
  29. 46.

    foo = 2; ! function() { var baz = 4;

    if(x) { let y = 2;
 }
 } ! foo: 2 ! baz: 4 ! y: 2
  30. 47.

    foo = 2; ! function() { var baz = 4;

    if(x) { var z = 3; let y = 2;
 }
 } ! foo: 2 ! baz: 4, z: 3 ! y: 2
  31. 48.
  32. 49.

    var foo = 2; var bar = 3; ! export

    {foo, bar}; import {foo} from ‘app’ ! console.log(foo); // 2 app.js foo.js
  33. 50.

    export var foo = 2; import {foo} from ‘app’ !

    console.log(foo); // 2 app.js foo.js
  34. 51.

    export default function() { return 2; }; import foo from

    ‘app’ ! console.log(foo()); // 2 app.js foo.js
  35. 52.

    export var foo = 2; export var bar = 3;

    module stuff from ‘app’; ! stuff.foo // 2 stuff.bar // 3 app.js foo.js
  36. 54.

    Person.findOne({id: 5}, (per) => { // person has been got

    Location.findOne(…, (loc) => { // location has been got });
 });
  37. 55.

    var per = yield Person.findOne(…); ! var loc = yield

    Location.findOne(…); ! // async but reads as sync! !
  38. 56.