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

Codelicious: Intro to ES2015

Codelicious: Intro to ES2015

Jack Franklin

July 07, 2016
Tweet

More Decks by Jack Franklin

Other Decks in Technology

Transcript

  1. @Jack_Franklin

    View full-size slide

  2. ES2015: finished!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Arrow Functions

    View full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. '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 full-size slide

  9. Object Literals

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Template Strings

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Destructuring

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. The rest/spread/splat
    operator

    View full-size slide

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

    View full-size slide

  23. Function Arguments

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. each module has its own scope

    View full-size slide

  31. static imports and exports

    View full-size slide

  32. tree shaking

    View full-size slide

  33. 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 full-size slide

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

    View full-size slide

  35. const and let

    View full-size slide

  36. window (global) scope
    function scope

    View full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 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 full-size slide

  41. never var, always let

    View full-size slide

  42. and maybe even const

    View full-size slide

  43. 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 full-size slide

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

    View full-size slide

  45. ES2016
    ** operator
    Array.prototype.includes

    View full-size slide

  46. Thanks!
    @Jack_Franklin

    View full-size slide