Descripción de las novedades más significativas incorporadas en EcmaScript6

1. UNA TAPA DE ECMASCRIPT 6
EL JAVASCRIPT QUE VIENE... ;-)
EDUARD TOMÀS - PASIONA
@EIXIMENIS
HTTP://GEEKS.MS/BLOGS/ETOMAS
HTTP://WWW.PASIONA.COM

2. 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)

3. 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

4. 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

5. 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/

6. 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

7. 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};

8. 3 - PARÁMETROS X DEFECTO & REST (AKA VARIADIC)
• No más tests de undefined
• function foo(a, b=10)
• function variadic(a,b,...v)

9. 4 - OPERADOR SPREAD
• Convierte un objeto/array en n parámetros
• Extremadamente potente combinado con apply
• x.f(...a) === f.apply(x, a);

10. 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);

11. 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’}

12. 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

13. 8 – FOR..OF
• Nuevo bucle para iterar sobre iterables.
• Itera una vez sobre cada uno de los valores del iterador
devuelto por el iterable.

14. 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)

15. 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.

16. 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

17. 11 - CLASES

18. 11 – CLASES (II)
• Herencia entre clases con extends
• Se pueden redefinir métodos de clase base (simplemente
redeclarándolos).
• Se puede usar super() para llamar a la implementación de la
clase base.

19. 12 - PROXIES
• Permite modificar la semántica de un objeto existente de
forma “transparente”.
• Permiten escenarios de AOP.

20. 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+

21. 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

22. 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

23. 14 - MÓDULOS
• Definición

24. 14 - MÓDULOS
• Uso: Los exports del módulo se important en un objeto local
• Uso: import * importa todos los exports del módulo en un
espacio de nombres

25. 14 - MÓDULOS
• Un módulo puede exportar por defecto un solo elemento
(muy común tanto en nodejs como en frontend)