ECMAScript

http://slides.com/verbeekp/ecmascript/live

ECMAScript

 6

ECMAScript

 2015

ECMAScript

?

ECMAScript

-262

ECMAScript

-402

Dart Programming Language

ECMAScript

-222

Adaptive Lossless Data Compression Algorithm 

ECMAScript

-74

Measurement of Airborne Noise Emitted by Information Technology and Telecommunications Equipment

ECMAScript

-262

ECMAScript® 2015 Language Specification

ECMAScript

Action

ECMAScript

Type

ECMAScript

J

ECMAScript

J

.NET

ECMAScript

Java

ECMAScript

Live

ECMAScript

Java

ECMAScript

Java

ECMAScript

 5.1

• strict mode ("use strict")

• JSON

• String.trim()

• getters & setters

• trailing commas

• Function.prototype.bind()

• Nieuwe Object methods (bv. Object.create())

• Nieuwe Array methods (bv. Array.map())

• Date.now()

ECMAScript 5.1

ECMAScript

 2015

ECMAScript

 6

ECMAScript 6

• Arrow functions

• Binary and Octal Literals

• Classes

• Comprehensions

• Default + rest + trailing parameters

• Destructuring

• Iterators

• Generators

• Let + const

• Map + Set + WeakMap + WeakSet

ECMAScript 6

• Math + Number + String + Object APIs

• Modules

• Promises

• Proxies

• Reflect API

• Subclassable Built-ins

• Symbols

• Tail Calls

• Template strings

• Unicode

ECMAScript 6

• Arrow functions

• Binary and Octal Literals

• Classes

• Comprehensions

• Default + rest + trailing parameters

• Destructuring

• Iterators
• Generators

• Let + const

• Promises

• Template strings

Template strings

console.log('In JavaScript is \\n een nieuwe regel.'); 


console.log('In ECMAScript 5.1 geeft
 dit een error.');


var name = "Indivirtual", time = "vandaag";
console.log('Hallo ' + name + ', alles goed ' + time + '?');

console.log(`In JavaScript is \n een nieuwe regel.`);


console.log(`In ECMAScript 5.1 geeft
 dit een error.`);


var name = "Indivirtual", time = "vandaag";
console.log(`Hallo ${name}, alles goed ${time}?`);

Let + const

var foo = 123;

if (true) {
  var foo = 456;
  console.log(foo);
}
  
console.log(foo);

let foo = 123;

if (true) {
  let foo = 456;
  console.log(foo);
}
  
console.log(foo);

let foo = 123;

let foo = 456;

const foo = 123;

foo = 456;

Destructuring

var arr = [1,2,3];

var arr = [1,2,3];

var a = arr[0];
var b = arr[1];
var c = arr[2];

let arr = [1,2,3];

let [a,b,c] = arr;

let arr = [1,2,3];

let [a,,b] = arr;

var obj = { foo: 1,
            bar: 2 };

var a = obj.foo;
var b = obj.bar;

let obj = { foo: 1,
            bar: 2 };

let { foo: a, bar: b } = obj;

// a === 1
// b === 2

let obj = { foo: 1,
            bar: 2 };

let { foo, bar } = obj;

// foo === 1
// bar === 2

function f1({firstName, surname}) {
  console.log(`${firstName} ${surname}`);
}

let obj = { firstName: "Paul", surname: "Verbeek" };

f1(obj)

let [a = 1] = [];

// a === 1  

Default, rest & spread parameters

multiply(3); // 6
multiply(3, 3); // 9

function multiply(x, y) {
  if (typeof y === "undefined") { y = 2; }

  return x * y;
}

multiply(3); // 6
multiply(3, 3); // 9

function multiply(x, y = 2) {
  return x * y;
}

multiply(3); // 6
multiply(3, 3); // 9

addAll(3, 4, 6); // 13
addAll(21, 21); // 42

function addAll() {
  var numbers = Array.prototype.slice.call(arguments),
      total = 0;

  for (var i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }

  return total;
}

addAll(3, 4, 6); // 13
addAll(21, 21); // 42

function addAll(...numbers) {
  let total = 0;

  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }

  return total;
}

addAll(3, 4, 6); // 13
addAll(21, 21); // 42

function add(x, y, z) {
  return x + y + z;
}

let numbers = [1,2,3];

add(...numbers) == 6

Arrow functions

(λ expressions)

setTimeout(function () {
  console.log('1 second passed');
}, 1000);


setTimeout(() => console.log('1 second passed'), 1000);

function Person() {
  var self = this; 
  this.age = 0;

  setInterval(function() {
    self.age++;
  }, 1000);
}

function Person() {
  this.age = 0;

  setInterval(() => this.age++, 1000);
}

var add = function (a, b) { 
  return a + b; 
}

add(1, 2); // 3

let add = (a, b) => a + b;

add(1, 2); // 3

Binary and Octal Literals

0x2A === 42 // true
0b101010 === 42 // true
0o52 === 42 // true

Classes

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype = {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  logName: function() {
    console.log('Hi! My name is ' + this.fullName());
  }
};

var p = new Person('Miriam', 'Tocini');

p.logName();

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  toString() {
    return `Hi! My name is ${this.fullName}`;
  }
}


let p = new Person('Miriam', 'Tocini');
console.log(p.toString());

class Person {
  ...  
}

class Employee extends Person {
  constructor(firstName, lastName, company) {
    super(firstName, lastName);
    this.company = company;
  }

  toString() {
    return `${super.toString()}
            and I work at ${this.company}`;
  }
}


