things you can do in javascript es6 that can't be done in es5
TRANSCRIPT
Things You Can Do In ES6 That Can't Be Done In ES5
Performance specialist at Wix.comMaking 100 Million sites load and execute faster
http://www.wix.engineering/
@DanShappir
Hi, I’m Dan.
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
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}.`;
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;
Not So Obvious Examples
Classes
Iterators & Generators
Rest+
Spread
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); } }};
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
Leak!
console.log(map.size); // 1document.getElementById('foo').remove();console.log(map.size); // still 1
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
ES5: No WeakMap For You!Cannot be implemented in ES5 because JavaScript doesn’t provide direct control over Garbage Collector
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
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]); // ?
toPrimitive
Because JavaScript type conversion is too trivial …
const obj = { valueOf() { return 42; }, toString() { return 'hello'; }};console.log('' + obj); // ?console.log(String(obj)); // ?
Precise Control Over Conversion
Object controls conversion rather than object’s clients
const obj = { [Symbol.toPrimitive](hint) { // hint: 'default' | 'string' | 'number' }};
Tail Call Optimization
Even though bar does nothing after foo finishes
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
Summary
ES6 > ES5 + sugar
Sugar is 8 times more addictive than Cocaine
Wix Engineeringhttp://www.wix.engineering/
@DanShappir