Actualización de JavaScript

ECMAScript 2015 y el futuro de JavaScript

Desarrollo Web 2 min. de lectura

Revisamos las novedades del nuevo estándar y destacamos las funcionalidades para quienes están comenzando a actualizar su forma de realizar JavaScript.

Javascript es un lenguaje dinámico, orientado a objetos y débilmente tipado. Fue inventado en 10 días por Netscape, en 1995, con el nombre de Mocha, pensado para agregar capacidad de lógica dentro de un navegador web y haciéndole competencia a los entonces populares applets en Java.

A medida que el lenguaje comenzó a tomar fuerza y aparecieron competidores como JScript, fue necesario realizar una estandarización global dirigida por la Asociación Europea de Fabricantes de Computadores (ECMA por sus siglas en inglés), organización que en 1997 adoptó el lenguaje bajo el nombre de ECMAScript, nominación que también se utiliza para generar la norma ISO que hoy lo controla.

Desde ese momento, se han ido incorporando nuevas sintaxis y capacidades al lenguaje por medio de versiones del estándar ECMAScript. Sin embargo, hasta el año pasado la versión ES5 (que es soportada por el 100% de los navegadores modernos) seguía siendo considerado por los programadores como uno de los lenguajes más odiados debido a la falta de funcionalidades que éste presentaba, especialmente si venían de lenguajes más maduros como Java o C++.

Además de las carencias en funcionalidad, JavaScript era considerado como un lenguaje inseguro y que incluía muchos bugs. Para preparar la versión ES6 del estándar, posteriormente denominada ECMAScript 2015 (ES2015), la ECMA debió corregir los bugs y agujeros de seguridad inherentes del lenguaje e incluir todas las funciones faltantes.

Si bien esta versión cuenta con un soporte parcial a nivel de navegadores, las compañías a cargo ya han comenzado a trabajar para dar soporte completo a la nueva versión de JavaScript.

Actualmente, JavaScript ha salido del espectro de los navegadores web y se ha introducido en ambientes en donde antes era impensable, como servidores (NodeJs) e incluso en algunas aplicaciones del lenguaje orientadas a la programación de microchips como Arduino (Noduino).

Algunas de las funciones más relevantes de esta actualización son:

  1. Funciones en flecha y this léxico.
  2. Clases en JavaScript.
  3. Templates Strings.
  4. Formas de declarar variables let y const.
  5. Nuevas formas de hacer loops. For of
  6. Generadores
  7. Promesas

Para aquellos que recién están comenzando con la actualización de su método de hacer JavaScript, compartimos nuestro análisis sobre las tres funciones más relevantes.

Funciones en flecha (Fat arrow functions) y this léxico

Las funciones en flecha (=>) son similares a las -ya muy utilizadas- funciones anónimas de JavaScript y pueden usarse de la misma manera. Sin embargo, al realizar este tipo de funciones podemos predecir de manera más lógica la global this, ya que por definición las funciones en flecha comparten el mismo this léxico que el código que las rodea. Es decir, this se mantiene tanto afuera como adentro de la función evitando que el desarrollador tenga que recurrir a prácticas redundantes del tipo var self = this; como mostramos en el siguiente ejemplo:

Versión anterior ES5:

var self = this;
una_funcion(function(){ 
    return self.un_metodo();
});

En ES2015 se convierte en:

una_funcion(() => {  return this.un_metodo();});

Esta nueva sintaxis también puede utilizarse para acortar la forma en la que pasamos argumentos a funciones anónimas, por ejemplo:

En ES5:

una_funcion(function( un_argumento ){
    return un_argumento();
});

En ES2015 se convierte en:

 una_funcion(un_argumento => un_argumento());

Clases en Javascript (¡Por fin!)

Así es, la versión ES2015 de JavaScript incluye una nueva sintaxis para declarar clases y sus métodos. Si bien esta adición pareciera ser una gran novedad, simplemente se trata de una nueva sintaxis para representar el modelo de herencia prototipal que es el núcleo del lenguaje. A pesar de esto, la nueva sintaxis nos permite ahorrar muchas líneas de código para declarar objetos y es una manera más familiar para los que vienen de otros lenguajes. A continuación una comparación de la misma declaración entre versiones:

En ES5:

// constructor de la clase
var Mi_clase = function(){};
Mi_clase.prototype = {
	primer_metodo : function(){
		// codigo
	},

	segundo_metodo : function(){
		// mas codigo
	}
};

En ES2015:

class Mi_clase {
	// constructor de la clase
	constructor(){}

	primer_metodo(){
		// codigo
	}

	segundo_metodo(){
		// mas codigo
	}
}

En adición a la sintaxis anterior, ES2015 también incluye extensiones y directrices para cada método (static, private, etc):

class Mi_clase {
	// constructor de la clase
	constructor(){}

	primer_metodo(){
		// codigo
	}

	segundo_metodo(){
		// mas codigo
	}
}

class Mi_sublcase extends Mi_clase {
	constructor(){}

	static tercer_metodo(){
		this.primer_metodo();
		//codigo
	}
}

Template Strings o Plantillas de cadenas

Entre las mejoras de sintaxis del lenguaje, los Template Strings se presentan como una alternativa a la concatenación de strings. No obstante, éstos tienen una mejora en performance por lo que se recomiendan utilizar más que la concatenación:

En ES5:

var nombre = 'Fernando';
var apellido = 'Silva';
console.log('Hola ' + nombre + ' ' + apellido);
// Hola Fernando Silva

ES2015:

let nombre = 'Fernando';
let apellido = 'Silva';
console.log('Hola ${nombre} ${apellido}');
// Hola Fernando Silva

En un próximo artículo, continuaremos revisando las últimas tres funcionalidades. Mientras, puedes revisar más información en los siguientes links:

Acerca del Autor

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Agregar un comentario