Actualización de JavaScript (Segunda parte)

Novedades del estándar ECMAScript 2015 y JavaScript

Revisamos las últimas novedades de la actualización ES2015 y analizamos las posibilidades que nos entrega el nuevo estándar de JavaScript para el desarrollo web.

La actualización del estándar ECMAScript 2015 incluyó varias mejoras y cambios en sintaxis y funcionalidades muy interesantes para los desarrolladores web que utilizan JavaScript.

Tal como señalamos en un artículo anterior, algunos de estos cambios son muy relevantes para aquellos que recién están comenzando a disfrutar del lenguaje que mueve la red. En esta ocasión, revisaremos las últimas funciones destacadas:

  1. Formas de declarar variables let y const.
  2. Nuevas formas de hacer loops. For … of
  3. Generadores
  4. Promesas

Nuevas (y mejores) formas de declarar variables let y const

Uno de los problemas con mayor tendencia a generar bugs en JavaScript es la manera en que el interpretador maneja la declaración de variables. Esto debido a que pocos desarrolladores JavaScript conocen que las declaraciones var se mueven automáticamente en runtime al principio de su scope, creando rarezas a la hora de chequear valores e incluso la existencia de la variable:

console.log( mi_variable ); // undefined
if( una_condicion ){
	var mi_variable = 1;
}

En el ejemplo anterior, intentamos mostrar en consola el valor de una variable aún no definida y que nos debería arrojar un error de referencia. Sin embargo, gracias a que el interpretador mueve las declaraciones var al principio del scope, la consola muestra undefined.

Tras la actualización del ES2015, los nuevos constructos let y const no sufren este problema, ya que ambos respetan el scope en donde fueron declarados.

La manera de usar estos nuevos constructos es:

  • let para declarar variables mutables.
  • const para declarar valores inmutables.

De esta manera si reescribimos el primer ejemplo, la consola nos arrojaría un error de referencia como es esperado:

console.log( mi_variable ); // error de referencia
if( una_condicion ){
	let mi_variable = 1;
}

Esto deja en el olvido el constructo var, y promueve el uso de let o const según el uso que se le dará a la variable.

Una nueva forma de hacer loops. For … of

En el área de la programación es común querer construir objetos o tomarlos por algún lado e iterar por cada una de las propiedades para poder realizar una u otra acción.

Para realizar esto, en versiones anteriores de JavaScript, tendríamos que usar un loop del tipo for … in que siempre ha presentado problemas graves de perfomance y no es recomendable, excepto en objetos pequeños. En el estándar ES2015, existe un nuevo tipo de loop para iterar objetos: for … of. En el siguiente ejemplo podemos ver su comparación:

ES5:

var mi_objeto = {
	prop_1 : 1,
	prop_2 : 2,
	prop_3 : 3
};

for( var prop in mi_objeto ){
	console.log(prop) // prop_1, prop_2, prop_3
	console.log(mi_objeto[prop]) // 1, 2, 3
}

ES2015:

let mi_objeto = {
	prop_1 : 1,
	prop_2 : 2,
	prop_3 : 3
};

for( let prop of mi_objeto ){
	console.log(prop) // prop_1, prop_2, prop_3
	console.log(mi_objeto[prop]) // 1, 2, 3
}

Además de la mejora en performance, este tipo de loops también están hechos para soportar los nuevos iteradores, como los Símbolos (Symbol), por lo que se recomienda su uso por sobre la forma anterior.

Generadores

Estas funciones fueron una de las inclusiones más esperadas en el nuevo estándar, ya que retornan a una instancia de un Generador dentro del cual se puede utilizar la directriz yield (expresión que guarda y devuelve un valor según la iteración).

Para controlar el flujo de iteración, los generadores ofrecen dos métodos: .next() y .throw(), y para declarar un generador es necesario incluir un “*” al lado de la palabra function. Un ejemplo clásico de esto, sería una función que calcule la fórmula de Fibonacci infinitamente:

function* fibonacci(){
	let pre = 0;
	let cur = 1;

	// loop infinito
	while( true ){
		let temp = pre;
		pre = cur;
		cur += temp;
		yield cur;
	}
}

let generador_fibonacci = fibonacci();
generador_fibonacci.next() // 1
generador_fibonacci.next() // 2
generador_fibonacci.next() // 3
generador_fibonacci.next() // 5
generador_fibonacci.next() // 8
// ...

Promesas

Las promesas en JavaScript han existido desde hace tiempo en librerías de terceros. Éstas se basan en la naturaleza de JavaScript para generar código asincrónico como llamados ajax, animaciones y cualquier otro método que tome un tiempo indeterminado fuera del hilo principal de ejecución, en el que se necesite hacer algo cuando este método termine.

Hasta ES5 este tipo de llamados se realizaban a través de callbacks, pero debido al sobreuso y el mal uso de éstos, este proceso comenzó a ser denominado como callback hell, ya que al anidar callbacks para conseguir un código que genere llamados en secuencia, era muy difícil debugear si es que ocurrían errores o realizar la lectura del código.

Para solucionar este problema se inventaron las promesas, y aunque no eran tomadas muy en serio por la fragmentación que existía en sus implementaciones en las distintas librerías, el estándar Promises A+ fue incluido de manera íntegra en ES2015.

Para observar la diferencia que ofrece la nueva implementación, revisa este ejemplo:

En ES5 usando callbacks:

function isUserTooYoung(id, callback) {
    openDatabase(function(db) {
        getCollection(db, 'users', function(col) {
            find(col, {'id': id},function(result) {
                result.filter(function(user) {
                    callback(user.age < cutoffAge)
                })
            })
        })
    })
}

En ES2015 usando promesas:

function isUserTooYoung(id) {
    return openDatabase(db)
        .then(getCollection)
        .then(find.bind(null, {'id': id}))
        .then(function(user) {
            return user.age < cutoffAge;
        });
}

Usando ES2015 en todas partes

No es novedad que todas las herramientas modernas de desarrollo como Google Web Starter Kit o Gulp, y los frameworks Angular, ReactJs y MeteorJs ya estén utilizando este estándar por medio de Babel, el transpilador más popular y confiable hasta ahora. Pues el uso de transpiladores, permite transformar código ES2015 en ES5, convirtiendo el trabajo de desarrollo mucho más cómodo y mejor preparado para el futuro.

En resumen, la nueva versión de JavaScript nos ofrece un lenguaje completo y mucho más poderoso para las nuevas aplicaciones en la que podremos usarlo. Si bien hemos revisado algunas de las funciones más destacables para nuestro equipo, este artículo no estaría completo si no mencionamos, al menos, otras funcionalidades que también han mejorado, como:

  • Mejoras en el literal de objetos
  • Destructuring de variables
  • Argumentos de funciones default, rest y spread
  • Soporte de Unicode
  • Maps, Sets, WeakMaps y WeakSets
  • Proxies
  • Symbols

Para aumentar y profundizar tus conocimientos en estas funcionalidades, puedes revisar la guía oficial del ES2015 y también, los siguientes links:

Encargado de Producción y Desarrollo
Entiendo como un desafío diario la búsqueda de nuevas técnicas para presentar contenidos, de forma visualmente interesante y teniendo presente la experiencia de uso. Los lenguajes de programación web son mi mejor herramienta para generar interfaces amigables y eficientes.

Comentarios