Adding ES6 to Your Developer Toolbox

Web developers constantly look for the latest and greatest ways to hone their craft, but changes come fast. From jQuery to Angular to Ember to React, CoffeeScript to TypeScript, it seems there is always something new. But ES6 is something different. With ES6 we are seeing the evolution of core JavaScript. It includes syntactic improvements and great new features never before seen in client-side code. Linters and transpilers for ES6 are readily available and easy to use. There is no need to wait; learn how to leverage the power of “the new JavaScript” in your applications today!

Transcript

1. #devES6 A D D I N G E S 6 T O Y O U R T O O L B O X @ j e f f r e y s t r a u ss
2. “ES6? That's the new JavaScript!
3. “ No!
4. ECMAScript
7. ECMAScript
8. ECMAScript 2015
9. not all-or-nothing experiment es6 is an evolution
10. experiment not all-or-nothing
11. strings
12. template literals
13. var greeting = "Hello, " + user.first + " " + user.last + "!"; var url = "www.mysite.com" + "/foo/" + fooId + "/bar/" + barId; ES5:
14. `backticks`
15. ${expression}
16. var greeting = "Hello, " + user.first + " " + user.last + "!"; var url = "www.mysite.com" + "/foo/" + fooId + "/bar/" + barId; ES5: var greeting = `Hello, ${user.first} ${user.last}!`; var url = `www.mysite.com/foo/${fooId}/bar/${barId}`; ES6:
17. multi-line strings
18. var poem = "so much depends\n" + "upon\n\n" + "a red wheel\n" + "barrow\n\n" + "glazed with rain\n" + "water\n\n" + "beside the white\n" + "chickens"; ES5:
19. var poem = `so much depends upon a red wheel barrow glazed with rain water beside the white ES6:
20. default parameters
21. var drawRect = function(width, height, color) { width = width || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; ES5:
22. var drawRect = function(width, height, color) { width = width || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; drawRect(); // draws orange; returns 1 ES5:
23. var drawRect = function(width, height, color) { width = width || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; drawRect(); // draws orange; returns 1 drawRect(0, 4, 'blue'); // draws blue, but returns 4 ES5:
24. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return width * height; }; ES6:
25. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return width * height; }; drawRect(0, 4, 'blue'); // returns 0 ES6:
26. collections
27. arrays
28. var myStringArray = new Array("blue"); // ["blue"] var myBoolArray = new Array(false); // [false] ES5:
29. var myStringArray = new Array("blue"); // ["blue"] var myBoolArray = new Array(false); // [false] var myIntArray = new Array(2); // [undefined x 2] ES5:
30. var myIntArray = new Array(2); // [undefined x 2] ES5: var fixedIntArray = Array.of(2); // [2] ES6:
31. function getArgsArray() { return Array.prototype.slice.apply(arguments); }; getArgsArray('foo', true, 42); // ['foo', true, 42] ES5:
32. function getArgsArray() { return Array.prototype.slice.apply(arguments); }; getArgsArray('foo', true, 42); // ['foo', true, 42] ES5: function getArgsArray() { return Array.from(arguments); }; getArgsArray('foo', true, 42); // ['foo', true, 42] ES6:
33. iterables
34. `for-of` loop
35. var body = ['head', 'shoulders', 'knees', 'toes']; for (var i = 0; i < body.length; i++) { tap(body[i]); } ES5:
36. var body = ['head', 'shoulders', 'knees', 'toes']; for (var i = 0; i < body.length; i++) { tap(body[i]); } ES5: var body = ['head', 'shoulders', 'knees', 'toes']; for (var part of body) { tap(part); } ES6:
37. var alphabet = 'abcdefg'; for (var letter of alphabet) { sing(letter); } ES6: E
38. [Symbol.iterator]
39. var alphabet = 'az'; var iter = alphabet[Symbol.iterator](); iter.next(); // { done: false, value: 'a' } iter.next(); // { done: false, value: 'z' } ES6: E
40. var alphabet = 'az'; var iter = alphabet[Symbol.iterator](); iter.next(); // { done: false, value: 'a' } iter.next(); // { done: false, value: 'z' } iter.next(); // { done: true, value: undefined } ES6: E
41. destructuring
42. [ ] = fooArray;
43. { } = fooObject;
44. var x, y, z, coords; coords = [29, 22, 37]; x = coords[0]; y = coords[1]; z = coords[2]; ES5:
45. var x, y, z, coords; coords = [29, 22, 37]; x = coords[0]; y = coords[1]; z = coords[2]; ES5: var coords = [29, 22, 37]; var [x, y, z] = coords; ES6:
46. var x, y, z, coords; coords = [29, 22, 37]; x = coords[0]; y = coords[1]; z = coords[2]; ES5: var coords = [29, 22, 37]; var [x, y, z] = coords; var [foo, , bar] = coords; ES6:
47. var user, email, display; user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; email = user.email; display = user.name; ES5:
48. var user, email, display; user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; email = user.email; display = user.name; ES5: var user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; var {email} = user; ES6:
49. var user, email, display; user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; email = user.email; display = user.name; ES5: var user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; var {email} = user; var {name: display} = user; ES6:
50. var point = [10, 2]; var [x, y, z = 0] = point; console.log(z); // 0, not undefined var user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; var {name, phone = '867-5309'} = user; console.log(phone); // '867-5309', not undefined ES6:
51. process return values
52. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return width * height; }; ES6:
53. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return {area: width * height, hex: getHex(color)}; }; ES6:
54. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return {area: width * height, hex: getHex(color)}; }; var {area, hex: rgb} = drawRect(4, 6, 'blue'); console.log(area); // 24 console.log(rgb); // '#0000FF' ES6:
55. named parameters
56. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return {area: width * height, hex: getHex(color)}; }; ES6:
57. var drawRect = function({w=1, h=1, color='orange'} = {}) { /* draw stuff */ return {area: w * h, hex: getHex(color)}; }; ES6:
58. var drawRect = function({w=1, h=1, color='orange'} = {}) { /* draw stuff */ return {area: w * h, hex: getHex(color)}; }; var rect = drawRect({color: 'blue'}) console.log(rect); // {area: 1, hex: '#0000FF'} ES6:
59. { scope }
60. block-scoped vars
61. block-scoped vars
62. function-scoped
63. var foo = function(bar) { if (bar) { var message = 'Hello!'; // declared here alert(message); } return message; // still in scope here }; ES5:
64. iife IMMEDIATELY INVOKED FUNCTION EXPRESSION
65. var foo = function(bar) { if (bar) { (function() { var message = 'Hello!'; // declared here alert(message); })(); } return message; // ReferenceError: message is not defined }; ES5:
66. closure
67. // assume links has an array of DOM elements for (var i = 0; i < links.length; i++) { links[i].onclick = function() { console.log(i); }; } // whoops! all links log the max index! ES5:
68. // assume links has an array of DOM elements for (var i = 0; i < links.length; i++) { links[i].onclick = (function(x) { return function() { console.log(x); // preserved context }; })(i); } // clicking links gives the correct result ES5:
69. hoisting & globals
70. function foo() { x = 10; y = 20; var x, y; var area = x * y; return area; }; ES5:
71. function foo() { x = 10; y = 20; var x, y; var area; area = x * y; return area; }; ES5:
72. function foo() { var x, y; var area; x = 10; y = 20; area = x * y; return area; }; ES5:
73. function foo() { var x, y; // yikes! area may be in the global scope! x = 10; y = 20; area = x * y; return area; }; ES5:
74. let
75. function(bar) { if (bar) { var message = 'Hello!'; // declared here alert(message); } return message; // still in scope here }; ES5:
76. function(bar) { if (bar) { let message = 'Hello!'; // declared here alert(message); } return message; // ReferenceError: message is not defined }; ES6:
77. // assume links has an array of DOM elements for (var i = 0; i < links.length; i++) { links[i].onclick = function() { console.log(i); }; }; // whoops! all links log the max index! ES5:
78. // assume links has an array of DOM elements for (let i = 0; i < links.length; i++) { links[i].onclick = function() { console.log(i); }; }; // all better, with no IIFE or extra closure! ES6:
79. temporal dead zone
80. function foo() { x = 10; // ReferenceError: x is not defined y = 20; let x, y; let area = x * y; return area; }; ES6:
81. arrow functions
82. syntax
83. (args) => { statements }
84. function logSum(x, y) { var sum = x + y; console.log(sum); } ES5:
85. function logSum(x, y) { var sum = x + y; console.log(sum); } ES5: let logSum = (a, b) => { let sum = a + b; console.log(sum); }; ES6:
86. (args) => expression;
87. function sum(x, y) { return x + y; } ES5:
88. function sum(x, y) { return x + y; } ES5: let sum = (x, y) => x + y; ES6:
89. let speak = () => 'Hello!'; let wrappedMethod = (arg) => innerMethod(arg); let announce = (name) => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
90. let speak = () => 'Hello!'; let wrappedMethod = (arg) => innerMethod(arg); let announce = name => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
91. let speak = () => 'Hello!'; let wrappedMethod = (arg) => innerMethod(arg); let announce = (name) => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
92. lexical `this`
93. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; ES5:
94. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; person.greet(); // Now greeting Jeff ES5:
95. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; person.greet(); // Now greeting Jeff ES5:
96. that | self
97. { }.bind(this)
98. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); var that = this; setTimeout(function() { console.log('Hello, ' + that.name + '!'); }, 3000); } }; ES5:
99. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }.bind(this), 3000); } }; ES5:
100. let person = { name: 'Jeff', greet: function() { console.log(`Greeting ${this.name}`); setTimeout(() => { console.log(`Hello, ${this.name}!`); }, 3000); } }; ES6:
101. putting it to use
102. compatibility
104. bit.ly/es6-compat
106. $ npm install --save-dev babel-cli $ npm install --save-dev babel-preset-es2015
107. $ npm install --save-dev babel-cli $ npm install --save-dev babel-preset-es2015 $ echo '{ "presets": ["es2015"] }' > .babelrc $ babel mySource.js -o myTranspiled.js
108. // .babelrc { "presets": ["es2015"] }
109. $ npm install --save-dev babel-cli $ npm install --save-dev babel-preset-es2015 $ echo '{ "presets": ["es2015"] }' > .babelrc $ babel mySource.js -o myTranspiled.js
110. flexibility
111. flexibility
112. babeljs.io/repl
113. W H E R E T O G O F R O M H E R E not all-or-nothing
114. evolution
115. evolve
116. #devES6 jeffrey.s.strauss@gmail.com @ j e f f r e y s t r a u ss