ES6 Uncensored

Full Frontal Conference, Brighton, UK
Nov 8th 2013

Transcript

1. ES6
   UNCENSORED
   ____________
   ____________
   @angustweets
   

   View Slide

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

   View Slide

3. The draft ES6 standard is scheduled for
   completion in early 2014
   

   View Slide

4. As soon as it comes out...
   

   View Slide

5. The Fun Police will emerge
   

   View Slide

6. ...and tell you how to write it
   

   View Slide

7. ...or rather how not to write it
   

   View Slide

8. until then...
   

   View Slide

9. go wild with ES6
   

   View Slide

10. If Hemingway wrote
    JavaScript
    

    View Slide

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

    View Slide

12. If Kerouac wrote JavaScript
    

    View Slide

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
    

    View Slide

14. ES6
    If ES6 wrote JavaScript
    

    View Slide

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

    View Slide

16. View Slide

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

    View Slide

18. 1. Switch two
    Variables
    

    View Slide

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

    View Slide

20. 2. Find the
    Biggest Number
    in an Array
    

    View Slide

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

    View Slide

22. 3. Sum the
    Arguments
    

    View Slide

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

    View Slide

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

    View Slide

25. 4. Remove the
    Duplicates
    from an Array
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. 5. Generate the
    Fibonacci
    Numbers
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

33. 6. Factorial
    (Ramunujan’s
    Approximation)
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

37. 7. Sum the
    Squares
    

    View Slide

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

    View Slide

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

    View Slide

40. 8. Module
    Pattern
    (ID Generator)
    

    View Slide

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

    View Slide

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

    View Slide

43. 9. Module
    Pattern
    (ID Generator 2)
    

    View Slide

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

    View Slide

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

    View Slide

46. 10. Resolve the
    Options
    

    View Slide

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

    View Slide

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

    View Slide

49. 11. Support
    Negative Array
    Indexes
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

57. 12. Null-safe
    Property Chains
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. Where to Play with ES6...
    

    View Slide

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

    View Slide

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/
    

    View Slide

66. @angustweets
    FIN
    UNCENSORED
    ____________
    ____________
    

    View Slide

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.
    

    View Slide