ECMAScript 2015

con node.js

+GonzaloRuizdeVilla

@gruizdevilla

Node.js Madrid & other places

Noviembre 2014

ECMAScript

a.k.a. su implementación como JavaScript

¿Qué aporta ES6?

Cuando ves otro lenguaje y ... 

Algunas características nuevas

• (fat) arrow functions
• Const
• Let
• Default function parameters
• Rest parameters
• Spread
• class
• super
• for of
• generators
• Map
• Set
• desestructuración
• ...

node.js soporta ES6

Pero hay que usar flags....

--harmony

--harmony_generators
--harmony_collections 
--harmony_proxies
--harmony_modules
--harmony_scoping
--harmony_observation
--harmony_symbols
--harmony_iteration

Transpilers

Source to source compilers

gulp.task('traceur', function () {
    return gulp.src(path.srcAndTest)
        .pipe(traceur({
          sourceMap: true,
          blockBinding: true
        }))
        .pipe(gulp.dest('dist'));
});

Tarea de gulp.js

(Fat)
Arrow
Functions

    var suma = (a, b) => a + b;
    expect( suma(1,2) ).toBe(3);
    
    expect( [1, 2, 3].reduce(suma) ).toBe(6);

    expect( [1, 2, 3].map(()=>  1) ).toEqual([1, 1, 1]);

    expect( [1, 2, 3].map((x)=> x + 1) ).toEqual([2, 3, 4]);

    expect( [1, 2, 3].map( x => x + 1) ).toEqual([2, 3, 4]);

El cuerpo puede ser:

• Una expresión. Se devuelve el valor.
• Una secuencia de declaraciones entre llaves. Hay que devolver valor de forma explícita.

    //declaraciones
    expect( [1, 2, 3].map(
      x => {
        var y = x + 1;
        return y * 2;
      }
    )).toEqual([4, 6, 8]);

    //una expresion
    expect( [1, 2, 3].map( 
      (x, y) => (y = x +1, y * 2) 
    )).toEqual([4, 6, 8]);

Lexical this

Bye, bye bind! (al menos en algunos casos)

      function Person() {
        this.age = 0;
        this.grow = () => this.age++;
      }
      var pedro = new Person();
      var grow = pedro.grow;
      for(var i = 0; i < 10; i++){
        grow();
      }
      expect(pedro.age).toBe(10);

Block scoped binding

const  para constantes

    // intercambiando valores sin hacer "leaking"
    // de variables auxiliares
    {
      const tmp = a;
      a = b;
      b = tmp;
    }

comprehensions

comprehensions:

Como construir un array fácilmente a partir de otro(s)

(Esto se va para 2016 como mínimo...)

forma simple

      var array = [for (x of [0, 1, 2]) x * 2];
      expect(array).toEqual([0, 2, 4]);

      var ABC = ["A", "B", "C"];
      var abc = [for (x of ABC) x.toLowerCase()];
      expect(abc).toEqual(["a", "b", "c"]) ;

forma combinada

      var nombres = ["Ana", "Elena", "Angel"];
      var apellidos = ["Gomez", "Perez"];
      var pax = [for (x of nombres) for (y of apellidos)  x + " " + y];
      expect(pax).toEqual([
        "Ana Gomez",
        "Ana Perez",
        "Elena Gomez",
        "Elena Perez",
        "Angel Gomez",
        "Angel Perez"
      ]);

como crear matrices con dos vectores

    var vector1 = [ 1, 2, 3 ];
    var vector2 = [ 3, 5, 7 ];
    var matrix = [for (i of vector1) [for (j of vector2) i * j]];
    expect(matrix).toEqual([
      [3,  5,  7],
      [6, 10, 14],
      [9, 15, 21]
    ]);

comprensiones con guardias

a.k.a. compresiones con ifs

   var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
   var twoDigitYear = [for (year of years) if (year > 2000) year - 2000];
   expect(twoDigitYear).toEqual([6, 10 ,14]);

resumen de comprensiones

    [for (x of iterable) x]
    [for (x of iterable) if (condition) x]
    [for (x of iterable) for (y of iterable) x + y]

for of

Lo que hemos visto es el uso de un iterador que recorre un contenedor.

Podemos definir los nuestros propios. 

a mano (con un objeto que devuelva Symbol.iterator)

    function pares(max) {
      return {
        [Symbol.iterator]: function() {
          var current = 0;
          return {
            next: function() {
              current += 2;
              var end = max < current;
              return {
                value: end ? undefined : current,
                done: end
              };
            }
          };
        }
      };
    }

    expect([for (x of pares(10)) x]).toEqual([2,4,6,8,10])

con generadores es más compacto

Y puedes poner varios "yield" dentro de la función

    function* pares(max) {
      var current = 2;
      while(!(max < current)){
        yield current;
        current +=2;
      }
    }

    expect([for (x of pares(10)) x]).toEqual([2,4,6,8,10])

Y se pueden evaluar a lo "lazy"

pares() es ahora infinito

    function* pares() {
      var current = 2;
      while(true){
        yield current;
        current +=2;
      }
    }

    // no hemos definido máximo, la lista es infinita

    var res = (for (par of pares()) par);
    expect(res.next().value).toBe(2)
    expect(res.next().value).toBe(4)

take some

