Why should I care... now?

• JavaScript is currently being used in contexts it was not design for
• Important dates:
  • Aug 2014: Feature frozen
  • Dec 2014: ECMA approval
  • Mar 2015: Publication starts
  • Mar 2015: Formal publication
• ES6 is coming... :O

ES6 is already amongst us

Usefull references to Try Es6

• 6to5.org
• ES6Fiddle.net
• CodePen.io:
  • Traceur option in Javascript options
• Node.js:
  • --harmony option (only in current dev branch)
• io.js:
  • Since it uses the latest versions of V8
  • --harmony option for staged (almost complete) features
  • --harmony-feature option:
    • --harmony-generators
    • --harmony-arrow-functions

let is the new var

(function scope() {
  if (true) {
    var tmp1 = 1;
    let tmp2 = 2;
  }
  console.log(tmp1); // '1' -> http://jslinterrors.com/a-used-out-of-scope
  console.log(tmp2); // ReferenceError: tmp2 is not defined
})();

console.log(tmp1); // ReferenceError: tmp1 is not defined

• Block scope:

• Array destructuring:

let is the new var

let obj = {first: 'Jander', last: 'Klander'};
console.log(JSON.stringify(obj)); // '{"first":"Jander","last":"Klander"}'

let {first: g, last: f} = obj; // Destructuring the object
console.log(g + ' ' + f); // 'Jander Klander'

let {first, last} = obj; // Shorthand: {x, y} <-> {x: x, y: y}
console.log(first + ' ' + last); // 'Jander Klander'

• Object destructuring:

• Multiple return values:

let: TO HOIST OR NOT TO HOIST

function print() {
  var text = 'Just some text';
  console.log(text);
}
print();
// Just some text

let is the new var: EXERCISE 1

// Create a loop which sets 10 timeouts at random times and print by the
//  console the position at which each one was set when run.

// 4
// 2
// 6
// 3
// 5
// 7
// 8
// 10
// 1
// 9

let is the new var: EXERCISE 2

// Create a block scope in ECMAScript 5 and compare it to how it can be done
//  now in ECMAScript 6.

Function arguments

var total = 0;

// It can be an expression, and can have side effects :)
function sum(a=0, b=total*2, c=++a) {
  return total = a+b+c;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2)); // 6 -> WAAAT???
console.log(sum(1)); // 16
console.log(sum()); // 34

• Default values:

• Rest arguments:

Function arguments

function sum(a, {v1: b, v2: c}) {
 return a + b + c; 
}

console.log(sum(1, {v1: 2, v2: 3})); // 6

• Named arguments:

Function arguments: EXERCISE

// Create a function which adds (pushes) the elements of an array at the end of
//  another array and returns the new array using the spread operator:
console.log(push([1, 2], [3, 4, 5])); // [1, 2, 3, 4, 5]

Arrow functions

• Special type of function:
  • Bound (lexical) this
  • It cannot be used as a constructor
  • No arguments variable

Arrow functions: EXERCISE

// Use an arrow function to calculate the sum of all the elements in an array.
console.log(sum([1, 2, 3])); // 6

Promises: introduction

• Managing asynchrony in ECMAScript 5:
  1. Events:
     • Implement the EventTarget interface (front-end)
     • Inherit from the EventEmitter object (Node.js)
  2. Callbacks:
     • Continuation-passing style
     • Pyramid of doom or callback hell
     • Complex error handling
• Javascript de-facto standard for promises:
  • Promises/A+

Promises: basic concepts

• Promise:
  • Eventual result of an asynchronous operation
  • Registration of callbacks:
    • Result is available (resolve)
    • Error (reject)
  • Possible states:
    • Pending
    • Settled (cached value or reason):
      • Fulfilled
      • Rejected

Promises: production & consumption

• Promise production:

var promise = new Promise(function executor(resolve, reject) {
    ...
    if (...) { resolve(value); } else { reject(reason); }
});

Promises: COMPOSITION

• Promise.all():

Promise.all([promise1, promise2, value1, thenable1, ..., promiseN])
    // Returns a promise.
    // values and thenables are converted into promises.
    .then(function(arrayOfValues) { /* All are fulfilled with value */ })
    .catch(function() { /* First rejection from promises */ });

