Angular 2 | Conceptos previos, parte 4

Introducción a ES6

ES6, ECMAScript 6 o ES2015 es el standar de Javascript vigente a partir del 2015. En la actualidad hay mayor soporte por parte de algunos navegadores, pero aún el soporte no es total, por este motivo existen los transpiladores, que se encargan de convertir el código ES6 al estándar anterior.

Novedades

let

Permite declarar variables y limitar su alcance al bloque donde fué declarada.

Las diferencias con var son que esta última tiene como alcance su función contenedora y no es elevada a la parte superior del bloque (var si lo hace).

const

Esto es para declaración de contantes.

Objetos

Se introduce una mejora o atajo en la creación de objetos cuando la propiedad tiene el mismo nombre que la variable usada como valor.

ES5

ES6

Asignación desestructurada

Es un atajo para asignar variables desde objetos o arrays.

ES5

ES6

Ejemplo con array

Parámetros por defecto

Permite llama a una función con cualquier cantidad de argumentos, si se pasan más argumentos que los declarados, los sobrantes se ignoran, si se pasan menos, éstos serán seteados como undefined.

La definición de parámetros por defectos es como en cualquier lenguaje, podemos destacar que el valor por defecto puede ser una función:

Operador rest

Lo que hace es recoger múltiples elementos y los condensa en uno solo. En ES5 lo podemos hacer con la variable arguments, pero es ES6 lo declaramos nosotros explicitamente.

De forma similar se puede usar el operador de propagación (spread) que hace lo opuesto al rest, toma un array y lo descompone en N variables. Puede ser confundido ya que la sintaxis es la misma:

OOP

Se incorpora orientación a objetos nativa, clases, herencia, métodos estáticos, etc, etc…

Promises

Simplifican la programación asíncrona, no es una nueva funcionalidad como tal, sino que se reestructura la forma de hacerlo, que más sencillo de leer.

En ES5 tenemos que usar callbacks, ir llamando a funciones luego de que termina un llamado asíncrono.

En ES6, con las promises quedaría así:

Las promises son objetos de la clase Promise, la cual recibe 2 argumentos, un callback en caso de éxito, y otro en caso de fallo.

Otra cosa útil que tiene este objeto es el manejo de errores, en este ejemplo lo declaramos particular por cada promesa:

En este ejemplo lo declaramos general para toda la cadena de promesas, cualquiera que falle irá al catch:

Arrow functions

Recibe el nombre por su sintaxis:

Como vemos, si el argumento es único podemos enviarlo sin parentesis, en caso de que haya más de uno tendremos que usarlos. Otra cosa opcional es el bloque de código en el caso de que sea una operación simple, caso contrario deberemos usarlo. También podríamos declarar una función sin parámetros con los paréntesis vacios.

Lo que logramos en cualquiera de los casos es declarar una función que luego la podemos invocar de la forma que estamos acostumbrados:

Más allá de simplificar el código, hay un uso funcional, y es el de tener un mejor control del this, por ejemplo:

El error se debe a que estamos intentando acceder al método doSomething del objeto, pero en ese ámbito, this está haciendo referencia a document, por lo que el método buscado no existe.

Una solución podría ser bindear (ligar, asociar) el this de la función al this actual, que en este caso es el del pageHandler.

Esto lo podemos resolver mejor con las arrow functions, el valor de this dentro de estas funciones es igual al entorno donde fueron definidas. Por lo que, en el ejemplo, vemos que es definida dentro del pageHandler.

Hay ciertos casos donde no debemos usar estas funciones:

1 -Cuando se necesite acceder a argumentos dinámicos, ya que las arrow functions no exponen el objeto arguments:

2- Uso como método. Sabemos que los métodos son funciones que están asociadas a un objeto, y dependen del valor correcto de this para poder hacer su trabajo.

3- Uso como constructor

4- En funciones generador (nuevo tipo de funciones), ya que la palabra clave yield (de la que se valen estas funciones) no está permitida en funciones arrow.

Template literals

Podemos usar una sintaxis dentro de comillas invertidas ( ` ) para concatenar variables.

ES5

ES6

Estas comillas también nos permiten usar strings multilinea:

ES5

ES6

Módulos

Se incorpora de forma nativa (en ES5 se podía hacer con RequireJS por ejemplo) la organización de funcionalidades en módulos.

A través de export exponer librerías, funciones o valores y con import podemos incluirlos donde necesitemos.

races_service.js

app.js

Podemos usar alias al importar, y un wilcard (*) para importar todo lo que contiene el archivo:

Con esto terminamos la introducción a Angular intentando refrescar y reforzar conceptos que quizá ya dominaban o incluso desconocían.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *