ES6 er her,

fremtiden innen JavaScript

Pål Ruud / @ruudud

ES3 — 1999

ES5 — 2009

ES6 — 2014 2015

Hva består ES6 av?

  • Block scoped vars
  • Array comprehensions
  • Template strings
  • Lambda (=> functions)
  • Promises
  • Destructuring
  • Classes
  • Rest + Spread operators
  • Proxy
  • Generators
  • (Modules)

Array Comprehensions


 
var squared = [ for (i of [1, 2, 3]) i * i ]; 
// [1, 4, 9]


[ for (x of [1, 2, 3]) for (y of [4, 5, 6]) (x * y) ];
// [4, 5, 6, 8, 10, 12, 12, 15, 18]
   
          

Lambda Expressions



var people = [
  { firstName: "April", lastName: "O'Neil", human: true },
  // …
];

// Før
people.filter(function(p) {
  return p.human;
});

// Nå
people.filter( p => p.human );

          

Lambda Expressions II



people.map((p) => {
  return { fullName: p.firstName + p.lastName };
});

          

Destructuring



var [a, [b], c, d] = ['Hello', [', ', 'junk'], ['JavaZone!']];

console.log(a + b + c);
// Hello, JavaZone!

          

Destructuring II


var people = [
  { firstName: "April", lastName: "O'Neil", human: true },
  // …
];

people.map(({ firstName, lastName }) => {
  return { fullName: firstName + lastName }
});

          

Destructuring III



function foo(requiredParam, { option1, option2 = 'bar' }) {

  console.log(requiredParam, option1, option2);

};

foo(1, { option1: 'baz' });
foo(2, { option1: 'baz', option2: 'qux' });

          

Rest Parameters



function withFirstNames(data, ...firstNames) {
  return data.filter(p => {
    return firstNames.indexOf(p.firstName) > -1;
  });
}

withFirstNames(people, 'April', 'Raphael');

          

Spread



var toBeAdded = [ 
  { firstName: 'Donatello' },
  { firstName: 'Raphael' }
];
people.push(...toBeAdded);

          

Generators (iterators)


function* fibonacci() {
    var [ prev, curr ] = [ 0, 1 ];
    while (true) {
        yield curr;
        [ prev, curr ] = [ curr, prev + curr ];
    }
}

var fib = fibonacci();
fib.next();   // { value: 1, done: false }
fib.next();   // { value: 1, done: false }
fib.next();   // { value: 2, done: false }
// …
          

Generators + Promises = task.js



spawn(function*() {
    var data = yield $.ajax(url);
    $('#result').html(data);

    var status = $('#status').text('Download complete.');
    yield status.fadeIn().promise();

    yield sleep(2000);
    status.fadeOut();
});

          

www.taskjs.org

Transpiling + Shims