Promises: examples

• Examples:

// Delaying an activity.
function delay(ms) {
    return new Promise(function(resolve) {
        setTimeout(resolve, ms);
    });
}
delay(3000).then(
    function() { console.log('After 3 seconds'); }
);

Iterators

• Object that provides a next() function which returns the next item in the sequence:
  • {done: true|false, value: nxt_value}
  • It can optionally raise a StopIteration exception when the sequence is exhausted

Iterators

function ObjectIterator(entries) {
  this.entries = entries;
  this.keys = Object.keys(this.entries);
  this.current = -1;
}

ObjectIterator.prototype.next = function next() {
  this.current++;
  if (this.current < this.keys.length) {
    let key = this.keys[this.current],
        value = this.entries[key];
    return {done: false, value: [key, value]};
  } else {
    return {done: true};
  }
};

let pairs = {'first': 1, 'second': 2, 'third': 3};

let iter = new ObjectIterator(pairs);

console.log(iter.next()); // {done: false, value: ['first', 1]}
console.log(iter.next()); // {done: false, value: ['second', 2]}
console.log(iter.next()); // {done: false, value: ['third', 3]}
console.log(iter.next()); // {done: true}

• Object iterator:

Iterators

function ArrayIterator(array) {
  this.array = array;
  this.current = -1;
}

ArrayIterator.prototype.next = function next() {
  this.current++;
  if (this.current < this.array.length) {
    let key = this.current,
        value = this.array[key];
    return {done: false, value: [key, value]};
  } else {
    return {done: true};
  }
};

let elements = ['first', 'second', 'third'];
let iter = new ArrayIterator(elements);

console.log(iter.next()); // {done: false, value: [0, 'first']}
console.log(iter.next()); // {done: false, value: [1, 'second']}
console.log(iter.next()); // {done: false, value: [2, 'first']}
console.log(iter.next()); // {done: true}

// New array.entries() returns an iterable

• Array iterator:

of operator

let myArray = ['first', 'second', 'third'];

for (let entry of myArray) {
  console.log(entry);
  // first'
  // 'second'
  // 'third'
}

Generators

• Special kind of function that can be suspended and resumed via an iterator
• Cooperative vs Imperative
• function* name() <=> function *name()
• yield operator:
  • "resumable return"

Generators

setTimeout(function() {
  console.log('Am I late?');
});

for (let i = 0; i < 100; i++) {
  console.log('And ' + i + '...'); 
}

• Run-to-completion semantics:

Generators: Flow

Generators: Iterators

function *gen() {
  yield 1;
  yield 2;
  yield 3;
  // return 4; // Not considered if of operator
}

Generators: yield operator

// The generator function can take arguments.
function *foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var it = foo(5);

// Not sending anything into next() here.
console.log(it.next()); // {"value":6,"done":false}
console.log(it.next(12)); // {"value":8,"done":false}
console.log(it.next(13)); // {"value":42,"done":true}

Generators: Error handling

function *foo() {
  try {
    var x = yield 3;
    console.log('x: ' + x);
  } catch (err) {
    console.log('Error: ' + err );
  }
}

var it = foo();
console.log(it.next()); // {"value":3,"done":false}
it.throw('Oops!'); // Error: Oops!

Generators: Delegation

function *foo(val) {
  yield val; // Sent values pass through the delegation transparently
  yield ++val; // Sent values pass through the delegation transparently
  return ++val; // Returned value to the generator which delegates
}

function *bar() {
  yield 1;
  yield *foo(3); // Delegates iteration control to foo()
  yield 6;
}

for (var v of bar()) { // Possibility to pass values if next()
  console.log(v);
}
// 1 -> by bar
// 3 -> by foo
// 4 -> by foo
// 6 -> by bar

// Error handling as expected: just flows in and out generators

Generators: EXERCISE

// Print by the console the Fibonacci series (each element in the series is the
//  sum of the previous 2 elements) until certain value using generators and
//  iterators.
fibonacciUntil(1000); // 1 // 2 // 3 // ... // 610 // 987

Generators: Asynchronity

function getData(url, cb) {
  // Fetch data from URL
  cb(data);
}

