ES6 Uncensored

Full Frontal Conference, Brighton, UK
Nov 8th 2013

Transcript

1. ES6 UNCENSORED ____________ ____________ @angustweets
2. And on the 6th day, God created an abundance of Talking Animals, that they may be used in JavaScript inheritance examples.
3. The draft ES6 standard is scheduled for completion in early 2014
4. As soon as it comes out...
5. The Fun Police will emerge
6. ...and tell you how to write it
7. ...or rather how not to write it
8. until then...
9. go wild with ES6
10. If Hemingway wrote JavaScript
11. 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; }
12. If Kerouac wrote JavaScript
13. /*...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
14. ES6 If ES6 wrote JavaScript
15. GENERATORS ARROWS SETS REST DEFAULTS SPREAD PROXIES DESTRUCTURE ASSIGNMENT LET WEAK MAPS M O D ULES E S 6
17. GENERATORS ARROWS SETS REST DEFAULTS SPREAD PROXIES DESTRUCTURE ASSIGNMENT LET WEAK MAPS M O D ULES E S 6
18. 1. Switch two Variables
19. destructuring //es5 var temp = a; a = b; b = temp; //es6 [a, b] = [b, a]
20. 2. Find the Biggest Number in an Array
21. //es5 Math.max.apply(null, array); //es6 Math.max(...array); spread operator
22. 3. Sum the Arguments
23. //es5 var sum = function(/* numbers */) { var asArray = [].slice.call(numbers); return asArray.reduce(function(a, b) { return a + b; }); }
24. //es6 let sum = (...numbers) => numbers.reduce((a, b) => a + b); rest operator arrow function
25. 4. Remove the Duplicates from an Array
26. //es5 (efficient but type issues) function unique(arr) { var r = {}; arr.forEach(function(e){ r[e] = 1; }); return Object.keys(r); }
27. //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; }
28. //es6 function unique(arr) { return [...Set(arr)]; } spread operator sets
29. 5. Generate the Fibonacci Numbers
30. //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; }
31. //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
32. //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
33. 6. Factorial (Ramunujan’s Approximation)
34. //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; }
35. //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; } }
36. //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
37. 7. Sum the Squares
38. //es5 arr.map(function(number) { return number * number; }).reduce(function(a, b) { return a + b; });
39. //es6 [for (x of array) x*x].reduce((a,b)=>a+b); comprehesions arrow function
40. 8. Module Pattern (ID Generator)
41. //es5 var idGenerator = function(id) { id || (id = 0); return function() { return id++; } } var nextFrom1000 = idGenerator(1000); nextFrom1000(); //1000 nextFrom1000(); //1001
42. //es6 let idGenerator= (id=0)=> ()=> id++; let nextFrom1000 = idGenerator(1000); nextFrom1000(); //1000 nextFrom1000(); //1001 defaults arrow function
43. 9. Module Pattern (ID Generator 2)
44. //es5 var idGenerator = function(id) { id || (id = 0); function resetId() { return id = 0; } function nextId() { return id++; } return { nextId: nextId, resetId: resetId }; }
45. //es6 let idGenerator=(id=0)=> (resetId = ()=> id=0, nextId = ()=> id++, {resetId, nextId}); defaults arrow function literal shorthand
46. 10. Resolve the Options
47. //es5 function echoABC(options) { options || (options = {}); console.log( options.a || 3, options.b || 4, options.c || 5); }
48. //es6 function echoABC({a=3, b=4, c=5}) { console.log(a, b, c); } destructuring defaults
49. 11. Support Negative Array Indexes
50. //es5 var arr = [1, 2, 3]; //last item arr[-1];
51. //es5 var arr = [1, 2, 3]; //last item arr[-1]; //@#$%$#@
52. //es5 var arr = [1, 2, 3]; //last item arr[-1]; //@#$%$#@ arr[arr.length - 1]; //3
53. //es6 var arr = makeSmartArray([1,2,3]); arr[0]; //1 arr[-1]; proxies
54. //es6 var arr = makeSmartArray([1,2,3]); arr[0]; //1 arr[-1]; //3 proxies
55. //es6 var arr = makeSmartArray([1,2,3]); arr[0]; //1 arr[-1]; //3 arr.push(4); arr[-2]; //3 proxies
56. //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
57. 12. Null-safe Property Chains
58. //es5 var contactLastName = sale && sale.person && sale.person.name && sale.person.name.last;
59. //es5 //tobyho.com/2010/11/30/two-strategies-for-avoiding var contactLastName = NullSafe(sale). _('person'). _('name'). _('last').val() || "Unknown"
60. //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) }
61. //es6 nullProxy var Obj = Function(); var nullProxy = Proxy( {toString: () => 'nullProxy'}, { get: (t,p) => t[p] || new Obj() } ); Obj.prototype = nullProxy; proxies
62. //es6 var sale = Object.create(nullProxy /*, data*/); contactLastName = sale.contact.name.last; contactLastName; //'nullProxy' proxies
63. Where to Play with ES6...
64. firefox chrome (chrome://flags ‘enable experimental Javascript’) node --harmony traceur continuum github.com/paulmillr/es6-shim/
65. 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/
66. @angustweets FIN UNCENSORED ____________ ____________
67. 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.