En este tutorial conoceremos una a una, cuáles son las novedades de ecmascript6.

ES6 o ECMAScript 2015 es la 6a versión de la especificación del lenguaje ECMAScript o como comúnmente lo conoces, JavaScript. Esta nueva versión trae consigo muchas novedades esperadas para el lenguaje y fue oficialmente aprobada el 17 de junio de 2015. 

Su implementación en los principales motores de JavaScript como V8 de Chrome o Spider Monkey de Mozilla se encuentra en desarrollo constante, en la siguiente tabla puedes consultar un comparativo de las características y los navegadores que las soportan.

Arrow Functions

Conocidas en otros lenguajes (C#, Java) como expresiones lambda, arrows o flechas son abreviaciones de funciones utilizando el operador =>

Por ejemplo cuando queremos asignar un callback a una función, debemos escribir la función completa, supongamos que queremos obtener los cuadrados de los números contenidos en un arreglo:

var cuadrados = numeros.map(function(n) {
  return n * n;
});

Con la nueva sintaxis podemos obtener el mismo resultado pero de una forma más elegante:

var cuadrados = numeros.map(n => n * n);

También se soporta una función con varias sentencias usando las llaves {}, y si queremos asignar varios parámetros los rodeamos con paréntesis ()

numeros.forEach((n, i) => {
  if(n > 0) {
    console.log(i + " - " + n);
  }
});

O asignar una función a una variable para reutilizarla después:

var func = x => x + 1;
var num = func(5); // 6

Clases

Si tienes experiencia con otros lenguajes orientados a objetos como Java te habrás dado cuenta que las clases en JavaScript se creaban de una forma diferente, ahora la sintaxis ha cambiado para hacerla más parecida a lo que estamos acostumbrados, en este ejemplo definimos una clase con dos atributos y dos métodos:

class Rectangulo {
  constructor(base, altura) {
    this.base = base;
    this.altura = altura;
  }
  calcArea() {
    return this.base * this.altura;
  }
}
var r = new Rectangulo(5, 10);
console.log(r.calcArea()); // 50

Template Strings

Son un tipo especial de cadena con formato, similares a la interpolación en otros lenguajes como Ruby, se definen con un par de caracteres back-tick (`) a diferencia de las cadenas normales que usan comillas sencillas o dobles.

var s1= 'esta es una template string';

// Pueden contener valores
var n = 5;
var s2 = `El valor de n es ${n}`;

// Pueden abarcar múltiples líneas
var s3 = `Esta es una cadena
escrita en dos líneas`;

Let y Const

let indica que una variable solo va a estar definida en un bloque en particular, al terminar el bloque la variable deja de existir, esto es muy útil para evitar errores lógicos cuando alteramos una variable que no deberíamos.

function letTest() {
  if (true) {
    let x = 23;
    console.log(x);  // 71
  }
  console.log(x);  // no existe x
}

const por su parte previene que una variable declarada cambie de valor, convirtiéndola efectivamente en una constante. Siempre es recomendable usar constantes para valores que sabemos que no van a cambiar, así se evitan modificaciones inesperadas.

const a = 7;
a = 5; // error
console.log(a);

Generadores

Los generadores son un tipo especial de función que retornan una serie de valores con un algoritmo definido por el usuario, podríamos generar ids consecutivos para registros de una base de datos, sucesiones numéricas como Fibonacci, entre otras. Una función se convierte en generador si contiene una o más expresiones yield y se declara con function*.

En este ejemplo definimos un generador que me devuelva el cuadrado de los números empezando con 1, es decir que los primeros cinco valores serían 1, 4, 9, 16, 25:

function* cuadrados(){
  var n = 1; // comienza en 1
  while(true) {
    var c = n * n; // obtiene el cuadrado
    n++; // aumenta para la próxima iteración
    yield c; // devuelve el valor actual
  }
}

Para utilizar el generador, asignamos a una variable el resultado de esta función y llamamos al método next() que devuelve un objeto con propiedad value, este es el dato que nos interesa.

La expresión yield es la que hace todo el trabajo duro, se encarga de devolver el valor, pero además guarda el estado interno de la función, por eso la segunda vez el conteo no empieza en 1, sino que comienza en el valor que se quedó la última vez.

var gen = cuadrados();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 4
console.log(gen.next().value); // 9

Literales octales y binarias

Hay ocasiones en que el contexto de nuestros datos requiere que trabajemos con cifras no decimales, por ejemplo en base 2 (binario) o base 8 (octal), ahora es sencillo crear este tipo de literales con los prefijos (0b)y (0o) respectivamente.

var a = 0b111110111; // binario
console.log(a); // 503
var b = 0o767; // octal
console.log(b); // 503

Maps y Sets

A la hora de desarrollar algoritmos en JavaScript solo teníamos dos alternativas crear un objeto {} o un arreglo [] para almacenar datos, y aunque la mayoría de las veces es más que suficiente con ellos, puede presentarse el caso de que el rendimiento no es el adecuado. Los mapas (Map) son una estructura de datos que almacenan pares de llave (key) y valor (value), los conjuntos (Set) tienen la característica de no aceptar duplicados, y ambos permiten búsquedas eficientes cuando se tiene un gran volumen de información porque no guardan sus elementos ordenados por un índice, como ocurre con los arreglos.

En el siguiente ejemplo vemos el uso de Set, noten como se puede encadenar el método add para añadir nuevos elementos, si alguno se duplica es omitido y tiene un método has para revisar si existe un elemento dentro del conjunto.

// Sets
var s = new Set();
// Añade 3 elementos, cadena1 se repite
s.add("cadena1").add("cadena2").add("cadena1");
// El tamaño es 2
console.log(s.size === 2);
// El conjunto no tiene la cadena hola
console.log(s.has("hola"));

Un mapa es similar, pero para añadir un elemento usamos el método set que acepta dos parámetros: la llave y su valor asociado. Se obtienen los valores con el método get.

// Maps
var m = new Map();
// Añade la llave "hola" con el valor 42
m.set("hola", 42);
// Añade la llave "a" con el valor 34
m.set("a", 34);
// Obtiene el valor asociado a la llave "a"
console.log(m.get("a")); // 34

Promises

El flujo de información de Internet tiene características asíncronas, lo que significa que mientras esperamos el resultado de una operación como por ejemplo que carguen los datos de una página web, un programa puede realizar otras operaciones y cuando el resultado esté listo utilizarlo. Las promesas son objetos que representan esta clase de operaciones y los datos que se obtienen.

En el siguiente bloque de código el método obtenerDatos hace una petición a algún otro sitio y devuelve un dato de interés para nosotros, el problema es que ese proceso puede demorar algunos milisegundos y nosotros no podemos esperar, entonces en vez de devolvernos el dato como tal, nos devuelve un objeto de tipo Promise que tiene un método then, este método recibe dos funciones una que se ejecuta en caso de que se obtenga el dato correctamente (success) y la otra en caso de que haya ocurrido un error (failure), una de estas funciones se ejecutará en el futuro cercano.

var promesa = obtenerDatos();
promesa.then(function (dato) {
  console.log(dato);    // 'mensaje'
}, function (error) {
  console.error(error);   // ocurrió un error
});

Estas fueron algunas de las características que más llamaron mi atención, para consultar una lista más completa de todo lo que viene incluido en ES6 pueden visitar la siguiente página.

Probar ES6

Actualmente el soporte de los navegadores para el nuevo estándar no es total por lo que hay algunas características que aún no están implementadas, pero si quieren practicar y hacer algunos programas pueden utilizar la siguiente herramienta proporcionada por Babel, que transforma código de ES6 a ES5 de manera automática para que pueda ser soportada por todos los navegadores, todo en tiempo real.

Acerca del autor

Enrique Munguía es un desarrollador web e instructor apasionado por la enseñanza, escribe regularmente en su blog enrique7mc.com y puedes encontrarlo en twitter @enrique7mc_