{ ECMAScript 2015 }

Es el único lenguaje en el que me doy cuenta que las personas sienten que no necesitan aprenderlo antes de empezar a utilizarlo.

Douglas Crockford

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
Edición Fecha de publicación Cambios desde la edición anterior
1 Junio de 1997 Primera edición
2 Junio de 1998 Cambios editorales para mentener la especificación completa alineada con el estándar internacional ISO/IEC 16262
3 Dicembre de 1999 Se agregaron expresiones regulares, mejor manejo de strings, nuevo control de declaraciones, manejo de excepciones con try/catch, definición más estricta de errores, formato para la salida numérica y otras mejoras.
4 Abandonado La cuarta edición fue abandonada debido a diferencias políticas respecto a la complejidad del lenguaje. Muchas características propuestas para la cuarta edición fueron completamente abandonadas; algunas fueron propuestas para la edición ECMAScript Harmony.
5 Diciembre de 2009 Agrega el modo estricto ("strict mode"), un subconjunto destinado a proporcionar una mejor comprobación de errores y evitar constructores propensos a errores. Aclara varias ambigüedades de la tercera edición, y afina el comportamiento de las implementaciones del "mundo real" que difieren consistentemente desde esa especificación. Agrega algunas nuevas características, como getters y setters, librería para el soporte de JSON, y una más completa reflexión sobre las propiedades de los objetos.
Edición Fecha de publicación Cambios desde la edición anterior
5.1 Junio de 2011 Esta edición 5.1 de la ECMAScript Standard está completamente alineada con la tercera edición del estándar internacional ISO/IEC 16262:2011.
6 Junio de 2015 La sexta edición agrega cambios significativos en la sintaxis para escribir aplicaciones complejas, incluyendo clases y módulos, definiéndolos sémanticamente en los mismos términos del modo estricto de la edición ECMAScript 5. Otras nuevas características incluyen iteradores for/of loops, generadores y generador de expresiones estilo Python, funciones de dirección, datos binarios, colecciones (mapas, sets, mapas débiles), y proxies (?metaprogramación para objetos virtuales y wrappers). Al ser la primera especificación “ECMAScript Harmony”, es también conocida como “ES6 Harmony”.
7 En progreso La séptima edición está en una etapa muy temprana de desarrollo, pero está orientada a continuar con la reforma del lenguaje, aislamiento de códigos, control de efectos y librerías/herramientas habilitadas desde ES6. Nuevas características propuestas incluyen promesas/concurrencia, matemáticas y datos numéricos mejorados, guards y trademarks (una alternativa al tipado estático), sobrecarga de operadores, value types (first-class number-like objects), nuevas estructuras de registro (registros, tuples y vectores tipados), pattern matching, y traits.

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

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

Recursos

UI Engineer at @SUIEnginners

#HTML5 #CSS3 #SASS #Javascript

#PostCSS #AtomEditor #Games

 

ECMAScript 2015

By Joan León

ECMAScript 2015

  • 2,427
Loading comments...

More from Joan León