ES6 — Obviously.

In this talk, we will dive deep into some of the (not so obvious) parts of JavaScript’s current standard — including asynchronous flows, collections, modularity, abstractions — and how to best leverage their capabilities. 👀🔥

Transcript

1. ES6 Obviously.
2. About me.
3. About me. —Miloš Sutanovac —Developer, Lecturer, Speaker —Past: ASTRAL → astral.de —Now: norapay.com, Teaching, Consulting, Speaking —Modern Web, Languages, Curiosity —@mixn
4. Obviously?
5. Technologies on the web are a bubble.
6. Like real estate.
7. Real estate.
8. Real estate. —Land boom —Market price of real property increases —Until unsustainable —Declines in a bubble —Happens every x years
9. Technologies on the web are a bubble.
10. Technologies on the web are a bubble.
11. Front–End technologies are a bubble.
13. Not just JavaScript.
14. But mostly.
15. That framework life ™
16. That progress life ™
17. That evolution life ™
18. That good life ™
22. Obviously.
23. Meta.
24. Meta. —No versioning —Always backwards–compatible —Yearly updates —Improve interoperation —The things we are familiar with
25. Obviously. %
26. Obviously. % —Fix JavaScript’s existing mistakes (ideally) —Keep JavaScript light —Improve ways for well–established patterns —Introduce new concepts
27. Not everything.
28. The “not so obvious” parts.
30. Numbers.
31. Numbers. —Binary and octal literals
32. 0b100; // 4 0o10; // 8
33. Numbers. —Binary and octal literals —Number.isFinite()
34. Number.isFinite(-Infinity); // false Number.isFinite(NaN); // false Number.isFinite(11234912348); // true
35. Numbers. —Binary and octal literals —Number.isFinite() —Number.isNaN()
36. isNaN(NaN); // true Number.isNaN(NaN); // true isNaN('foo'); // true Number.isNaN('foo'); // false
37. Numbers. —Binary and octal literals —Number.isFinite() —Number.isNaN() —Math.trunc()
38. Math.trunc(3.891); // 3 Math.trunc(13.37); // 13
39. Strings.
40. Strings. —String.prototype.startsWith() —String.prototype.endsWith() —String.prototype.includes() —String.prototype.repeat()
41. Array(5 + 1).join('#'); // No more '#'.repeat(5); // '#####'
43. const maskify = toMask => { const l = toMask.length; return '*'.repeat(l > 4 ? l - 4 : 0) + toMask.slice(-4); }; maskify('5490122213335467'); // '************5467' maskify('0897933189'); // '******3189' maskify('1234'); // '1234'
44. Strings. —Template Literals —String Literal —Interpolation —Multiline
45. const x = 23971431; console.log(`The square root of ${x} is ${Math.sqrt(x)}`); // 'The square root of 23971431 // is 4896.062805969711'
46. Strings. —Template Literals —String Literal —Interpolation —Multiline —Tagged Template Literals —Function Literal —Allows to modify the output of a template
47. function doubler (template, expression) { return template.reduce((before, after, i) => { return before + expression + after + expression * 2; }); } doubler`Double of ${2} is `; // 'Double of 2 is 4' doubler`Das Doppelte von ${2} ist `; // 'Das Doppelte von 2 ist 4'
48. Variables.
49. Variables. —When value never changes use const —For everything else use let —Avoid var
50. Variables. —const is immutable —The value of const is mutable
51. const foo = {}; foo.bar = 'bar'; console.log(foo.bar); // 'bar'
52. Variables. —const is immutable —The value of const is mutable —Object.freeze()
53. const foo = Object.freeze({}); foo.bar = 'bar'; // TypeError
54. Variables. —const is immutable —The value of const is mutable —Object.freeze() —Temporal Dead Zone
55. if (…) { console.log(x); // TDZ, ReferenceError // TDZ // TDZ // TDZ // TDZ let x = 5; }
56. Variables. —const is immutable —The value of const is mutable —Object.freeze() —Temporal Dead Zone —Single binding per iteration
57. const arr = []; for ( var i = 0; i < 3; i++ ) { arr.push(() => i); } arr.map(x => x()); // [3, 3, 3]
58. const arr = []; for ( let i = 0; i < 3; i++ ) { arr.push(() => i); } arr.map(x => x()); // [0, 1, 2]
59. Destructuring. ⚒
60. Destructuring. ⚒ —Construct data ✅ —const person = { first: 'Jane', last: 'Doe' }; —Extract data ✅ —const firstName = person.first; —Destructure data ❌ —Same syntax for extracting, as for constructing
61. Destructuring. ⚒ —Array destructuring —Everything that is iterable
62. const fruit = ['banana', 'cherry'] const [yellow, red] = fruit;
63. let a = 5, b = 10; [b, a] = [a, b];
65. const [firstLetter,,,,lastLetter] = 'Harry';
66. const person = new Map([ ['firstName', 'John'], ['lastName', 'Doe'] ]); const [[,firstName], [,lastName]] = person;
67. const nums = new Set([1, 2, 3, 4, 5]); const [one, , three] = nums;
68. const [full, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec('2062-12-28');
69. Destructuring. ⚒ —Array destructuring —Everything that is iterable —Order matters
70. const [, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec('2062-12-28');
72. Destructuring. ⚒ —Object destructuring —Explicit
73. const car = { color: 'red', brand: 'BMW', kmh: 280 }; const { brand } = car;
74. Destructuring. ⚒ —Object destructuring —Explicit —Works well with primitive types
75. const { slice } = 'foo'; console.log(slice); // String.prototype.slice console.log(slice.apply('Hello, you!', [0, 5])); // 'Hello'
77. Destructuring. ⚒ —Defaults ✅
78. const car = { color: 'red', }; const { brand = 'BMW' } = car;
79. Destructuring. ⚒ —Defaults ✅ —Multiple ✅
80. const [{ prop: x = 'Hello' } = { prop: 123 }] = [{}]; console.log(x); // 'Hello'
81. Destructuring. ⚒ —Defaults ✅ —Multiple ✅ —Computed property keys ✅
82. const person = 'John'; const { [person]: j } = { John: { hairColor: 'brown', eyeColor: 'green', height: 180 } }; console.log(j.eyeColor); // 'green'
83. Destructuring. ⚒ —Defaults ✅ —Multiple ✅ —Computed property keys ✅ —Nested destructuring ✅ — Arbitrarily deeply ✅
84. const obj = { one: [ { foo: 123, bar: 456 } ], two: true }; const { one: [{foo: f}] } = obj; console.log(f); // 123
85. Destructuring. ⚒ —Defaults ✅ —Multiple ✅ —Computed property keys ✅ —Nested destructuring ✅ — Arbitrarily deeply ✅ —rest–Operator (…) ✅
86. const [mango, strawberry, ...otherColors] = [ 'green', 'red', 'purple', 'blue', 'yellow' ]; console.log(otherColors); // ['purple', 'blue', 'yellow']
88. let person = {}, favHobby; [favHobby, ...person.hobbies] = [ 'Basketball', 'Football', 'Skateboarding' ]; console.log(person); // { hobbies: ['Football', 'Skateboarding'] }
89. Destructuring. ⚒ —Defaults ✅ —Multiple ✅ —Computed property keys ✅ —Nested destructuring ✅ — Arbitrarily deeply ✅ —rest–Operator (…) ✅ —Wherever data is assigned ✅
90. const eatFruit = ({ fruit = 'Air', taste = 'neutral' } = {}) => `${fruit} tastes ${taste}`; eatFruit({ fruit: 'Mango', taste: 'sweet' }); // 'Mango tastes sweet' eatFruit({ fruit: 'Lemon' }); // 'Lemon tastes neutral' eatFruit(); // 'Air tastes neutral'
91. Objects.
92. Objects. —Method definitions
93. const person = { speak () { }, run () { } };
94. Objects. —Method definitions —Computed property keys
95. const verb = 'speak'; const person = { [verb] () { return 'Speaking'; }, run () { } }; person.speak(); // 'Speaking'
96. Objects. —Method definitions —Computed property keys —Object.assign()
97. class Person { constructor ({ name, age, height }) { Object.assign(this, { name: name, age: age, height: height }); } } const john = new Person({ name: 'John', age: 32, height: 178 });
98. Objects. —Method definitions —Computed property keys —Object.assign() —Property value shorthands
99. class Person { constructor ({ name, age, height }) { Object.assign(this, { name: name, age: age, height: height }); } } const john = new Person({ name: 'John', age: 32, height: 178 });
100. class Person { constructor ({ name, age, height }) { Object.assign(this, { name, age, height }); } } const john = new Person({ name: 'John', age: 32, height: 178 });
101. Objects. —Method definitions —Computed property keys —Object.assign() —Property value shorthands —Object.is() —Reflect
102. Modules.
103. They just work.
104. Please everyone.
105. Modules. —Best of all worlds —Compact —Single or multiple exports —Circular dependencies —Configurable Loader API —Synchronous or asynchronous —Static structure
106. // calc.js export function add (x, y) { return x + y; } export function sub (x, y) { return x - y; } // main.js import { add, sub } from 'calc'; add(5, 5); // 10 sub(100-50)); // 50 // Optional import * as calc from 'calc'; calc.add(5, 5); // 10 calc.sub(100-50)); // 50
107. Modules. —Import styles
108. // Default import foo from 'src/lib'; // Namespace import * as foo from 'src/lib'; // Named import { foo, bar as bizz } from 'src/lib'; // Empty import 'src/lib';
109. Modules. —Import styles —Export styles —Exported values can be anonymous
110. // Default export default class {} // Named function* genFunc () {} class FooClass {} export { genFunc, FooClass as Foo }; // Re–Export // module2.js export { fizz as fizzy } from './module1';
111. Modules. —Import styles —Export styles —Exported values can be anonymous —Are hoisted —foo(); import { foo } from 'foo'; // ✔ —Should still be on top
112. Generators.
113. Generators. —Pausable functions —Exited/Re–entered
114. function* lyrics () { console.log('Hello…'); yield; console.log('Is it me, you’re looking for?'); yield; console.log('I can see it in your eyes…'); yield; console.log('I can see it in your smile…'); } const lionel = lyrics(); // 'Hello…' lionel.next(); // 'Is it me, you’re looking for?' lionel.next(); // 'I can see it in your eyes…' lionel.next(); // 'I can see it in your smile…' lionel.next();
115. Generators. —Pausable functions —Exited/Re–entered —Data producers —Manually, for…of, spread–Operator, Destructuring
116. function* even (until) { for ( let i = 0; i <= until; i += 2 ) { yield i; } } for ( const num of even(10) ) { console.log(num); // 0, 2, 4, 6, 8, 10 } const evenTilTwenty = [...even(20)]; console.log(evenTilTwenty); // [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20] const [, two, four, , eight] = even(8); console.log(two, four, eight); // 2, 4, 8
118. Generators. —Pausable functions —Exited/Re–entered —Data producers —Manually, for…of, spread–Operator, Destructuring —Data consumers —Coroutines
119. const answers = [ 'It is certain.', 'It is decidedly so.', 'Without a doubt.' ], coRoutine = genFunc => { const genObj = genFunc(); genObj.next(); return genObj; }, genie = function* () { while ( true ) { let question = yield `[GENIE]: ${answer()}`; console.log(`[ME]: ${question}`) } }, answer = () => answers[Math.floor(Math.random() * answers.length)]; let genieObj = coRoutine(genie); console.log(genieObj.next('Is ES6 cool?').value);
120. const co = require('co'); function getFile (url) { return fetch(url).then(request => request.text()); } co(function* () { try { const [foo, bar] = yield Promise.all([ getFile('files/foo.txt'), getFile('files/bar.txt') ]); console.log(foo, bar); } catch (e) { console.log(e); } });
121. Generators. —Pausable functions —Exited/Re–entered —Data producers —Manually, for…of, spread–Operator, Destructuring —Data consumers —Coroutines —Async flows —Callbacks ⇾ Promises ⇾ Generators (+ Promises) ⇾ async / await
122. Data.
123. Data. —Map —No Object.prototype —Iterable —Keys not just Strings
124. class Person { constructor ({ name = null, age = 0 } = {}) { Object.assign(this, { name, age }); } } const jane = new Person({ name: 'Jane', age: 32 }); const john = new Person({ name: 'John', age: 35 }); const peopleHobbies = new Map([ [jane, 'Basketball'], [john, 'Football'] ]); console.log(peopleHobbies.get(jane)); // 'Basketball' console.log(peopleHobbies.get(john)); // 'Football'
125. Data. —Map —No Object.prototype —Iterable —Keys not just Strings —.size —Set
126. const nums = [23, 1, 15, 1, 100, 91, 15]; // Array -> Set -> spread -> Array const unique = [...new Set(nums)]; unique; // [23, 1, 15, 100, 91]
128. const a = new Set([1, 2, 3, 4]), b = new Set([4, 5, 6, 7, 1]); union = new Set([...a, ...b]); union; // Set {1, 2, 3, 4, 5, 6, 7}
129. const a = new Set([1, 2, 3, 4]), b = new Set([4, 5, 6, 7, 1]); intersection = new Set([...a].filter(e => b.has(e))); intersection; // Set {1, 4}
130. const a = new Set([1, 2, 3, 4]), b = new Set([4, 5, 6, 7, 1]); diff = new Set([...a].filter(e => !b.has(e))); diff; // Set {2, 3}
131. Data. —Map —No Object.prototype —Iterable —Keys not just Strings —.size —Set —WeakMap / WeakSet
132. Proxies.
133. Proxies. —Intercession —Re–defining semantics of a language —Traps —handler.get, handler.deleteProperty, handler.construct, etc.
134. const negativize = arr => new Proxy(arr, { get (target, prop) { const index = +prop; if (index < 0) { prop = (target.length + index).toString(); } return Reflect.get(target, prop); } }); let arr = ['Hi', 'World', 'what’s', 'going', 'on?']; arr[-1]; // undefined arr = negativize(arr); arr[-1]; // 'on?' arr[-2]; // 'going'
135. Proxies. —Intercession —Re–defining semantics of a language —Traps —handler.get, handler.deleteProperty, handler.construct, etc. —If trapped, Reflect
136. “The global object Reflect implements all interceptable operations of the JavaScript meta object protocol as methods […] which helps with forwarding operations from the handler to the target.” —Axel Rauschmayer
137. const person = { name: 'Jane', _password: '123password456' }; const protectPrivacy = (prop, trap) => { if (prop[0] === '_') { throw new Error(`Can’t ${trap} private property ${prop}`); } }; const handler = { get (target, prop, value) { protectPrivacy(prop, 'get'); return Reflect.get(target, prop); }, set (target, prop, value) { protectPrivacy(prop, 'set'); return Reflect.get(target, prop); } }; const proxy = new Proxy(person, handler); proxy.name; // 'Jane' proxy._password; // Error: Can’t get private property _password
138. Proxies. —Intercession —Re–defining semantics of a language —Traps —handler.get, handler.deleteProperty, handler.construct, etc. —If trapped, Reflect —Can be revocable
139. Obviously. 4
140. Obviously. 4 —Decrease of “reinventing the wheel” —lol jk —Focus on the core —Iteration ∞ —Great for the web
141. “The ECMAScript standarization process will behave more like HTML and CSS ones, where new features are standarized as consensus is reached, rather than clean-cut – or “limited by” – by version numbers.” —Nicolás Bevacqua
142. Obviously. 4 —Decrease of “reinventing the wheel” —lol jk —Focus on the core —Iteration ∞ —Great for the web —ECMAScript as a living standard
143. That life ™
144. Thank you.
145. Appendix. —Thoughts & feedback ⇾ twitter.com/mixn / sutmil@gmail.com —Slides ⇾ bit.ly/es6-obviously —Q&A