ECMAScript 6 – a tour

Transcript

1. ECMAScript 6 A tour

2. The ‘let’ statement

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

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

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

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

5. Hoisting

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

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

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

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

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

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

   > undefined > 42

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

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

11. Function Scope

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

    } console.log(theAnswer); }

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

    } console.log(theAnswer); } > 42

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

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

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

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

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

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

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

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

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

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

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

20. The ‘const’ statement

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

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

    Exception: SyntaxError: invalid assignment to const foo

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

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

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

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

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

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

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

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

    or ‘const’ depending on context

28. The array spread operator

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

    { return a + b + c; }

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

    { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers);

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. addThree(...theNumbers); addThree(4, 8, 15);

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

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

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

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

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

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

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

37. Template Strings

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

    ${thing}`); > 3 little piggies

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

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

    Kreiger!

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

42. for…of loops

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

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

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

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

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. 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. var theNumbers = [4, 8, 15, 16, 23, 42]; var

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

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

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

49. Arrow Functions

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. 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. function Person() { this.age = 0; setInterval(function growUp() { this.age++;

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

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

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

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

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

55. Computed Object Properties

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. 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. Property Value Shorthand in Object Literals

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

    agentName }; { agentName: 'Sterling Archer' }

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

    }; { agentName: 'Sterling Archer' }

61. Method Shorthand in Object Literals

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

    return atom.value + value; } };

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

    + value; } };

64. Rest Parameters

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

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

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

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

67. Default Parameters

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

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

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

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

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

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

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

    frobulate(); frobulate(10); frobulate(10, 20);

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. Use it Now Use shipping features in modern browsers https://kangax.github.io/compat-table/es6/

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

75. Use it Now Compile down to ECMAScript 5 with Babel

    http://babeljs.io

76. contact@ankursethi.in