ECMAScript 6 – a tour

A short tour of some of the new features in ECMAScript 6. Presented at BangaloreJS.

Transcript

1. ECMAScript 6
   A tour
   

   View Slide

2. The ‘let’ statement
   

   View Slide

3. var myvar = 'global';
   function f() {
   console.log(myvar);
   if (true) {
   var myvar = 'local';
   }
   console.log(myvar);
   }
   

   View Slide

4. var myvar = 'global';
   function f() {
   console.log(myvar);
   if (true) {
   var myvar = 'local';
   }
   console.log(myvar);
   }
   > undefined
   > local
   

   View Slide

5. Hoisting
   

   View Slide

6. function infiltrate() {
   // do something
   // ...
   var bulletCount = 10;
   // do something else
   // ...
   var handler = function() {
   // handle difficult things
   };
   }
   

   View Slide

7. function infiltrate() {
   var bulletCount;
   var handler;
   // do something
   // ...
   bulletCount = 10;
   // do something else
   // ...
   handler = function() {
   // handle difficult things
   };
   }
   

   View Slide

8. function f() {
   console.log(bulletCount);
   var bulletCount = 42;
   console.log(bulletCount);
   }
   

   View Slide

9. function f() {
   console.log(bulletCount);
   var bulletCount = 42;
   console.log(bulletCount);
   }
   > undefined
   > 42
   

   View Slide