let p = new Employee('Miriam', 'Tocini', 'Springest');
console.log(p.toString());

Iterators

let foo = "hi",
    fooIterator = foo[Symbol.iterator]();

console.log(fooIterator.next()); // {"value":"h","done":false}
console.log(fooIterator.next()); // {"value":"i","done":false}
console.log(fooIterator.next()); // {"done":true}


let bar = ["hi", "there"],
    barIterator = bar[Symbol.iterator]();

console.log(barIterator.next()); // {"value":"hi","done":false}
console.log(barIterator.next()); // {"value":"there","done":false}
console.log(barIterator.next()); // {"done":true}

function idMaker(){
  let index = 0;
  
  return {
    next(){
      return {value: index++, done: false};
    }
  }
}

let id = idMaker();

console.log(id.next().value); // 0
console.log(id.next().value); // 1
console.log(id.next().value); // 2

let fibonacci = {
  [Symbol.iterator]() {
    let previous = 0, current = 1;
    return {
      next() {
        [previous, current] = [current, previous + current];
        return { done: false, value: current }
      }
    }
  }
}

for (var n of fibonacci) {
  if (n > 7)
    break;
  console.log(n);
}

// 1
// 2
// 3
// 5

Generators

function* idMaker(){
  yield 0;
  yield 1;
  yield 2;
}

var gen = idMaker();

console.log(gen.next()); // {"value":0,"done":false}
console.log(gen.next()); // {"value":1,"done":false}
console.log(gen.next()); // {"value":2,"done":false}
console.log(gen.next()); // {"done":true}

function idMaker(){
  let index = 0;
  
  return {
    next(){
      return {value: index++, done: false};
    }
  }
}

let id = idMaker();

console.log(id.next().value); // 0
console.log(id.next().value); // 1
console.log(id.next().value); // 2

function* idMaker(){
  let index = 0;
  
  while(true)
    yield index++;
}

let gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i){
  yield i;
  yield* anotherGenerator(i);
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

Promises

function logFailed() {
  console.log('Idiot!');
}
function replacePage(data) {
  $('body').replaceWith(data);
}
function getPage() {
  $.get('/page.html', function (data) {
    replacePage(data.responseText);
  }).fail(logFailed);
}

getPage();

function logFailed() {
  console.log('Idiot!');
}
function replacePage(data) {
  $('body').replaceWith(data);
}
function appendPage(data) {
  $('body').append(data);
}
function getPage(callback) {
  $.get('/page.html', function (data) {
    callback(data.responseText);
  }).fail(logFailed);
}

getPage(replacePage);
getPage(appendPage);

function logFailed() {
  console.log('Idiot!');
}
function logKindFail() {
  console.log('It\'s not your fault.');
}
function replacePage(data) {
  $('body').replaceWith(data);
}
function appendPage(data) {
  $('body').append(data);
}
function getPage(callback, errorCallback) {
  $.get('/page.html', function (data) {
    callback(data.responseText);
  }).fail(errorCallback);
}

getPage(replacePage, logKindFail);

function logFailed() {
  console.log('Idiot!');
}
function logKindFail(string) {
  console.log('It\'s not your fault.');
}
function replacePage(data) {
  $('body').replaceWith(data);
}
function appendPage(data) {
  $('body').append(data);
}
function getPage() {
  return new Promise((resolve, reject) => {
    $.get('/page.html', function (data) {
      resolve(data.responseText);
    }).fail(reject);
  });
}

getPage().then(replacePage).catch(logKindFail);

Comprehensions

let customers = [{
  city: 'Seattle',
  firstName: 'Ed',
  lastName: 'Brubaker'
},{
  city: 'New Jersey',
  firstName: 'Kevin',
  lastName: 'Smith'
},{
  city: 'Seattle',
  firstName: 'Gary',
  lastName: 'Larson'
}];

let results = [
  for (c of customers) 
    if (c.city == "Seattle")
      c.lastName
]

console.log(results); // ["Brubaker","Larson"]

let customers = [{
  city: 'Seattle',
  firstName: 'Ed',
  lastName: 'Brubaker'
},{
  city: 'New Jersey',
  firstName: 'Kevin',
  lastName: 'Smith'
},{
  city: 'Seattle',
  firstName: 'Gary',
  lastName: 'Larson'
}];

let results = [
  for (c of customers) 
    if (c.city == "Seattle")
      {name: c.lastName, city: c.city}
]

console.log(results); 
// [{"name":"Brubaker","city":"Seattle"},
//  {"name":"Larson","age":"Seattle"}]

let customers = [{
  city: 'Seattle',
  firstName: 'Ed',
  lastName: 'Brubaker'
},{
  city: 'New Jersey',
  firstName: 'Kevin',
  lastName: 'Smith'
},{
  city: 'Seattle',
  firstName: 'Gary',
  lastName: 'Larson'
}];

let results = (
  for (c of customers) 
    if (c.city == "Seattle")
      {name: c.lastName, city: c.city}
)

console.log(results.next()); 
// {"value":{"name":"Brubaker","city":"Seattle"},"done":false}

function* generator(i){
  yield i;
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 20

"use strict";

var marked0$0 = [generator].map(regeneratorRuntime.mark);
function generator(i) {
  return regeneratorRuntime.wrap(function generator$(context$1$0) {
    while (1) switch (context$1$0.prev = context$1$0.next) {
      case 0:
        context$1$0.next = 2;
        return i;

      case 2:
        context$1$0.next = 4;
        return i + 10;

      case 4:
      case "end":
        return context$1$0.stop();
    }
  }, marked0$0[0], this);
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 20