EcmaScript 6: mejoras y cambios del próximo JavaScript

EcmaScript 6, el nuevo estándar sobre el que se basará JavaScript, propone una serie de mejoras a la sintaxis y funcionalidad del lenguaje. Durante el próximo año podremos disfrutar de las siguientes features en los principales navegadores, que ya han comenzado a dar soporte al nuevo estándar, pero mediante herramientas como Babel podemos disfrutar de la sintaxis ES6 hoy mismo. En este artículo haremos un repaso de dichas mejoras y como nos ayudarán a la hora escribir código JavaScript.

Funciones flecha

Las funciones flecha son una nueva forma de escribir funciones anónimas que nos ahorra caracteres y aumenta considerablemente la legibilidad de nuestro código. Esta sintaxis está inspirada en el dialecto de JavaScript CoffeeScript, que implementó esta sintaxis hace ya unos años. Veamos con un pequeño ejemplo como se diferencia la nueva sintaxis:

Nueva sintaxis de función flecha:
setInterval(() => {
  console.log('Un segundo de espera');
}, 1000)


Sintaxis convencional (EcmaScript 5):
setInterval(function() {
  console.log('Un segundo de espera');
}, 1000)


Dentro de los paréntesis iniciales escribiremos los argumentos para nuestra función anónima.

Clases

Una de las adiciones más grandes a esta actualización del estándar ECMA es la inclusión de clases, que no son más que una estilización del sistema de prototipos característico de JavaScript. Con la adopción del nuevo estándar declarar objetos con métodos y propiedades será mucho más fácil y visual que hasta ahora. Pongamos un pequeño ejemplo con una clase sencilla para ver de forma clara las ventajas que comporta usar la nueva sintaxis:

class Persona {
  constructor(nombre, edad) {
    this._nombre = nombre;
    this._edad = edad;
  }

console.log(vehicle.make); // John Doe
vehicle.make = 'Don Williams';
console.log(vehicle.toString()) // John Doe 25

Podemos observar que esta sintaxis es más clara y concisa que si usamos Object.defineProperty().

Mejoras en los argumentos de funciones

Con ES6 es mucho más sencillo definir parámetros por defecto cuando estos no están definidos. Hasta ahora esta opción se contemplaba dentro del cuerpo de la función, con el operador or: var arg = arg || 'Valor por defecto';. De ahora en adelante, podremos definir el valor de los argumentos en caso de que no lo estén de manera similar a lenguajes como Python:

function f(arg=15) {
  console.log(arg)
}
f(5) // 5
f() // 15


Con esta nueva versión también es más fácil llamar a una función pasando un array como argumento y desplegar sus elementos para usarlos como argumentos, así como convertir una serie de parámetros en un array. Estos dos ejemplos reflejan las ventajas de esta nueva funcionalidad, representada por puntos suspensivos:

function f(x, y, z) {
  return x + y + z;
}
// El array se convierte en parámetros individuales
f(...[1,2,3]) == 6

function f(x, …y) {
// y se convierte en un array
  return x * y.length;
}
f(3, «hola», true) == 6

let y const: mejorando la declaración de variables

La nueva palabra clave let funciona de manera similar a var, con la diferencia que la nueva keyword está limitada al actual bloque; es decir, esta variable solo será accesible desde el bloque donde se declara.

EcmaScript también incorpora las variables constantes, cuyo valor no puede ser modificado una vez se defina. Una variable constante se define mediante la palabra const. Estas dos adiciones hacen que nuestro código JavaScript sea más robusto, limpio y seguro.

Sistema de módulos nativo

Otra de las funcionalidades más útiles de la nueva versión del estándar EcmaScript es el soporte para organización de código basado en módulos. Esto contribuye a una mejor estructura y mayor reusabilidad del código. Hay diversos compiladores frontend que ya implementan esta funcionalidad (y muchas otras), ya que es una feature que los desarrolladores llevan años pidiendo. Podemos ver en acción el sistema de módulos en el tutorial de Webpack que escribimos en Sitelabs unos meses atrás, donde describimos como crear un módulo simple y compatible con el estándar CommonJS.

Otras novedades

EcmaScript 6 incorpora muchas otras novedades, como soporte para promesas, símbolos y proxies, que mejoran el proceso de desarrollo de aplicaciones en JavaScript. Podemos consultar todas las adiciones al estándar en esta web. Los navegadores incorporarán todas estas nuevas especificaciones de manera gradual durante el 2016, si bien algunos navegadores ya han comenzado a implementar algunas partes del nuevo estándar.

Si no quieres esperar a que los navegadores den soporte total a la nueva versión, puedes usar Babel como parte de tu flujo de trabajo para escribir código ES6 y compilarlo automáticamente a ES5. De esta forma puedes compatibilizar tu código todos los navegadores usados hoy en día con un esfuerzo mínimo. Babel se puede integrar en herramientas como Gulp o Webpack para automatizar el proceso de compilación.