10. 'use strict';
    function f() {
    console.log(bulletCount);
    let bulletCount = 42;
    console.log(bulletCount);
    }
    > ReferenceError: can't access
    lexical declaration `bulletCount’
    before initialization
    

    View Slide

11. Function Scope
    

    View Slide

12. function getAnswer() {
    if (true) {
    var theAnswer = 42;
    }
    console.log(theAnswer);
    }
    

    View Slide

13. function getAnswer() {
    if (true) {
    var theAnswer = 42;
    }
    console.log(theAnswer);
    }
    > 42
    

    View Slide

14. 'use strict';
    function getAnswer() {
    if (true) {
    let theAnswer = 42;
    }
    console.log(theAnswer);
    }
    > ReferenceError: theAnswer is
    not defined
    

    View Slide

15. ‘use strict’;
    let myvar = 'global';
    function f() {
    console.log(myvar);
    if (true) {
    let myvar = 'local';
    }
    console.log(myvar);
    }
    

    View Slide

16. ‘use strict’;
    let myvar = 'global';
    function f() {
    console.log(myvar);
    if (true) {
    let myvar = 'local';
    }
    console.log(myvar);
    }
    > global
    > global
    

    View Slide

17. ‘use strict’;
    let myvar = 'global';
    function f() {
    console.log(myvar);
    if (true) {
    let myvar = ‘local';
    console.log(myvar);
    }
    }
    

    View Slide

18. ‘use strict’;
    let myvar = 'global';
    function f() {
    console.log(myvar);
    if (true) {
    let myvar = ‘local';
    console.log(myvar);
    }
    }
    > global
    > local
    

    View Slide

19. Protip #1
    Use ‘let’ for mutable references
    

    View Slide

20. The ‘const’ statement
    

    View Slide

21. 'use strict';
    const theAnswer = 42;
    theAnswer = 87;
    

    View Slide

22. 'use strict';
    const theAnswer = 42;
    theAnswer = 87;
    > Exception: SyntaxError: invalid
    assignment to const foo
    

    View Slide

23. 'use strict';
    const agents = {
    'Archer': 'Sterling',
    'Kane': 'Lana'
    };
    agents['Figgis'] = 'Cyril';
    

    View Slide

24. 'use strict';
    const agents = {
    'Archer': 'Sterling',
    'Kane': 'Lana'
    };
    agents = { 'Figgis': 'Cyril' };
    

    View Slide

25. 'use strict';
    const agents = {
    'Archer': 'Sterling',
    'Kane': 'Lana'
    };
    agents = { 'Figgis': 'Cyril' };
    > Exception: SyntaxError: invalid
    assignment to const agents
    

    View Slide

26. Protip #2
    Use ‘const’ for immutable references
    

    View Slide

27. Protip #3
    Replace all usages of ‘var’ with either ‘let’ or ‘const’
    depending on context
    

    View Slide

28. The array spread
    operator
    

    View Slide

29. var theNumbers = [4, 8, 15];
    function addThree(a, b, c) {
    return a + b + c;
    }
    

    View Slide

30. var theNumbers = [4, 8, 15];
    function addThree(a, b, c) {
    return a + b + c;
    }
    // ECMAScript 5
    addThree.apply(null, theNumbers);
    

    View Slide

31. var theNumbers = [4, 8, 15];
    function addThree(a, b, c) {
    return a + b + c;
    }
    // ECMAScript 5
    addThree.apply(null, theNumbers);
    // ECMAScript 6
    addThree(...theNumbers);
    

    View Slide

32. addThree(...theNumbers);
    addThree(4, 8, 15);
    

    View Slide

33. var foo = [15, 16];
    var theNumbers = [4, 8, ...foo, 23, 42];
    console.log(theNumbers);
    

    View Slide

34. > Array [ 4, 8, 15, 16, 23, 42 ]
    var foo = [15, 16];
    var theNumbers = [4, 8, ...foo, 23, 42];
    console.log(theNumbers);
    

    View Slide

35. Protip #4
    Replace Function.apply with the array spread operator
    

    View Slide

36. var theNumbers = [4, 8, 15, 16, 23, 42];
    var theNumbersCopy = [...theNumbers];
    Protip #5
    Use the array spread operator to copy arrays
    

    View Slide

37. Template Strings
    

    View Slide

38. let thing = 'piggies';
    let quantity = 3;
    console.log(`${quantity} little ${thing}`);
    > 3 little piggies
    

    View Slide

39. function sayHello(name) {
    return `Hello, ${name}!`;
    }
    console.log(sayHello('Kreiger'));
    

    View Slide

40. function sayHello(name) {
    return `Hello, ${name}!`;
    }
    console.log(sayHello('Kreiger'));
    > Hello, Kreiger!
    

    View Slide

41. let multiline = `This
    is
    a
    multiline
    string!`;
    

    View Slide

42. for…of loops
    

    View Slide

43. var theNumbers = [4, 8, 15, 16, 23, 42];
    var total = 0;
    for (var i in theNumbers) {
    total += i;
    }
    

    View Slide

44. var theNumbers = [4, 8, 15, 16, 23, 42];
    var total = 0;
    for (var i in theNumbers) {
    total += i;
    }
    > “0012345”
    

    View Slide

45. Array.prototype.sumOfSquares = function() {
    // Blazing fast sum of squares code.
    };
    var theNumbers = [4, 8, 15];
    for (var i in theNumbers) {
    console.log(i);
    }
    

    View Slide

46. Array.prototype.sumOfSquares = function() {
    // Blazing fast sum of squares code.
    };
    var theNumbers = [4, 8, 15];
    for (var i in theNumbers) {
    console.log(i);
    }
    > 0
    > 1
    > 2
    > sumOfSquares
    

    View Slide

47. var theNumbers = [4, 8, 15, 16, 23, 42];
    var total = 0;
    for (var i of theNumbers) {
    total += i;
    }
    

    View Slide

48. var theNumbers = [4, 8, 15, 16, 23, 42];
    var total = 0;
    for (var i of theNumbers) {
    total += i;
    }
    > 108
    

    View Slide

49. Arrow Functions
    

    View Slide

50. var nums = [4, 8, 15, 16, 23, 42];
    // ECMAScript 5
    var squares = nums.map(function(n) {
    return n * n;
    });
    // ECMAScript 6
    let squares = nums.map((n) => n * n);
    

    View Slide

51. const squareNumber = n => n * n;
    const squareNumber = (n) => n * n;
    const addNumbers = a, b => a + b; // Error!
    const addNumbers = (a, b) => a + b;
    const addNumbers = (a, b) => {
    return a + b;
    };
    

    View Slide

52. function Person() {
    this.age = 0;
    setInterval(function growUp() {
    this.age++;
    }, 1000);
    }
    var p = new Person();
    

    View Slide

53. function Person() {
    var self = this;
    self.age = 0;
    setInterval(function growUp() {
    self.age++;
    }, 1000);
    }
    var p = new Person();
    

    View Slide

54. function Person() {
    this.age = 0;
    setInterval(() => {
    this.age++;
    }, 1000);
    }
    var p = new Person();
    

    View Slide

55. Computed Object
    Properties
    

    View Slide

56. var p1 = new Person('Sterling', 'Archer');
    var p2 = new Person('Lana', 'Kane');
    var ages = {};
    ages[p1.firstName + ' ' + p1.lastName] = 37;
    ages[p1.firstName + ' ' + p1.lastName] = 33;
    {
    'Sterling Archer': 37,
    'Lana Kane': 33
    }
    

    View Slide

57. let p1 = new Person('Sterling', 'Archer');
    let p2 = new Person('Lana', 'Kane');
    let ages = {
    [p1.firstName + ' ' + p1.lastName]: 37,
    [p2.firstName + ' ' + p2.lastName]: 33
    };
    {
    'Sterling Archer': 37,
    'Lana Kane': 33
    }
    

    View Slide

58. Property Value Shorthand
    in Object Literals
    

    View Slide

59. var agentName = 'Sterling Archer';
    var obj = {
    agentName: agentName
    };
    {
    agentName: 'Sterling Archer'
    }
    

    View Slide

60. const agentName = 'Sterling Archer';
    const obj = {
    agentName
    };
    {
    agentName: 'Sterling Archer'
    }
    

    View Slide

61. Method Shorthand in
    Object Literals
    

    View Slide

62. var atom = {
    value: 1,
    addValue: function (value) {
    return atom.value + value;
    }
    };
    

    View Slide

63. const atom = {
    value: 1,
    addValue(value) {
    return atom.value + value;
    }
    };
    

    View Slide

64. Rest Parameters
    

    View Slide

65. function handleEvent(event) {
    var args =
    Array.slice.call(null, arguments, 1);
    args.forEach(function(arg) {
    // do something
    });
    };
    handleEvent('click', arg1, arg2, arg3);
    

    View Slide

66. function handleEvent(event, ...args) {
    args.forEach(function(arg) {
    // do something
    });
    };
    handleEvent('click', arg1, arg2, arg3);
    

    View Slide

67. Default Parameters
    

    View Slide

68. function frobulate(arg1, arg2) {
    arg1 = arg1 || 23;
    arg2 = arg2 || 42;
    }
    frobulate();
    frobulate(10);
    frobulate(10, 20);
    

    View Slide

69. function frobulate(arg1, arg2) {
    if (typeof arg1 === 'undefined') {
    arg1 = 23;
    }
    if (typeof arg2 === 'undefined') {
    arg2 = 42;
    }
    }
    frobulate();
    frobulate(10);
    frobulate(10, 20);
    

    View Slide

70. function frobulate(arg1 = 23, arg2 = 42) {
    // do something
    }
    frobulate();
    frobulate(10);
    frobulate(10, 20);
    

    View Slide

71. function frobulate(arg1, arg2 = 42) {
    // do something
    }
    frobulate();
    frobulate(10);
    frobulate(10, 20);
    

    View Slide

72. More!
    • Classes
    • Destructuring
    • Generators
    • New data structures (Map, WeakMap, Set, WeakSet)
    • Promises
    • Symbols
    • New methods on Object, String, Array, Math, Number
    • Better Unicode support
    • Modules
    

    View Slide

73. Use it Now
    Use shipping features in modern browsers
    https://kangax.github.io/compat-table/es6/
    

    View Slide

74. Use it Now
    Use io.js
    https://iojs.org
    

    View Slide

75. Use it Now
    Compile down to ECMAScript 5 with Babel
    http://babeljs.io
    

    View Slide

76. contact@ankursethi.in
    

    View Slide