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