ES6 UNCENSORED ____________ ____________ @angustweets

And on the 6th day, God created an abundance of Talking Animals, that they may be used in JavaScript inheritance examples.

The draft ES6 standard is scheduled for completion in early 2014

As soon as it comes out...

The Fun Police will emerge

...and tell you how to write it

...or rather how not to write it

until then...

go wild with ES6

If Hemingway wrote JavaScript

function fibonacci(size) { var first = 0, second = 1, next, count = 2; var result = [first, second]; if(size < 2) return "the request was made but it was not good" while(count++ < size) { next = first + second; first = second; second = next; result.push(next); } return result; }

If Kerouac wrote JavaScript

/*...the only numbers for me are the mad ones, take forty-three like a steam engine with a talky caboose at the end*/ n = 43, /*and that lanky fellow in a cocked fedora*/ r = 1 /*then back to our number, our mad number, mad to become one*/ while (n > 1) /*mad to descend*/ n--, /*mad to multiply*/ r = r * n /*and at the end, you see the blue center-light pop, and everybody goes 1.4050061177528801e+51...*/ r

ES6 If ES6 wrote JavaScript

GENERATORS ARROWS SETS REST DEFAULTS SPREAD PROXIES DESTRUCTURE ASSIGNMENT LET WEAK MAPS M O D ULES E S 6

No content

GENERATORS ARROWS SETS REST DEFAULTS SPREAD PROXIES DESTRUCTURE ASSIGNMENT LET WEAK MAPS M O D ULES E S 6

1. Switch two Variables

destructuring //es5 var temp = a; a = b; b = temp; //es6 [a, b] = [b, a]

2. Find the Biggest Number in an Array

//es5 Math.max.apply(null, array); //es6 Math.max(...array); spread operator

3. Sum the Arguments

//es5 var sum = function(/* numbers */) { var asArray = [].slice.call(numbers); return asArray.reduce(function(a, b) { return a + b; }); }

//es6 let sum = (...numbers) => numbers.reduce((a, b) => a + b); rest operator arrow function

4. Remove the Duplicates from an Array

//es5 (efficient but type issues) function unique(arr) { var r = {}; arr.forEach(function(e){ r[e] = 1; }); return Object.keys(r); }

//es5 (works for all types bad ordering) function unique(arr) { var r = []; arr.forEach(function(e, i){ arr.indexOf(e, i+1) > -1 || r.push(e); }); return r; }

//es6 function unique(arr) { return [...Set(arr)]; } spread operator sets

5. Generate the Fibonacci Numbers

//es5 function fibonacci(size) { var a = 0, b = 1; var next, x = 2, result = [a, b]; while(x++ < size) { next = a + b; a = b; b = next; result.push(next); } return result; }

//es6 function fibonacci(size) { var a = 0, b = 1, x = 2, r=[a, b]; while(x++ < size) { [a, b] = [b, a+b]; r.push(b); } return r } destructuring

//es6 with generators function fibonacci(){ var a = 1, b = 1; while (true) { [a, b] = [b, a+b]; yield b; } } var generator = fibonacci(); generator.next(); //1 generator.next(); //2 destructuring generators

6. Factorial (Ramunujan’s Approximation)

//es5 function factorial(n){ var r = Math.sqrt(Math.PI) * Math.pow(n/Math.E,n); r *= Math.pow(Math.pow(4*(n*n) + n + 1/30, 1/6); return r; }

//es5 + with function factorial(n){ with(Math) { var r = sqrt(PI)*pow(n/E,n); r *= pow(8*pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; } }

//es6 function factorial(n) { var {sqrt, PI, pow, E} = Math; var r = sqrt(PI)*pow(n/E,n); r *= pow(8*pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; } destructuring

7. Sum the Squares

//es5 arr.map(function(number) { return number * number; }).reduce(function(a, b) { return a + b; });

//es6 [for (x of array) x*x].reduce((a,b)=>a+b); comprehesions arrow function

8. Module Pattern (ID Generator)

