ES6 == ES2015

ECMAScript

ECMA-262
ISO 16262

¿Qué es ESCMAScript?

• ECMAScript es el nombre del estándar internacional que define JavaScript
• Definido por un comité técnico (TC-39) de ecma international.
• Identificado como Ecma-262 y ISO/IEC 16262
• No es parte del W3C

Novedades en ES2015

let

(function() {
    let x = 'Hola Dani';
    
    if(true) {
        let x = 'Hola Joan';
    }
    console.log(x);  // Imprime en consola Hola Dani
})();

const

(function() {
    const HELLO = 'hello world';
    HELLO = 'hola mundo';
    // Dará ERROR, ya que es de sólo lectura
})();

(function() {
    const PI;
    PI = 3.15;
    // Dará ERROR, ya que ha de asignarse un valor en la declaración
})();

Plantillas de cadenas de texto

// ES5

var hello = 'Hola Mundo';

// ES6

let hello = `Hola Mundo`;

Cadenas de texto de varias líneas

// ES5

var text = ['En un lugar', 
            'de la mancha,', 
            'de cuyo nombre', 
            'no quiero acordarme'].join('\n');

// ES6

var quijote = `En un lugar
 de la mancha, 
 de cuyo nombre
 no quiero acordarme`;

Interpolación de parámetros en plantillas de cadenas de texto

// ES5

var joan = {
    name: 'Joan',
    age: 41
};

var greet = function(person) {
    return 'Hello! My name is ' + person.name + 
           ' and I\'m ' + person.age + ' years old';
};

greet(joan);

Interpolación de parámetros en plantillas de cadenas de texto

// ES6

var greet = function(person) {
    return `Hello! My name is ${person.name} and I'm ${person.age} years old`;
};

// ES6

let myAge = `Mi edad es ${person.age + 3} años`;

Desestructuración de Arrays

var numbers = ["1", "2", "3"];

// without destructuring
const one   = foo[0];
const two   = foo[1];
const three = foo[2];

// with destructuring
var [one, two, three] = foo;

Desestructuración de objetos

// ES6

var persona = {nombre: 'Joan', apellidos: 'León'};
var {nombre, apellidos} = persona;

console.log(nombre); // Joan
console.log(apellidos); // León

// ES6

var persona = {nombre: 'Joan', apellidos: 'León'};

var {nombre: name, apellidos: surname} = persona;

console.log(name); // Joan
console.log(surname); // León

Parámetros por defecto en funciones

// ES5

function drawCircle(options) {
    options =  options || {};
    var radius = options.radius || 30;
    var coords = options.coords || { x: 0, y: 0 };

    console.log(radius, coords);
    // finally, draw the circle
}

Parámetros por defecto en funciones

// ES6

function drawCircle({radius = 30, coords = { x: 0, y: 0}} = {}) {
    console.log(radius, coords);
    // draw the circle
}


drawCircle();
// radius: 30, coords.x: 0, coords.y: 0 }

drawCircle({radius: 10});
// radius: 10, coords.x: 0, coords.y: 0 }

drawCircle({coords: {y: 10, x: 30}, radius: 10});
// radius: 10, coords.x: 30, coords.y: 10 }

Operador de propagación

// ES6

const values = [1, 2, 3, 4];

console.log(values); // [1, 2, 3, 4]
console.log(...values); // 1 2 3 4

En la primera impresión por consola, enviamos directamente el array a la función log. En cambio, en la segunda, descomponemos el array en un conjunto de parámetros que se pasan como argumentos a la función log, así que imprime cada valor directamente.

Operador de propagación

// ES5

var f = function(x, args) {
    return x + args.length;
};

var parameters = [ "hello", true ];
console.log(f(3, parameters)); // 5

// ES6

var f = function (x, ...y){
  return x + y.length;
};

console.log(f(3, "hello", true)); // 5

Arrow functions

// ES5

var echo = function(text) {
    return text;
};

// ES6

const echo = text => text;

console.log(echo('Hola Desarrolloweb!')); // Hola Desarrolloweb!

Arrow functions

// ES6

const sum = (a, b) => a + b;
console.log(sum(1, 1)); // 2

// ES6

const greet = () => 'ES6 mola!';
console.log( greet() ); // ES6 mola!

Arrow functions

// ES6

const expand = (rectangle) => {
    rectangle.x += 10;
    rectangle.y += 20;
    return rectangle;
};

var rectangle = { x: 1, y: 2 };

console.log( expand(rectangle) ); // {x: 11, y: 22}

Classes

// ES6

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

var p = new Point(25, 8);
p.toString(); //(25, 8)

Módulos

//File: lib/curso.js

export function curso(nombre) {
    return nombre;
};

// export default function(nombre) {...};

//File: app.js

import { curso } from './curso';  
var app = {  
    hangout: function() {
        curso('ES6');
    }
}
export app;  

Promesas

// ES5
function msgAfterTimeout (msg, who, timeout, onDone) {
    setTimeout(function () {
        onDone(msg + " Hello " + who + "!");
    }, timeout);
}
msgAfterTimeout("", "Foo", 100, function (msg) {
    msgAfterTimeout(msg, "Bar", 200, function (msg) {
        console.log("done after 300ms:" + msg);
    });
});

// ES6
function msgAfterTimeout (msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
    })
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
    msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
    console.log(`done after 300ms:${msg}`)
})

• Símbolos
• Iteradores
• Generadores
• Colecciones
• Proxies
• Reflection
• Decoradores

Soporte

ECMAScript compatibility table

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

var p = new Point(25, 8);
p.toString();

ES6

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Point = (function () {
    function Point(x, y) {
        _classCallCheck(this, Point);

        this.x = x;
        this.y = y;
    }

    _createClass(Point, [{
        key: "toString",
        value: function toString() {
            return "(" + this.x + ", " + this.y + ")";
        }
    }]);

    return Point;
})();

var p = new Point(25, 8);
p.toString();

ES5

babeljs.io