UNA TAPA DE ECMASCRIPT 6EL JAVASCRIPT QUE VIENE... ;-)

EDUARD TOMÀS - PASIONA

@EIXIMENIS

HTTP://GEEKS.MS/BLOGS/ETOMAS

HTTP://WWW.PASIONA.COM

UN POCO DE HISTORIA

• Inventado por Brendan Eich para Netscape

• Inicialmente basado en Scheme (dialecto de lisp)

• Migró a una sintaxis “tipo C” y se llamó LiveScript

• Renombrado a JavaScript después del acuerdo con Sun(1995)

UN POCO DE HISTORIA

• Microsoft lo “copia” y lanza Jscript

• Otros navegadors lo “copian” y mantienen el nombre JavaScript

• El 1997 es estandarizado como ECMAScript

ECMASCRIPT

• 1: Primera versión (1997)

• 2: Retoques para adaptarse a la ISO (1998)

• 3: Primera revisión (expresiones regulares, try/catch,...) (1999)

• 4: Versión abandonada

• 5: Segunda revisión (strict mode, get/set, ....) (2009)

• 5.1: Retoques para adaptarse a la ISO (2011)

• 6 (Harmony): WIP

• 7: WIP

ECMASCRIPT 6

• JavaScript es un lenguaje de espíritu funcional atrapado en un cuerpo procedural

• ES6 hace especial enfásis en las capacidades funcionales del lenguaje

• Implementación en los navegadores: En progreso -http://kangax.github.io/compat-table/es6/

1 - SCOPES LOCALES Y CONSTANTES

• Definir una variable con let en lugar de var la define en el scope local

• Definir una variable con const define una constante

• let no aplica hoisting

2 - DESTRUCTURING

• Array patern

• let [a, b, c] = [10, 20, “30”];

• Válido en retornos de funciones

• Object pattern

• let {a: pa, b: pb} = {a: 10, b:30};

3 - PARÁMETROS X DEFECTO & REST (AKA VARIADIC)

• No más tests de undefined

• function foo(a, b=10)

• function variadic(a,b,...v)

4 - OPERADOR SPREAD

• Convierte un objeto/array en n parámetros

• Extremadamente potente combinado con apply

• x.f(...a) === f.apply(x, a);

5 - OPERADOR ARROW (AKA LAMBDA FUNCTIONS)

• Simplifica la definición de funciones inline

(a) => a*a equivale a

(function(a) { return a*a;}).bind(this);

6 - SHORTHAND OBJECT LITERAL

• Al crear un objeto se puede omitir el nombre de la propiedad si esta coincide con el de la variable a partir de la cual se crea.

• ES5 {url: url, method: ‘POST’}

• ES6: {url, method:’POST’}

7 – ITERADORES, ITERABLES

• Iterador: Objecto con método next() que devuelve tuplas{done, value} (bool, tipo)

• Iterable: Objeto que contiene el método iterator() que devuelve un iterador

8 – FOR..OF

• Nuevo bucle para iterar sobre iterables.

• Itera una vez sobre cada uno de los valores del iteradordevuelto por el iterable.

9 – GENERATORS (CORUTINAS)

• function* para crear un generador

• Usar yield para devolver un valor y permitir la reentrada

• Un generador es un iterador y es un iterable

• Un generador se lee una sola vez (luego el iterador ya ha sido consumido)

10 – MAPS & SETS

• Diccionarios clave, valor.

• Los objetos de JS se comportan como mapas salvo que las claves son convertidas a cadenas. En los Maps eso no ocurre

• Son iterables (for..of)

• Maps: Diccionarios clave, valor. Método has va por clave.

• Sets: Conjunto de valores. Método has va por valor.

11 - CLASES

• ES6 ofrece clases pero eso no convierte al lenguaje en estático

• Las clases de ES6 son syntax sugar sobre los prototipos

• Se definen con class y se insancian con new

11 - CLASES

11 – CLASES (II)

• Herencia entre clases con extends

• Se pueden redefinir métodos de clase base (simplementeredeclarándolos).

• Se puede usar super() para llamar a la implementación de la clase base.

12 - PROXIES

• Permite modificar la semántica de un objeto existente de forma “transparente”.

• Permiten escenarios de AOP.

13 - PROMISES

• Una promise es un objeto que representa una tarea a ser realizada en un futuro.

• Muy usadas en JavaScript, pero no eran nativas. Cada librería usaba su propia implementación

• ES6 las incorpora de série, basándose en el estàndard A+

14 - MÓDULOS• Actualmente dos sistemas de módulos no natives tienen

preferència

• AMD

• Asíncrono, Navegador, No soporta referencias circulares

• CommonJS

• Síncrono, Servidor (Aka Node), Soporta referencias circulares

14 - MÓDULOS

• ES6 incorpora de forma nativa un sistema de módulos

• Síncrono / asíncrono

• Sintaxis todavía más compacta que la de CommonJS

14 - MÓDULOS

• Definición

14 - MÓDULOS

• Uso: import * importa todos los exports del módulo en un espacio de nombres

• Uso: Los exports del módulo se important en un objeto local

14 - MÓDULOS

• Un módulo puede exportar por defecto un solo elemento(muy común tanto en nodejs como en frontend)