//es5 var idGenerator = function(id) { id || (id = 0); return function() { return id++; } } var nextFrom1000 = idGenerator(1000); nextFrom1000(); //1000 nextFrom1000(); //1001

//es6 let idGenerator= (id=0)=> ()=> id++; let nextFrom1000 = idGenerator(1000); nextFrom1000(); //1000 nextFrom1000(); //1001 defaults arrow function

9. Module Pattern (ID Generator 2)

//es5 var idGenerator = function(id) { id || (id = 0); function resetId() { return id = 0; } function nextId() { return id++; } return { nextId: nextId, resetId: resetId }; }

//es6 let idGenerator=(id=0)=> (resetId = ()=> id=0, nextId = ()=> id++, {resetId, nextId}); defaults arrow function literal shorthand

10. Resolve the Options

//es5 function echoABC(options) { options || (options = {}); console.log( options.a || 3, options.b || 4, options.c || 5); }

//es6 function echoABC({a=3, b=4, c=5}) { console.log(a, b, c); } destructuring defaults

11. Support Negative Array Indexes

//es5 var arr = [1, 2, 3]; //last item arr[-1];

//es5 var arr = [1, 2, 3]; //last item arr[-1]; //@#$%$#@

//es5 var arr = [1, 2, 3]; //last item arr[-1]; //@#$%$#@ arr[arr.length - 1]; //3

//es6 var arr = makeSmartArray([1,2,3]); arr[0]; //1 arr[-1]; proxies

//es6 var arr = makeSmartArray([1,2,3]); arr[0]; //1 arr[-1]; //3 proxies

//es6 var arr = makeSmartArray([1,2,3]); arr[0]; //1 arr[-1]; //3 arr.push(4); arr[-2]; //3 proxies

//es6 function makeSmartArray(arr) { return Proxy( arr, {get: function(p,x) { if (Number(x) < 0) { return p[p.length + Number(x)]; } return p[x]; }} ); } proxies

12. Null-safe Property Chains

//es5 var contactLastName = sale && sale.person && sale.person.name && sale.person.name.last;

//es5 //tobyho.com/2010/11/30/two-strategies-for-avoiding var contactLastName = NullSafe(sale). _('person'). _('name'). _('last').val() || "Unknown"

//es5 NullSafe function //tobyho.com/2010/11/30/two-strategies-for-avoiding function NullSafe(obj){ function NullSafe(obj){ this.obj = obj } Wrapper = NullSafe var proto = Wrapper.prototype proto.call = proto.$ = function(){ var name = arguments[0] var args = Array.prototype.slice.call(arguments, 1) var obj = null if (this.obj){ var func = this.obj[name] if (this.obj && func){ obj = func.apply(this.obj, args) } } return new Wrapper(obj) } proto.get = proto._ = function(){ var curr = this.obj for (var i = 0; i < arguments.length; i++){ if (curr != null){ curr = curr[arguments[i]] } } return new Wrapper(curr) } proto.val = function(){ return this.obj } proto.toString = function(){ return String(this.obj) } return new Wrapper(obj || this) }

//es6 nullProxy var Obj = Function(); var nullProxy = Proxy( {toString: () => 'nullProxy'}, { get: (t,p) => t[p] || new Obj() } ); Obj.prototype = nullProxy; proxies

//es6 var sale = Object.create(nullProxy /*, data*/); contactLastName = sale.contact.name.last; contactLastName; //'nullProxy' proxies

Where to Play with ES6...

firefox chrome (chrome://flags ‘enable experimental Javascript’) node --harmony traceur continuum github.com/paulmillr/es6-shim/

esdiscuss.org tc39wiki.calculist.org/es6/ people.mozilla.org/~jorendorff/es6-draft.html some resources... es6 standard... @esdiscuss on twitter compatibility... kangax.github.io/es5-compat-table/es6/

@angustweets FIN UNCENSORED ____________ ____________

Cheetah cubs: http://www.bhmpics.com/view-cheetah_cubs_playing-1920x1080.html ES6 robot limbs: http://www.tfs.rcs.k12.tn.us/TEACHERS/halimir/index.html Image credits ES6opoly is based on Monopoly by Hasbro Inc.