Codelicious: Intro to ES2015

Codelicious: Intro to ES2015

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

July 07, 2016
Tweet

Transcript

  1. None
  2. @Jack_Franklin

  3. @pusher

  4. ES2015: finished!

  5. https://kangax.github.io/compat-table/es6/

  6. It’s happening! • Edge 14: 90% • Chrome 52 /

    Opera 39: 98% • FF 49: 93% • Safari 10: 100% • Node 6: 93%
  7. Arrow Functions

  8. 1 [1, 2, 3].map(function(numbers) { 2 return numbers * 2;

    3 }); 4 5 [1, 2, 3].map(numbers => numbers * 2);
  9. undefined 'Tom' undefined 'Zoe' 1 var person = { 2

    name: 'Jack', 3 friends: ['Tom', 'Zoe'], 4 logFriends: function() { 5 this.friends.forEach(function(f) { 6 console.log(this.name, f); 7 }); 8 } 9 }
  10. 'Jack' 'Tom' 'Jack' 'Zoe' 1 var person = { 2

    name: 'Jack', 3 friends: ['Tom', 'Zoe'], 4 logFriends: function() { 5 this.friends.forEach(f => { 6 console.log(this.name, f); 7 }); 8 } 9 }
  11. Object Literals

  12. 1 var literal = { 2 foo: function() {...}, 3

    bar() {...} 4 }
  13. 1 var newKey = 'foo'; 2 var newObj = {};

    3 newObj[newKey] = true; 4 5 var otherNewObj = { 6 [newKey]: true 7 };
  14. Template Strings

  15. 1 var str = '2 + 2 is: ' +

    (2 + 2); 2 3 var otherStr = `2 + 2 is: ${2 + 2}`;
  16. 1 var str = `they can 2 span multiple 3

    4 lines and stuff 5 `;
  17. Destructuring

  18. 1 var array = [1, 2, 3]; 2 3 var

    [first, ...rest] = array; 4 5 first // 1 6 rest // [2, 3]
  19. 1 var person = { 2 name: 'Jack', 3 age:

    24 4 }; 5 6 var { name, age } = person; 7 8 name // 'Jack' 9 age // 24
  20. 1 var getTweetInfo = function() {...}; 2 3 var {

    text, user } = getTweetInfo();
  21. 1 var person = { 2 name: { 3 first:

    'Jack', 4 last: 'Franklin' 5 } 6 }; 7 8 var { name: { first } } = person; 9 10 first // 'Jack';
  22. 1 var person = { 2 name: { 3 first:

    'Jack', 4 last: 'Franklin' 5 } 6 }; 7 8 var { name: { first: foo } } = person; 9 10 foo // 'Jack' 11 first // ReferenceError
  23. The rest/spread/splat operator

  24. 1 var numbers = [1, 2, 3] 2 var moreNumbers

    = [...numbers, 4, 5]; 3 // moreNumbers [1, 2, 3, 4, 5]
  25. Function Arguments

  26. 1 function foo(x = 1) { 2 return x; 3

    } 4 5 foo() // 1 6 foo(2) // 2
  27. 1 function foo(...args) { 2 log('got args', args); 3 }

    4 5 function bar() {...}; 6 7 var args = [1, 2, 3]; 8 bar.apply(this, args); 9 bar(...args);
  28. 1 function foo(obj) { 2 return obj.x + obj.y; 3

    }; 4 5 function foo({ x, y }) { 6 return x + y; 7 }
  29. Classes

  30. 1 class Person { 2 constructor(name) { 3 this.name =

    name; 4 } 5 6 fullName() { 7 return `Name is ${this.name}`; 8 } 9 } 10 11 var jack = new Person('Jack'); 12 jack.fullName();
  31. Modules

  32. 1 // foo.js 2 export default function() { 3 return

    2; 4 } 5 6 //main.js 7 import foo from './foo'; 8 foo(); // 2
  33. 1 // foo.js 2 function foo() { 3 return 2;

    4 } 5 6 export { foo }; 7 8 // main.js 9 import { foo } from './foo'; 10 foo(); // 2
  34. each module has its own scope

  35. static imports and exports

  36. tree shaking

  37. 1 // some 3rd party library 2 export function merge()

    {...}; 3 export function filter() {...}; 4 export function map() {...}; 5 6 // your app 7 8 import { filter } from 'third-party';
  38. 1 // final bundle 2 function filter() {...}; 3 ...your

    app code...
  39. const and let

  40. scope

  41. window (global) scope function scope

  42. foo = 2 bar = 3 x = fn baz

    = 4 1 var foo = 2; 2 3 function x() { 4 bar = 3; 5 var baz = 4; 6 }
  43. x foo = 1 bar = 2 1 function x()

    { 2 var bar = 2; 3 if (...) { 4 var foo = 1; 5 } 6 }
  44. window (global) scope function scope block scope let const

  45. x bar = 2 foo = 1 baz = 3

    1 function x() { 2 var bar = 2; 3 if (...) { 4 let foo = 1; 5 const baz = 3; 6 } 7 }
  46. never var, always let

  47. and maybe even const

  48. 1 const x = 2; 2 x = 3; //

    NOPE! 3 4 const y = { a: 1 }; 5 y = { b: 1 }; // NOPE! 6 7 y.a = 2; //...yeah 8 delete y.a; //...yeah 9 y.b = 3; //...yeah
  49. so much more! sets, maps, proxies, symbols, generators, new object

    APIs
  50. Never again

  51. ES2016 ** operator Array.prototype.includes

  52. Thanks! @Jack_Franklin