Using ECMAScript 6 Today – Why wait? – Type of Features

Type of Features

• Syntactic Sugar

  If you're creative/masochistic, you may already have some of these. Of course, it's probably very verbose.

• Features that are completely new and can't be replicated.

Rest Parameters - Syntactic Sugar

function rest(a, ...b) { console.log(a,b); };

function unrest(a,b) { console.log(a,b); }

function restEnd(primaryFunction) {
  return function() {
    var argSize = arguments.length;

    return primaryFunction.call(this,
        arguments[0],
        [].slice.call(arguments,1)
    );
  }
}

restEnd(unrest)(1,2,3,4);
rest(1,2,3,4);

Proxy - New Functionality

var a = Proxy({}, {
    get: function() { console.log("get arguments", arguments); },
    set: function(obj, prop, newVal) {
        console.log("Calling set with ", arguments); obj[prop] = newVal;    }
    });
a.eek = 'bam';

Returns: "Calling set with " Arguments
   {0: Object, 1: "eek", 2: "bam", 3: Object, 2 more…}

Generators - Borderline

var numberator = function*(base) {
  while(base < 4) {
    yield ++base;
  }
  return ++base;
};

//Array comprehension
var eek = [for ( x1 of numberator(-5)) if(x1%2 === 0 ) x1];
console.log(eek);

var numberator = $traceurRuntime.initGeneratorFunction(function $__22(base) {
return $traceurRuntime.createGeneratorInstance(function($ctx) {
  while (true)
    switch ($ctx.state) {
        case 0:
            $ctx.state = (base < 4) ? 1 : 5;
            break;
        case 1:
            $ctx.state = 2;
            return ++base;
        case 2:
            $ctx.maybeThrow();
            $ctx.state = 0;
            break;
        case 5:
            $ctx.returnValue = ++base;
            $ctx.state = -2;
            break;
        default:
            return $ctx.end();
            }
            }, $__22, this);
            });

ES6 in 3 Easy Slides

Frankenfunctions

The One With the Friends Reference?

The One With the Kitchen Sink

//arrow + destructuring + default params
var fibNext=({last=0,current})=>{ return last + current};
var gen = function *(...two ) { //generator + rest params
  var [last,current] = two;  //destructuring
  var next = fibNext({last,current}); //shorthand object syntax
  while(next < 1000) {
    next = fibNext({last,current});
    [last, current] = [current,next]; //destructuring
    yield next; //yield keyword (for generators)
  }
}
for(let z of gen(0,1)) { //generator + let
  var q = [ for (n of gen(...[0,1])) if (n=== z) n ]  //iterators + array comprehension + spread operator
  console.log(\`Runtime complexity ${q}\`); //string templating
}

export gen //modules

The One with the Long Distance Relationship

class HttpResolver { //class
  constructor({url, method, data}) {
    this._xmlHttpRequest = new XMLHttpRequest();    
    this._promise = new Promise(this.resolve.bind(this)); //context is important here es5
    this._xmlHttpRequest.open(method, url);
    this._xmlHttpRequest.send(data); 
  }
  getData() {
       return this._xmlHttpRequest.responseText;
  }
  resolve(resolve,reject) {

    this._xmlHttpRequest.onreadystatechange = () => { 
      if(this._xmlHttpRequest.readyState==4 && this._xmlHttpRequest.status==200) {
          resolve(this.getData());
      }
    }
    this._xmlHttpRequest.ontimeout = () => { throw new Error('timeout'); }
  }
  get promise() { return this._promise; } //get modifier (Use .promise instead of .promise() es5
}

Continued

class JSONResolver extends HttpResolver { //extends
  getData() {
   return JSON.parse(super.getData());
  }
}

var request = (options) => { //arrow function

  var {url, method, data, Resolver} = options;
  return new Resolver({url,method,data});//shorthand object creation

};

//thanks to openstreetmap for the easily accessible cors api.
var act = request({ 
   url: 'http://taginfo.openstreetmap.org/api/4/search/by_keyword?query=fire&page=1&rp=10',  
   method:'get', Resolver: HttpResolver });  
var act2 = request({ 
   url:'http://taginfo.openstreetmap.org/api/4/search/by_keyword?query=fire&page=1&rp=10', 
   method:'get', Resolver: JSONResolver });  

act.promise.then((data) => console.log(typeof data));
act2.promise.then((data) => console.log(typeof data));

The One Where Phoebe Forgets Something

   var wm = new WeakMap();
   var m = new Map();
   var s = new Set();
   (function() { 
     var c = {'not':'me'}; 
     m.set(c,{'o':'k'});
     wm.set(c,{'o':'k'});
     s.set(c);
     console.log(wm.get(c));
   }
   )()

   wm.has(m.keys().next().value); 
   s.has(m.keys().next().value);

  //ES6 Spec..an ECMAScript implementation must not provide any means to observe a key of a 
  //WeakMap that does not require the observer to present the observed key.

More Classes

class Parent {
  constructor(eek) {
  this.eek = eek;
  }
  height(h) {
    if(h) {
      this.h =h;}
    else {
      return this.h;
    }
  }
}

class Child extends Parent {
  constructor() {
    super(10);
  }
  height(h) {
    super.height(h);
    this.h2=h;
  }

  static defaultKid() {
    var toBe = new Child();
    toBe.height(32);
    toBe.name = 'Shakespeare';
    return toBe;
  }

}