UNA TAPA DE ECMASCRIPT 6 
EL JAVASCRIPT QUE VIENE... ;-) 
EDUARD TOMÀS - PASIONA 
@EIXIMENIS 
HTTP://GEEKS.MS/BLOGS/ETOMAS...
UN POCO DE HISTORIA 
• Inventado por Brendan Eich para Netscape 
• Inicialmente basado en Scheme (dialecto de lisp) 
• Mig...
UN POCO DE HISTORIA 
• Microsoft lo “copia” y lanza Jscript 
• Otros navegadors lo “copian” y mantienen el nombre 
JavaScr...
ECMASCRIPT 
• 1: Primera versión (1997) 
• 2: Retoques para adaptarse a la ISO (1998) 
• 3: Primera revisión (expresiones ...
ECMASCRIPT 6 
• JavaScript es un lenguaje de espíritu funcional atrapado en un 
cuerpo procedural 
• ES6 hace especial enf...
1 - SCOPES LOCALES Y CONSTANTES 
• Definir una variable con let en lugar de var la define en el 
scope local 
• Definir un...
2 - DESTRUCTURING 
• Array patern 
• let [a, b, c] = [10, 20, “30”]; 
• Válido en retornos de funciones 
• Object pattern ...
3 - PARÁMETROS X DEFECTO & REST (AKA VARIADIC) 
• No más tests de undefined 
• function foo(a, b=10) 
• function variadic(...
4 - OPERADOR SPREAD 
• Convierte un objeto/array en n parámetros 
• Extremadamente potente combinado con apply 
• x.f(...a...
5 - OPERADOR ARROW (AKA LAMBDA FUNCTIONS) 
• Simplifica la definición de funciones inline 
(a) => a*a equivale a 
(functio...
6 - SHORTHAND OBJECT LITERAL 
• Al crear un objeto se puede omitir el nombre de la 
propiedad si esta coincide con el de l...
7 – ITERADORES, ITERABLES 
• Iterador: Objecto con método next() que devuelve tuplas 
{done, value} (bool, tipo) 
• Iterab...
8 – FOR..OF 
• Nuevo bucle para iterar sobre iterables. 
• Itera una vez sobre cada uno de los valores del iterador 
devue...
9 – GENERATORS (CORUTINAS) 
• function* para crear un generador 
• Usar yield para devolver un valor y permitir la reentra...
10 – MAPS & SETS 
• Diccionarios clave, valor. 
• Los objetos de JS se comportan como mapas salvo que las 
claves son conv...
11 - CLASES 
• ES6 ofrece clases pero eso no convierte al lenguaje en 
estático 
• Las clases de ES6 son syntax sugar sobr...
11 - CLASES
11 – CLASES (II) 
• Herencia entre clases con extends 
• Se pueden redefinir métodos de clase base (simplemente 
redeclará...
12 - PROXIES 
• Permite modificar la semántica de un objeto existente de 
forma “transparente”. 
• Permiten escenarios de ...
13 - PROMISES 
• Una promise es un objeto que representa una tarea a ser 
realizada en un futuro. 
• Muy usadas en JavaScr...
14 - MÓDULOS 
• Actualmente dos sistemas de módulos no natives tienen 
preferència 
• AMD 
• Asíncrono, Navegador, No sopo...
14 - MÓDULOS 
• ES6 incorpora de forma nativa un sistema de módulos 
• Síncrono / asíncrono 
• Sintaxis todavía más compac...
14 - MÓDULOS 
• Definición
14 - MÓDULOS 
• Uso: Los exports del módulo se important en un objeto local 
• Uso: import * importa todos los exports del...
14 - MÓDULOS 
• Un módulo puede exportar por defecto un solo elemento 
(muy común tanto en nodejs como en frontend)
Próxima SlideShare
Cargando en…5
×

Una tapa de ecmascript 6

666 visualizaciones

Publicado el

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

Publicado en: Software

Una tapa de ecmascript 6

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. 11 - CLASES
  18. 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. 19. 12 - PROXIES • Permite modificar la semántica de un objeto existente de forma “transparente”. • Permiten escenarios de AOP.
  20. 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. 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. 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. 23. 14 - MÓDULOS • Definición
  24. 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. 25. 14 - MÓDULOS • Un módulo puede exportar por defecto un solo elemento (muy común tanto en nodejs como en frontend)

×