function getURL(data) {
  // Process data to get URL
  return url;
}

getData('http://example.com',
  function(data) {
    let url2 = getURL(data);
    getData(url2, function(data2) {
      let url3 = getURL(data2);
      getData(url3, function(data3) {
        doSomething(data3);
      });
    });
  }
);

Generators: Promises

function request(url) {
  return new Promise(function (resolve, reject) {
    getData(url, resolve);
  });
}

function runGenerator(gen) {
  var it = gen(), ret;
  (function iterate(val) {
    let ret = it.next(val);
    if (!ret.done) {
      if ('this' in ret.value) {
        ret.value.then(iterate);
      } else {
        setTimeout(function() {
          iterate(ret.value);
        });
      }
    }
  })();
}

runGenerator(function *gen() {
  let data1 = yield request('http://example.com');
  let url2 = getURL(data1);
  let data2 = yield request(url2);
  let url3 = getURL(data2);
  let data3 = yield request(url3);
  doSomething(data3);
});

Generators: ECMAScript7

async function main() {
  var result1 = await request('http://some.url.1');
  var data = JSON.parse(result1);

  var result2 = await request('http://some.url.2?id=' + data.id);
  var resp = JSON.parse(result2);
  console.log('The value you asked for: ' + resp.value);
}

main();

PROXIES: INTRODUCTION

• Meta-programming feature
• Reflective meta-programming:
  • A program processes itself
  • Types:
    • Introspection:
      • Read-only access to the structure
      • Supported in Javascript
    • Self-modification:
      • Supported in Javascript
    • Intercession:
      • Redefining the semantics of some operations
      • Proxies in Javascript where created for this

PROXIES: TARGET & HANDLER

• new Proxy object
• Proxy properties:
  • target
  • handler -> placeholder object of traps (if no trap, forwarded to target)

handler.getPrototypeOf() // A trap for Object.getPrototypeOf.
handler.setPrototypeOf() // A trap for Object.setPrototypeOf.
handler.isExtensible() // A trap for Object.isExtensible.
handler.preventExtensions() // A trap for Object.preventExtensions.
handler.getOwnPropertyDescriptor() // A trap for Object.getOwnPropertyDescriptor.
handler.defineProperty() // A trap for Object.defineProperty.
handler.has() // A trap for the in operator.
handler.get() // A trap for getting property values.
handler.set() // A trap for setting property values.
handler.deleteProperty() // A trap for the delete operator.
handler.enumerate() // A trap for for...in statements.
handler.ownKeys() // A trap for Object.getOwnPropertyNames.
handler.apply() // A trap for a function call.
handler.construct() // A trap for the new operator. 

PROXIES: OBJECT EXAMPLE

let target = {};

let handler = {
  get: function(target, propKey, receiver) {
    console.log('Getting ' + propKey);
    return target[propKey]; // Reflect.get(target, propKey);
  },
  ownKeys: function(target) {
    console.log('Getting own keys...');
    return ['key1', 'key2']; // Reflect.ownKeys(target);
  }
};

let proxy = new Proxy(target, handler);

proxy.foo = 'bar'; // Getting foo
console.log(proxy.foo); // bar
console.log(Object.getOwnPropertyNames(proxy));
// Getting own keys...
// Array [ "key1", "key2" ]

PROXIES: FUNCTION EXAMPLE

let Person = function(name) { this.name = name; };

let personHandler = {
    apply(target, thisArg, argumentList) {
        console.log('Function called with ' + argumentList);
        return target.bind(this, ...argumentList);
    },
    construct(target, argumentList) {
        console.log('Instantiating Person' + ' with ' + argumentList);
        return new target(...argumentList);
    }
};

let PersonProxy = new Proxy(Person, personHandler);

PersonProxy('Paco'); // Function called with Paco
var person = new PersonProxy('Pepe'); // Instantiating Person with Pepe
console.log(person.name); // Pepe

PROXIES: REVOCABLE PROXIES

let target = {};

let handler = {
    get(target, propKey, receiver) {
        console.log('Getting ' + propKey);
        return target[propKey]; // Reflect.get(target, propKey);
    },
    ownKeys(target) {
        console.log('Getting own keys...');
        return ['key1', 'key2']; // Reflect.ownKeys(target);
    }
};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 'bar'; // Getting foo
console.log(proxy.foo); // bar

