Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6 Uncensored

Angus Croll
November 08, 2013

ES6 Uncensored

Full Frontal Conference, Brighton, UK
Nov 8th 2013

Angus Croll

November 08, 2013
Tweet

More Decks by Angus Croll

Other Decks in Technology

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