ECMAScript 6

Lo primero y ante todo unas nociones de historia sobre el maravilloso lenguaje JavaScript, no es crucial, pero el saber no ocupa lugar (excepto en este artículo, aquí ocupará un par de líneas).

Bueno a lo que voy, JavaScript en un lenguaje que nace en 1995 de manos de Brendan Eich, y ha tenido varios nombres, como Mocha y LiveScript hasta que al ser adquirido por Sun Microsystems le pusieron el nombre que lleva hoy, ya que Sun era y es propietaria del lenguaje Java, pero por atención, no confundir que JavaScript no es lo mismo que Java.

Y diréis, por qué si se llama JavaScript el título de este artículo dice no se que de EMACSCRIPT 6, pues bien,  ECMA es el acrónimo de European Computer´s Association, un comité  destinado a estandarizar  el lenguaje JavaScript.

Pasando por diversas versiones de ECMASCRIPT, de las cuales algunas llegaron a usarse, y otras no, llego en 2014 ECMASCRIPT 6.

Hasta aquí la lección de historia, a partir de ahora daré por sentado que si estás leyendo esto, sabes lo que es JavaScript, y tienes nociones básicas de su sintaxis por lo menos.

Entonces ¿qué cambios se han introducido? ¿qué diferencias hay entre esta versiona y las anteriores?

Pues bien, lo primero y más significativo son las famosas (al menos de oídas) funciones arrow.

Se llaman así porque se definen con una flecha ‘=>’, pero su comportamiento es diferente a las funciones típicas, y su sintaxis puede variar dependiendo del uso que se le dé.

Gracias a la función arrow una función puede ser tan simple como esto:

var reflect = value => value;

Lo que se traduciría por lo siguiente:

var reflect = function (value) {   return value; };

No sirve de mucho ya que es una función que toma un único argumento y lo devuelve, pero no deja de ser curioso lo que se puede llegar a simplificar una función, el uso de un solo argumento permite no usar paréntesis, en el caso de ser una función con más de un argumento sí que es necesario su uso, pero aun así nos dejaría una función bastante simplificada como esta:
 

var sum = (n1, n2) => n1 + n2;

También puede darse el caso de ser una función sin argumentos como esta:
 

var getName = () => "Soy un string";

En el caso de ser una función más compleja nos veremos en la tesitura de encapsular el código entre paréntesis y poner el return típico, como en este caso:

var sum = (n1, n2) => {   
  return n1 + n2; 
};

Otro caso más (sí, esto va a ser largo), podemos tener que devolver un objeto con lo que tendríamos que devolverlo entre paréntesis, como en este caso:

var getTempItem = id => ({

  id: id, name: "Temp"

});

 

Hasta aquí las funciones arrow, que hay que abreviar, también tenemos las nuevas funciones anónimas, que nos permiten realizar una función sin guardar la referencia a ellas.

let person = function (name) {

 return {

  getName: function() {

  return name;

}

} }("Soy un string");

Este código daría lugar al típico get de una variable que recordaremos del lenguaje Java, lo que nos permitiría invocar de la siguiente manera la propiedad getName de person:

console.log(person.getName()); “Soy un string”

Otra de las grandes novedades de JavaScript 6 son las clases con su correspondiente herencia, gran noticia para los amantes de Java.

Un ejemplo que vale más que mil palabras:

class LibroTecnico extends Libro{

     constructor(tematica, paginas){

  super(tematica, paginas);

  this.capitulos=[];

  this.precio="";

 // ...    }

metodo(){        // ...      }}

Como se puede apreciar es realmente parecido a las clases de Java, así que no me detendré en explicarlo.

Otro punto de mejora en esta versión será la facilidad para el bind del this a un entorno concreto, ya que gracias a las funciones arrow se vuelve bastante visual y sencillo de aplicar, como en este caso:

var obj = {

  foo : function() {...},

  bar : function() {

    document.addEventListener("click", (e) => this.foo());

  }

}

Como podemos observar ahora no es necesario el típico:

var self = this;

Para conservar el entorno inicial, y poder llamar de esa manera a la función foo, ya que de otra manera no sería posible.

También se ha agregado la capacidad de importar módulos sin necesidad de importar el script previamente en el HTML, además con la capacidad de importar funciones individuales si es necesario:

import { walk } from "person";

De esta manera importaríamos del módulo person la función walk.

Para acabar incluiré unas modificaciones que, aunque son menos significativas, desde luego son llamativas:

Ecmacscript 6 también nos provee de las declaraciones mediante let y cons, siendo el let la manera de declarar variables para uso en un entorno cerrado y cons para la declaración de constantes que solo puedan leerse pero no modificarse.

Otro minipunto para esta versión es la interpolación de variables dentro de los strings de la siguiente manera:

let nombre = "Javier";

let apellido = "Martin";

console.log(`Mi nombre es  ${nombre} y mi apellido ${apellido);

¿Mucho más intuitivo y limpio no? Además ahora también se pueden crear los strings multilinea sin necesidad de usar los “+” que dejaban el código mucho más feo.

var string = "Soy

un

string";

Otra curiosidad son las nuevas maneras de asignación de variables que se han introducido:

var [a, b] = ["Javier", "Martín"];

var obj = { nombre: "Javier", apellido: "Martín" };

var { nombre, apellido } = obj;

Y esto no está reducido a la igualación con objetos simples, ya que si el objeto lo devolviese una función podríamos igualar dicha función a la variable y obtendríamos el mismo resultado que el último ejemplo.

Hasta aquí los cambios incluidos en esta nueva versión, espero que os haya sido de utilidad, para aquellas personas que quieran ir probando esta versión pero necesiten dejarlo en la anterior les recomiendo usar un transpiler como BABEL, para pasar el código en ECMAScript 6 al anterior con facilidad.