ES6 Uncensored

52c6174ba60557536f93809b4e95d97c?s=47 Angus Croll
November 08, 2013

ES6 Uncensored

Full Frontal Conference, Brighton, UK
Nov 8th 2013

52c6174ba60557536f93809b4e95d97c?s=128

Angus Croll

November 08, 2013
Tweet

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
  16. None
  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.