ECMAScript 6 – a tour

Transcript

1. 1.

   ECMAScript 6 A tour

2. 2.

   The ‘let’ statement

3. 3.

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

   { var myvar = 'local'; } console.log(myvar); }
4. 4.

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

   { var myvar = 'local'; } console.log(myvar); } > undefined > local
5. 5.

   Hoisting

6. 6.

   function infiltrate() { // do something // ... var bulletCount

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

   function infiltrate() { var bulletCount; var handler; // do something

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

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

9. 9.

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

   > undefined > 42
10. 10.

    'use strict'; function f() { console.log(bulletCount); let bulletCount = 42;

    console.log(bulletCount); } > ReferenceError: can't access lexical declaration `bulletCount’ before initialization
11. 11.

    Function Scope

12. 12.

    function getAnswer() { if (true) { var theAnswer = 42;

    } console.log(theAnswer); }
13. 13.

    function getAnswer() { if (true) { var theAnswer = 42;

    } console.log(theAnswer); } > 42
14. 14.

    'use strict'; function getAnswer() { if (true) { let theAnswer

    = 42; } console.log(theAnswer); } > ReferenceError: theAnswer is not defined
15. 15.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = 'local'; } console.log(myvar); }
16. 16.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = 'local'; } console.log(myvar); } > global > global
17. 17.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = ‘local'; console.log(myvar); } }
18. 18.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = ‘local'; console.log(myvar); } } > global > local
19. 19.

    Protip #1 Use ‘let’ for mutable references

20. 20.

    The ‘const’ statement

21. 21.

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

22. 22.

    'use strict'; const theAnswer = 42; theAnswer = 87; >

    Exception: SyntaxError: invalid assignment to const foo
23. 23.

    'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents['Figgis'] = 'Cyril';
24. 24.

    'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents = { 'Figgis': 'Cyril' };
25. 25.

    'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents = { 'Figgis': 'Cyril' }; > Exception: SyntaxError: invalid assignment to const agents
26. 26.

    Protip #2 Use ‘const’ for immutable references

27. 27.

    Protip #3 Replace all usages of ‘var’ with either ‘let’

    or ‘const’ depending on context
28. 28.

    The array spread operator

29. 29.

    var theNumbers = [4, 8, 15]; function addThree(a, b, c)

    { return a + b + c; }
30. 30.

    var theNumbers = [4, 8, 15]; function addThree(a, b, c)

    { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers);
31. 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);
32. 32.

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

33. 33.

    var foo = [15, 16]; var theNumbers = [4, 8,

    ...foo, 23, 42]; console.log(theNumbers);
34. 34.

    > Array [ 4, 8, 15, 16, 23, 42 ]

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

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

36. 36.

    var theNumbers = [4, 8, 15, 16, 23, 42]; var

    theNumbersCopy = [...theNumbers]; Protip #5 Use the array spread operator to copy arrays
37. 37.

    Template Strings

38. 38.

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

    ${thing}`); > 3 little piggies
39. 39.

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

40. 40.

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

    Kreiger!
41. 41.

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

42. 42.

    for…of loops

43. 43.

    var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i in theNumbers) { total += i; }
44. 44.

    var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i in theNumbers) { total += i; } > “0012345”
45. 45.

    Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares

    code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); }
46. 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
47. 47.

    var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i of theNumbers) { total += i; }
48. 48.

    var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i of theNumbers) { total += i; } > 108
49. 49.

    Arrow Functions

50. 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);
51. 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; };
52. 52.

    function Person() { this.age = 0; setInterval(function growUp() { this.age++;

    }, 1000); } var p = new Person();
53. 53.

    function Person() { var self = this; self.age = 0;

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

    function Person() { this.age = 0; setInterval(() => { this.age++;

    }, 1000); } var p = new Person();
55. 55.

    Computed Object Properties

56. 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 }
57. 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 }
58. 58.

    Property Value Shorthand in Object Literals

59. 59.

    var agentName = 'Sterling Archer'; var obj = { agentName:

    agentName }; { agentName: 'Sterling Archer' }
60. 60.

    const agentName = 'Sterling Archer'; const obj = { agentName

    }; { agentName: 'Sterling Archer' }
61. 61.

    Method Shorthand in Object Literals

62. 62.

    var atom = { value: 1, addValue: function (value) {

    return atom.value + value; } };
63. 63.

    const atom = { value: 1, addValue(value) { return atom.value

    + value; } };
64. 64.

    Rest Parameters

65. 65.

    function handleEvent(event) { var args = Array.slice.call(null, arguments, 1); args.forEach(function(arg)

    { // do something }); }; handleEvent('click', arg1, arg2, arg3);
66. 66.

    function handleEvent(event, ...args) { args.forEach(function(arg) { // do something });

    }; handleEvent('click', arg1, arg2, arg3);
67. 67.

    Default Parameters

68. 68.

    function frobulate(arg1, arg2) { arg1 = arg1 || 23; arg2

    = arg2 || 42; } frobulate(); frobulate(10); frobulate(10, 20);
69. 69.

    function frobulate(arg1, arg2) { if (typeof arg1 === 'undefined') {

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

    function frobulate(arg1 = 23, arg2 = 42) { // do

    something } frobulate(); frobulate(10); frobulate(10, 20);
71. 71.

    function frobulate(arg1, arg2 = 42) { // do something }

    frobulate(); frobulate(10); frobulate(10, 20);
72. 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
73. 73.

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

74. 74.

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

75. 75.

    Use it Now Compile down to ECMAScript 5 with Babel

    http://babeljs.io
76. 76.

    contact@ankursethi.in