![Page 1: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/1.jpg)
Things You Can Do In ES6 That Can't Be Done In ES5
![Page 2: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/2.jpg)
Performance specialist at Wix.comMaking 100 Million sites load and execute faster
http://www.wix.engineering/
@DanShappir
Hi, I’m Dan.
![Page 3: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/3.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 4: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/4.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 5: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/5.jpg)
JSON Accessvar json = { a: { b: { c: 42 } } };
// Unsafe ES5:
var c = json.a.b.c;
// “Safe” ES5:
var c = json.a && json.a.b && json.a.b.c;
// lodash
var c = _.get(json, "a.b.c");
// ES6:
const { a: { b: { c } = {} } = {} } = json;
![Page 6: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/6.jpg)
Not So Obvious Examples
Classes
Iterators & Generators
Rest+
Spread
![Page 7: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/7.jpg)
Emulate 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 8: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/8.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 9: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/9.jpg)
Leak!
console.log(map.size); // 1document.getElementById('foo').remove();console.log(map.size); // still 1
![Page 10: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/10.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 11: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/11.jpg)
ES5: No WeakMap For You!Cannot be implemented in ES5 because JavaScript doesn’t provide direct control over Garbage Collector
![Page 12: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/12.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 13: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/13.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 14: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/14.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 15: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/15.jpg)
Precise Control Over Conversion
Object controls conversion rather than object’s clients
const obj = { [Symbol.toPrimitive](hint) { // hint: 'default' | 'string' | 'number' }};
![Page 16: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/16.jpg)
Tail Call Optimization
Even though bar does nothing after foo finishes
![Page 17: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/17.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 18: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/18.jpg)
Summary
ES6 > ES5 + sugar
Sugar is 8 times more addictive than Cocaine
![Page 19: Things you can do in JavaScript ES6 that can't be done in ES5](https://reader035.vdocuments.site/reader035/viewer/2022062503/58ee7aa21a28ab2f7e8b46c3/html5/thumbnails/19.jpg)
Wix Engineeringhttp://www.wix.engineering/
@DanShappir