revoke();

console.log(Object.getOwnPropertyNames(proxy)); // TypeError: illegal operation
// attempted on a revoked proxy

PROXIES: USE CASES

• Data binding:
  • Updating the view when the model changes (MVC)
• Local placeholders that forward method invocations to remote objects
• Data access objects for databases: reading and writing to the object reads and writes to the database
• Profiling:
  • Intercept method invocations to track how much time is spent in each method
• Type checking:
  • handler.set(target, property, value, receiver)

PROXIES: EXERCISE

// Create a function called 'createArray' which allows the creation of Arrays
//  supporting negative indexes using a Proxy object, this is:
let arr = createArray('a', 'b', 'c');
console.log(arr[-1]); // c

Template strings

• Different kind of function call
• Mechanism for defining templates
• String literals allowing embedded expressions
• Syntactic construct which facilitates the implementation of DSL
• Simple syntax for creating data
• Strings enclosed by back-ticks (`...`)

Template strings

/* Multiline support */
console.log(`This is the first line
this is the second line`);

Template strings: EXERCISE

// Create a function called 'names2Table' which uses string templates to transform:
[
  { first: 'Jander', last: 'Klander' },
  { first: 'Chiquito', last: 'de la Calzada' }
]
// into:
<table>
  <tr>
    <td> Jander </td> <td> Klander </td>
  </tr>
  <tr>
    <td> Chiquito </td> <td> de la Calzada </td>
  </tr>
</table>

SYMBOLS

• New primitive type in Javascript
• Tokens that serve as unique and immutable identifiers

// Factory function 'Symbol' accepting an optional description.
var symbol1 = Symbol('description');
var symbol2 = Symbol('description');

console.log(symbol1.toString()); // __$187584550$10$__
console.log(symbol2.toString()); // __$163428317$11$__

// Symbols are unique.
console.log(symbol1 === symbol2); // false

SYMBOLS: WELL-KNOWN SYMBOLS

• Built-in symbols which represent internal language behaviours

// A method determining if a constructor object recognises an object as its instance.
Symbol.hasInstance
// A Boolean value indicating if an object should be flattened to its array elements.
//  Used by Array.prototype.concat().
Symbol.isConcatSpreadable
// A Boolean value indicating if an object may be used as a regular expression.
Symbol.isRegExp
// A method returning the default iterator for an object. Used by for ... of ... .
Symbol.iterator
// A method converting an object to a primitive value.
Symbol.toPrimitive
// A string value used for the default description of an object.
//  Used by Object.prototype.toString().
Symbol.toStringTag
// An Array of string values that are property values. These are excluded from the
//  with environment bindings of the associated objects.
Symbol.unscopables

SYMBOLS: WELL-KNOWN SYMBOLS EXAMPLE

let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]: function() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++]
          };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (let elem of obj) {
  console.log(elem);
}

// hello
// world

SYMBOLS: GLOBAL SYMBOL REGISTRY

• Symbols created using Symbol() are not globally unique or shared across the whole code base

// Creates a symbol available in a global symbol registry list.
Symbol.for('foo'); // Creates a new global symbol.
Symbol.for('foo'); // Retrieves the already created symbol.

// Same global symbol, but not locally.
Symbol.for('bar') === Symbol.for('bar'); // true
Symbol('bar') === Symbol('bar'); // false

// The key is also used as the description.
var globalSym = Symbol.for('bar');
console.log(globalSym.toString()); // Symbol(bar)

Modules

import objectName from 'file-name';
import {member} from 'file-name';
import {member as alias} from 'file-name';
import {member1, member2} from 'file-name';
import {member1, member2 as alias2, [...]} from 'file-name';
import objectName, {member [, [...]]} from 'file-name';
import 'file-name' as objectName;

export name1, name2, ..., nameN;
export *; 

Modules

// /lib/myModule.js
export default function(a, b) {
  return a+b;
}

OOP

• OOP:
  • Programming paradigm which creates models based on the real world
  • Benefits:
    • Simpler development (flexibility)
    • Easier understanding (maintainability)
