NDC London: Introduction to ES6

Aea964cf59c0c81fff752896f070cbbb?s=47 Jack Franklin
December 04, 2014

NDC London: Introduction to ES6

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

December 04, 2014
Tweet

Transcript

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

    var n = [1, 2, 3, 4]; n.some(x => x

    % 2 == 0); // true n.filter(x => x % 2 != 0); //=> [1, 3] n.map(x => x * 2) //=> [2, 4, 6, 8]
  7. 13.

    var n = [1, 2, 3, 4]; n.filter(x => x

    % 2 == 0) .map(x => x * x); //=> [4, 16]
  8. 15.

    n.map(x => x * 2); get('url', (x, y) => {…});

    $('#foo').click(() => {…}); parens needed for 0, 2+ arguments
  9. 16.

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

    function() { this.friends.forEach(function(f) { log(this.name, 'knows', f);
 })
 } }; jack.printFriends(); // undefined knows james // undefined knows steve
  10. 17.

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

    function() { this.friends.forEach((f) => { log(this.name, 'knows', f);
 })
 } }; jack.printFriends(); // jack knows james // jack knows steve
  11. 18.

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

    function(d) { log(this.name, d); })
 } };
  12. 20.

    var nums = [1,2,3]; nums.map((x) => x * 2); //

    => [2, 4, 6] nums.map((x) => { x * 2; }); // => [undefined…]
  13. 21.

    var nums = [1,2,3]; nums.map((x) => x * 2); //

    => [2, 4, 6] nums.map((x) => { return x * 2; }); // => [2, 4, 6]
  14. 23.
  15. 24.

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

    = age } about() { log(this.name, this.age);
 } };
  16. 25.

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

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

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

    = age } about() { log(this.name, this.age);
 } };
  18. 28.

    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
  19. 29.

    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
  20. 30.

    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
  21. 31.

    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
  22. 32.

    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
  23. 34.

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

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

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

    }; console.log(jack.hello_world); // 42
  25. 38.
  26. 39.

    var name = 'jack'; var age = 22; log(name +

    ' is ' + age + 'years old'); // this is the worst
  27. 40.

    var name = 'jack'; var age = 22; `${name} is

    ${age} years old` // rejoice
  28. 46.
  29. 47.

    function getPerson() { var name = 'jack'; var age =

    22; return { name, age };
 }; var {name, age} = getPerson();
  30. 49.

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

    return `${this.name} ${this.age}`
 }
 } getInfo();
  31. 53.

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

    }; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
  32. 54.

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

    }; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
  33. 55.
  34. 57.
  35. 59.

    foo = 2; var fad = 2; function() { bar

    = 3; var baz = 4;
 } foo: 2, fad: 2, bar: 3 baz: 4
  36. 60.

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

    baz = 4;
 } foo: 3, baz: 4
  37. 62.

    foo = 2; function() { var baz = 4; if(x)

    { let y = 2;
 }
 } foo: 2 baz: 4 y: 2
  38. 63.

    foo = 2; function() { var baz = 4; if(x)

    { var z = 3; let y = 2;
 }
 } foo: 2 baz: 4, z: 3 y: 2
  39. 65.
  40. 66.

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

    bar}; import {foo} from 'app' console.log(foo); // 2 app.js foo.js
  41. 68.

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

    'app' console.log(foo()); // 2 app.js foo.js
  42. 74.
  43. 82.

    var prom = new Promise( function(resolve, reject) { // do

    stuff if(everythingOK) { resolve('all worked!');
 } else { reject(Error('oh no'));
 }
 } );
  44. 83.

    prom.then(function(resp) { // got here if stuff was OK
 },

    function(err) { // got here if stuff broke
 });
  45. 97.