Dan Shappir: Things you can do in ES6 that can't be done in ES5
-
Upload
danielle-a-vincent -
Category
Technology
-
view
84 -
download
1
Transcript of Dan Shappir: Things you can do in ES6 that can't be done in ES5
![Page 1: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/1.jpg)
Things You Can Do In ES6 That Can't Be Done In ES5Dan Shappir - Performance specialist at Wix.com
http://www.wix.engineering/
@DanShappir
![Page 2: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/2.jpg)
ES6 Is Mostly Syntactic SugarSyntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, and more concisely
-- Wikipedia
![Page 3: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/3.jpg)
Obvious Examples
ES5
ES6
function es5(param) { param = param || {}; var bar = param.bar || 42; return 'The meaning of life is ' + bar + '.';}
// arrow + destructuring + defaults + template stringconst es6 = ({bar = 42} = {}) => `The meaning of life is ${bar}.`;
![Page 4: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/4.jpg)
Not So Obvious Examples
Classes
Iterators & Generators
Rest+
Spread
![Page 5: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/5.jpg)
ES6 Map
Object
Map
var dictionary = {};var key1 = {}, key2 = {};dictionary[key1] = 42;console.log(dictionary[key1]); // 42console.log(dictionary[key2]); // 42console.log(dictionary['[object Object]']); // 42
var dictionary = new Map();var key1 = {}, key2 = {};dictionary.set(key1, 42);console.log(dictionary.get(key1)); // 42console.log(dictionary.get(key2)); // undefined
![Page 6: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/6.jpg)
Emulating Map in ES5function MyMap() { this.keys = []; this.values = [];}MyMap.prototype = { get: function(key) { var index = this.keys.indexOf(key); if (index !== -1) { return this.values[index]; } }, set: function(key, value) { var index = this.keys.indexOf(key); if (index !== -1) { this.values[index] = value; } else { this.keys.push(key); this.values.push(value); } }};
![Page 7: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/7.jpg)
Scenario: Add Extra Data to DOM Node
Associate JavaScript object with DOM node, without modifying node
Like jQuery .data()
Can you spot a problem?
var map = new Map(); // or MyMapvar elem = document.getElementById('foo');map.set(elem, {a: 'hello', b: 42});
...
elem = document.querySelector('#foo');console.log(map.get(elem).b); // 42
![Page 8: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/8.jpg)
Leak!
console.log(map.size); // 1document.getElementById('foo').remove();console.log(map.size); // still 1
![Page 9: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/9.jpg)
WeakMap To The Rescue!References to key objects are "weakly" held – they do not prevent Garbage Collection in case there are no other references to the key objects
When key object is Garbage Collected,entry is removed from WeakMap.If this is only reference to value object,value is Garbage Collected as well
WeakSet works in the same way
![Page 10: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/10.jpg)
ES5: No WeakMap For You!Cannot be implemented in ES5 because JavaScript doesn’t provide direct control over Garbage Collector
![Page 11: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/11.jpg)
Proxy
• Define custom behavior for fundamental operations on objects,
e.g. property lookup, assignment, enumeration, function invocation
• Much more powerful than ES5 getters / setters and accessor descriptors
• For example, implement all the crazy stuff that the DOM API does
![Page 12: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/12.jpg)
Overload Square Brackets
const obj = { bar: 'hello', 7: 'seven'};const double = new Proxy(obj, { get(target, key) { return isNaN(key) ? target[key] : 2 * key; }});console.log(double[3]); // 6console.log(double[4]); // 8console.log(double['foo']); // undefinedconsole.log(double['bar']); // helloconsole.log(double.bar); // ?console.log(double[7]); // ?
![Page 13: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/13.jpg)
toPrimitive
Because JavaScript type conversion is too trivial …
const obj = { valueOf() { return 42; }, toString() { return 'hello'; }};console.log('' + obj); // ?console.log(String(obj)); // ?
![Page 14: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/14.jpg)
Precise Control Over Conversion
Object controls conversion rather than object’s clients
const obj = { [Symbol.toPrimitive](hint) { // hint: 'default' | 'string' | 'number' }};
![Page 15: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/15.jpg)
Summary
ES6 > ES5 + sugar
Sugar is 8 times more addictive than Cocaine
![Page 16: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/16.jpg)
Wix Engineeringhttp://www.wix.engineering/
@DanShappir
![Page 17: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/17.jpg)
Tail Call Optimization
Even though bar does nothing after foo finishes
![Page 18: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/18.jpg)
Tail Recursion
With ES6 tail recursion you get the correct result:
const fact = n => { const _fact = (n, acc) => n <= 1 ? acc : _fact(n - 1, n * acc); return _fact(n, 1);};console.log(fact(6)); // 720console.log(fact(100000)); // Exception: max call stack size exceeded
Infinity
![Page 19: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/19.jpg)
Summary
ES6 > ES5 + sugar
Sugar is 8 times more addictive than Cocaine
![Page 20: Dan Shappir: Things you can do in ES6 that can't be done in ES5](https://reader035.fdocuments.in/reader035/viewer/2022081521/58ee7a921a28ab2d018b4671/html5/thumbnails/20.jpg)
Wix Engineeringhttp://www.wix.engineering/
@DanShappir