Things You Can Do In ES6 That Can't Be Done In ES5Dan Shappir - Performance specialist at Wix.com

http://www.wix.engineering/

@DanShappir

dansh@wix.com

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}.`;

Not So Obvious Examples

Classes

Iterators & Generators

Rest+

Spread

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

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); } }};

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' }};

Summary

ES6 > ES5 + sugar

Sugar is 8 times more addictive than Cocaine

Wix Engineeringhttp://www.wix.engineering/

@DanShappir

dansh@wix.com

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

dansh@wix.com