ECMAScript 6

Comfort and magic

Pål Ruud / @ruudud

  • No backwards incompatability
  • Purely additive
  • No modes

In 10 minutes…

  • Rest and Spread expressions
  • Destructuring
  • Default arguments
  • Template strings
  • Arrow functions
  • Generators
  • Proxies

Rest expression


function bakeTheCake(flour, sugar, ...other) {
  assert(Array.isArray(other));
}

Spread expression


var dateFields = [2013, 12, 24];
var myDate = new Date(...dateFields);

var evenMoreSpecificDate = [...dateFields, 18, 20];

Destructuring


var [firstName, lastName] = person.getName();

var [first, ...allButFirst] = document.querySelectorAll("section");

function runTests({ reporter, ui }) {}
runTest({ reporter: "dot", ui: "tdd"})

Destructuring II


var re = /([a-z]+)(\s)(.*)([^a-z])/;
var [, hello, space, world, bang] = re.exec("hello world!");

Default arguments

Before


var myFunc = function (size) {
  size = size || 'XXL';
};

Now


var myFunc = function (size = 'XXL') {
  // thusly
};

Template Strings


var name = 'Han',
var whenShot = 'first';

var addressTmpl = `There is proof that ${name} shot ${whenShot}`;

var multiline = `${name} Solo is confronted by the
  bounty hunter Greedo at the Mos Eisley Cantina.
  The initial change was made to the 1997
  Star Wars Trilogy Special Edition re-release.`;

Arrow functions


function printAwesomeMovies(url) {

  getMovies(url, (xhr, movies) => { 

    movies.filter(m => m.genre === 'Adventure')
          .map(m => { title: m.title })
          .each(m => console.log(m));
  };
}

Generators


function* naturalNumbers() {
  let current = 0;
  while (true) {
    yield current++;
  }
}
let seq = naturalNumbers();
assert(seq.next() === 0);
assert(seq.next() === 1);
assert(seq.next() === 2);

Generators II - taskjs.org


spawn(function*() {
    var data = yield $.ajax(url);
    $('#result').html(data);
    var status = $('#status').html('Download complete.');
    yield status.fadeIn().promise();
    yield sleep(2000);
    status.fadeOut();
});
Every time the task yields a promise,
the scheduler blocks the task until the promise is fulfilled.

Proxies

 
var actor = { name: 'Harrison Ford', salary: 0 };
 
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};
 
actor = Proxy(actor, interceptor);

get, has, keys, deleteProperty…

A whole lot more…

  • Block scoping (let)
  • Classes and modules
  • Array comprehensions
  • for…of
  • const
  • Object.mixin()
  • Map() and Set()

I WANT DIS NOU

  1. Shims
  2. Transpilers (Google Traceur)
  3. Node: --harmony

FIN

ruudud.github.io/presentations/es6

Sources