Novedades del estándar ECMAScript 2015 y JavaScript

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.

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.

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

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