Codelicious: Intro to ES2015

Transcript

1. View Slide

2. @Jack_Franklin
   

   View Slide

3. @pusher
   

   View Slide

4. ES2015: finished!
   

   View Slide

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

   View Slide

6. It’s happening!
   • Edge 14: 90%
   • Chrome 52 / Opera 39: 98%
   • FF 49: 93%
   • Safari 10: 100%
   • Node 6: 93%
   

   View Slide

7. Arrow Functions
   

   View Slide

8. 1 [1, 2, 3].map(function(numbers) {
   2 return numbers * 2;
   3 });
   4
   5 [1, 2, 3].map(numbers => numbers * 2);
   

   View Slide

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 }
   

   View Slide

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 }
    

    View Slide

11. Object Literals
    

    View Slide

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

    View Slide

13. 1 var newKey = 'foo';
    2 var newObj = {};
    3 newObj[newKey] = true;
    4
    5 var otherNewObj = {
    6 [newKey]: true
    7 };
    

    View Slide

14. Template Strings
    

    View Slide

15. 1 var str = '2 + 2 is: ' + (2 + 2);
    2
    3 var otherStr = `2 + 2 is: ${2 + 2}`;
    

    View Slide

16. 1 var str = `they can
    2 span multiple
    3
    4 lines and stuff
    5 `;
    

    View Slide

17. Destructuring
    

    View Slide

18. 1 var array = [1, 2, 3];
    2
    3 var [first, ...rest] = array;
    4
    5 first // 1
    6 rest // [2, 3]
    

    View Slide

19. 1 var person = {
    2 name: 'Jack',
    3 age: 24
    4 };
    5
    6 var { name, age } = person;
    7
    8 name // 'Jack'
    9 age // 24
    

    View Slide

20. 1 var getTweetInfo = function() {...};
    2
    3 var { text, user } = getTweetInfo();
    

    View Slide

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

    View Slide

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
    

    View Slide

23. The rest/spread/splat
    operator
    

    View Slide

24. 1 var numbers = [1, 2, 3]
    2 var moreNumbers = [...numbers, 4, 5];
    3 // moreNumbers [1, 2, 3, 4, 5]
    

    View Slide

25. Function Arguments
    

    View Slide

26. 1 function foo(x = 1) {
    2 return x;
    3 }
    4
    5 foo() // 1
    6 foo(2) // 2
    

    View Slide

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);
    

    View Slide

28. 1 function foo(obj) {
    2 return obj.x + obj.y;
    3 };
    4
    5 function foo({ x, y }) {
    6 return x + y;
    7 }
    

    View Slide

29. Classes
    

    View Slide

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();
    

    View Slide

31. Modules
    

    View Slide

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

    View Slide

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
    

    View Slide

34. each module has its own scope
    

    View Slide

35. static imports and exports
    

    View Slide

36. tree shaking
    

    View Slide

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';
    

    View Slide

38. 1 // final bundle
    2 function filter() {...};
    3 ...your app code...
    

    View Slide

39. const and let
    

    View Slide

40. scope
    

    View Slide

41. window (global) scope
    function scope
    

    View Slide

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 }
    

    View Slide

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

    View Slide

44. window (global) scope
    function scope
    block scope
    let
    const
    

    View Slide

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 }
    

    View Slide

46. never var, always let
    

    View Slide

47. and maybe even const
    

    View Slide

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
    

    View Slide

49. so much more!
    sets, maps, proxies,
    symbols, generators, new
    object APIs
    

    View Slide

50. Never again
    

    View Slide

51. ES2016
    ** operator
    Array.prototype.includes
    

    View Slide

52. Thanks!
    @Jack_Franklin
    

    View Slide