• Javascript:
  • Object-oriented to its core
  • Prototype-oriented / instance-oriented / class-less
  • Every object is an instance of the Object object

BASIC TERMINOLOGY (I)

• Namespaces: 

var myNameSpace = myNameSpace || {};
myNameSpace.mySubNameSpace = myNameSpace.mySubNameSpace || {};

• Classes, constructors, properties and methods:

// In ECMAScript <= 5 there was no class statement :(
var Person = function(name) { this.name = name; };
Person.prototype.getName = function() { return this.name; };

BASIC TERMINOLOGY (II)

• Abstraction (composition and specialisation), inheritance (single, multiple via mixin), encapsulation: 

// In ECMAScript <= 5 there was no extends statement :(
var Person = function(name) { this.name = name; };
// Encapsulation:
Person.prototype.getName = function() { return this.name; };

Object literals

let human = {
  // New method-like syntax.
  think(about) { return 'Thinking about ' + about; }
};

Classes

class Human {
  // Constructor.
  constructor(fullName) {
    this.fullName = fullName;
  }
  // New method-like syntax.
  think(about) { return this.fullName + ' is thinking about ' + about; }
  static eats(anything) { return true; }
}

console.log(new Human('René Descartes').think('existence'));
// René Descartes is thinking about existence
console.log(Human.eats('meat')); // true

Classes: Inheritance

class Human {
  // Constructor.
  constructor(name) {
    this.name = name;
  }
  // New method-like syntax.
  think(about) {
    return this.name + ' is thinking about ' + about;
  }
}

Classes: Inheritance

// ECMAScript 5 equivalent

function HumanEC5(fullName) {
  this.fullName = fullName;
}
HumanEC5.prototype.think = function(about) {
  return this.fullName + ' is thinking about ' + about;
};

function ManEC5(fullName) {
  // Complex inheritance tracking
  HumanEC5.call(this, fullName); // No super calls
  this.gender = 'male';
}
ManEC5.prototype = Object.create(HumanEC5.prototype);
ManEC5.prototype.constructor = ManEC5;
ManEC5.prototype.party = function() {
  return HumanEC5.prototype.think.call(this, 'nothing'); // No super calls
};

console.log(new ManEC5('René Descartes').party());
// René Descartes is thinking about nothing

Classes: EXERCISE

// Create a class 'Shape' whose constructor takes the number of edges argument.
// Create a class 'Triangle' which extends 'Shape' and has a static method 'is'
//  which checks if the shape passed as argument is a Triangle.
// Create a class 'Square' which extends 'Shape' and has a static method 'is'
//  which checks if the shape passed as argument is a Square.

Standard library

• Map:
  • Iterable {key (any type): value (any type)}-based object
• Set:
  • Iterable collection of unique values (distinct types)
• WeakMap:
  • Iterable {key (only objects): value}-based object
  • Weak references to the keys (objects) -> Could be garbage collected if no other reference
• WeakSet:
  • Iterable collection of unique objects (only objects)
  • Weak references to the objects -> Could be garbage collected if no other reference

Standard library

• Object.is()
• Improved String manipulation:
  • codePointAt(), endsWith(), contains(), fromCodePoint(), normalize(), repeat(), startsWith()
• Improved Array manipulation:
  • copyWithin(), fill(), find(), findIndex(), keys(), entries(), values()
• Improved Number manipulation:
  • isFinite(), isInteger(), isNaN(), isSafeInteger(), parseFloat(), parseInt()
• Improved Math manipulation:
  • acosh(), asinh(), atanh(), ...

Standard library: EXERCISE (SET UNION)

// Create a function called 'union' which calculates the union of the Sets
//  passed as arguments.
union(set1, set2, set3);
// set1 ∪ set2 ∪ set3

Standard library: EXERCISE (SET intersection)

// Create a function called 'intersection' which calculates the intersection
//  of the Sets passed as arguments.
intersection(set1, set2, set3);
// set1 ∩ set2 ∩ set3

Standard library: EXERCISE (SET DIFFERENCE)

// Create a function called 'difference' which calculates the difference
//  between 2 sets.
intersection(set1, set2);
// set1 - set2, elements of set1 which are not in set2