trabajando con iterables infinitos (o no...)

      function* take(iterable, number){
        var count = 0;
        for(var taken of iterable){
          if (++count >number){
            return;
          }
          yield taken;
        }
      }
      expect([for (x of take(pares(),5)) x])
      .toEqual([2,4,6,8,10]);

Strings

"Desestructurando" listas

    var [uno,,tres] = [1,2,3];
    expect(uno + tres).toEqual(4);


    var [a, [b, c], [d]] = ['hola', [', ', 'ejem'], ['mundo']];
    expect(a + b + d).toEqual('hola, mundo');

"Desestructurando" objetos

  function getPersona(){
      return {
          nombre: 'Sarah',
          apellido: 'Palmer',
          edad: 38,
          email: 'sara@palmer.me' 
      }
  }
  
  var {nombre, email} = getPersona();
  
  expect(nombre).toEqual('Sarah');
  expect(email).toEqual('sara@palmer.me');

"Desestructurando" everywhere

      
      function printName({nombre, apellido}){
          return nombre + " " + apellido;
      }
      
      var printedName = printName(getPersona());
      
      expect(printedName).toEqual("Sarah Palmer");

"Desestructurando" everywhere

    var personas = [
      {nombre: 'Pedro', apellido: 'Palmer'},
      {nombre: 'Pepa', apellido: 'Palmer'},
      {nombre: 'Paula', apellido: 'Palmer'},
      {nombre: 'Pablo', apellido: 'Palmer'}
    ]

    var nombres = personas.map(({nombre}) => nombre);

    expect(nombres).toEqual(['Pedro', 'Pepa', 'Paula', 'Pablo'])

"Desestructurando" everywhere

    var arr =  [
       {x:1, y:2},
       {x:2, y:3}
    ];

    var arr2 = arr.map(({x,y}) => x + y);

    expect(arr2).toEqual([3,5]);

"Desestructurando" everywhere

    var point = new Singularity(0,1,0, {mass:10});

    var {x,y,radius, theta, properties: {mass}} = point;

    expect(x).toEqual(0);
    expect(y).toEqual(1);
    expect(radius).toEqual(1);
    expect(theta).toEqual(Math.PI/2);
    expect(mass).toEqual(10);

Clases

	class Point {
		constructor(x,y){
			this.x_ = x;
			this.y_ = y;
		}
		get y(){
			return this.y_;
		}
		get x(){
			return this.x_;
		}

		get theta() {
		    return Math.asin(this.y_ / this.radius)
		}
		get radius() {
			return Math.sqrt(this.x_ * this.x_ + this.y_ * this.y_)
		}
	}

Definiendo la clase

Heredando

    class Point3D extends Point{
	constructor(x, y, z){
		super(x, y);
		this.z_ = z;
	}
	get radius() {
		return Math.sqrt(super.radius * super.radius + this.z_ * this.z_);
	}
        proyectionXY(){
		return new Point(this.x, this.y)
	}
		
    }

La singularidad...

    class Singularity extends Point3D {
        constructor(x, y, z, props = {mass:0, momento: 0}) {
	    super(x,y,z);
            this.properties = props;
        }
    }

Módulos

  // math.js
  export var suma = (a,b)  => a + b;
  export var e = Math.E;

  // app.js
  import * as math from 'math';

  expect( math.suma(1, 2) ).toBe(3);
  expect( math.e ).toBe(Math.E);

  // app.js
  import {suma, e} from 'math';

  expect( suma(1, 2) ).toBe(3);
  expect( e ).toBe(Math.E);

   import {Point, Point3D, Singularity} from '../puntos';

   var punto = new Point()

    export class Point {
        //..
    }

    export class Point3D extends Point{
        //...
    }


    export class Singularity extends Point3D {
        //...
    }

WeakMap

WeakSet

  //AVISO: no funciona con arrays con 'undefined' en alguna posición
  const reduce = 
    (fn, acc, [x, ...xs]) =>
      x === undefined ? acc
                      : reduce(fn, fn(acc, x), xs);

  //------------------------------------------------------//

  const map =
    (fn, xs) =>
      reduce(
        (acc, x) => [...acc, fn(x)],
        [],
        xs
      );

  var oneArr = [1];
  var addOne = (arr) => oneArr.concat(arr);
  var sum = (a,b) => a + b;

  var thousandOnes = reduce(addOne, [], new Array(1000));
  expect(reduce(sum, 0, thousandOnes)).toEqual(1000);

Prometiendo

  function timeout(ms) {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  }

  timeout(10).then(() => done());

Promesas nativas

Simplificando el código asíncrono:
async & await

Una función "async" puede contener expresiones "await".

El operando de un "await" se trata como una Promesa, y cuando esta se completa la ejecución continúa.

  function timeout(ms) {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  }

  async function asyncValue(value) {
    await timeout(50);
    return value;
  }

  (async function() {
    var value = await asyncValue(42)
                      .catch(console.error.bind(console));
    assert.equal(42, value);
    done();
  })();

ECMAScript Tools by @addyosmani

https://github.com/addyosmani/es6-tools

• Transpilers
• Grunt, Gulp & Broccoli tasks
• Module Loaders
• Boilerplate
• Code Generation
• Polyfills
• Editores
• Parsers
• y mas...

ECMAScript 6 compatibility table

http://kangax.github.io/compat-table/es6/