10k

# ES6 Uncensored

Full Frontal Conference, Brighton, UK
Nov 8th 2013

#### Angus Croll

November 08, 2013

## Transcript

2. ### And on the 6th day, God created an abundance of

Talking Animals, that they may be used in JavaScript inheritance examples.

2014

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

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

15. ### GENERATORS ARROWS SETS REST DEFAULTS SPREAD PROXIES DESTRUCTURE ASSIGNMENT LET

WEAK MAPS M O D ULES E S 6
16. None
17. ### GENERATORS ARROWS SETS REST DEFAULTS SPREAD PROXIES DESTRUCTURE ASSIGNMENT LET

WEAK MAPS M O D ULES E S 6

19. ### destructuring //es5 var temp = a; a = b; b

= temp; //es6 [a, b] = [b, a]

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

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

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

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

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

return a + b; });

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

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

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

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

//@#\$%\$#@ arr[arr.length - 1]; //3

55. ### //es6 var arr = makeSmartArray([1,2,3]); arr; //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

58. ### //es5 var contactLastName = sale && sale.person && sale.person.name &&

sale.person.name.last;

"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 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

64. ### ﬁrefox chrome (chrome://ﬂags ‘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/

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.