En este artículo vamos a comenzar a abordar las características de ES6 en cuanto a novedades que aportan en el lenguaje Javascript. De una manera práctica iremos abordando las nuevas posibilidades del lenguaje en el estándar definido en 2015. Recuerda que si quieres saber más de dónde viene ES6, cómo usarlo y qué implica, debes consultar el Manual de ES6.

Antes de meternos de lleno en las cosas que nos aporta ES6 debemos recordar que en Javascript solo teníamos una forma de declarar variables. Se hacía con la palabra clave "var" seguida del nombre de variable a declarar (o variables separadas por comas). Sería algo como esto:

var variable;

Esta variable podía ser de ámbito global o local. Su ámbito depende del lugar donde se declara pero las posiblidades eran bien limitadas. Para hacer una variable global la teníamos que declarar simplemente fuera del cuerpo de una función. En cambio, las variables locales eran declaradas dentro de una función y solo eran accesibles dentro del código de esa función.

En resumen, en ES5 (Javascript más tradicional) no se permitía declarar un alcance más acotado, como las llaves de una condición if, un bucle etc. Veamos un ejemplo:

function miFuncion() {
  console.log(miVar);
  if (true) {
    var miVar = "Hola mundo";
  }
  console.log(miVar);
};

En este caso, pensando en ES5, la variable "miVar" está definida dentro de un bloque if, pero aun así su ámbito será el de la función miFuncion(). Si lo ponemos en ejecución el resultado que obtendremos en consola es el siguiente:

undefined
Hola mundo

Este resultado se debe a que en la primera llamada miVar ya existe pero no tiene valor definido, y en la segunda ya tiene un valor definido “Hola mundo”.

Quizás lo que sería de esperar es que la variable miVar quedase limitada al ámbito donde fue declarada, dentro de las llaves del if. Pero lo cierto es que se extiende al ámbito de toda la función.

El código anterior, en ES5, equivaldría al siguiente:

function () {
var miVar;
  console.log(miVar);
  if (true) {
    miVar = "Hola mundo";
  }
  console.log(miVar);
};

Como podemos observar, en cuanto ve una variable ya sea parte de un if o de la propia función pasa a declararla antes de seguir ejecutando el código (Esto es debido a la doble pasada que hace por el código el intérprete de Javascript). Por eso, en el primer console.log nos sale como declarada pero sin valor definido. Este tipo de cosas son caballo de batalla a diario con Javascript y seguro que a más de uno le han provocado unos cuantos dolores de cabeza.

Declaración de variables con Let

Para solucionar todo esto en Javascript ES6 se ha implementado alguna forma nueva de declarar variables que ahora será la más indicada en la mayoría de los casos. Se trata de la construcción "let" que veremos mejor con un ejemplo similar:

function () {
  console.log(miVar);
  if (true) {
    let miVar = "Hola mundo";
  }
  console.log(miVar);
};

La clave de let es que restringe su existencia al ámbito donde ha sido declarada (cualquier ámbito expresado con unas llaves). Por tanto, la salida de la consola sería en este caso:

undefined
undefined

Por qué este cambio? Como hemos dicho, let es la nueva forma de declarar variables de bloque, sólo existirán dentro del bloque que las contenga y no contaminará nunca nuestro código a su alrededor. Es una gran aportación para no tener que estar pendiente de sobreescribir variables y con lo que al final te juntabas con un buen número de ellas, este ejemplo es de un if, pero es lo mismo con cualquier bucle, sea un while, for, etc.

Declaración const

Otra nueva forma de crear variables es "const". Ésto nos crea una variable donde su valor es inalterable a lo largo del código. Por ejemplo en un script para contabilidad sería una buena idea poner por ejemplo el IVA cuyo valor no se alterará en todo el programa ya que siempre debería ser el mismo. Otro ejemplo sería el valor "PI". Ya se sabe que en Javascript lo obtenemos mediante Math.PI, pero si lo tuviéramos que declarar lo ideal sería hacerlo como constante, ya que nunca cambia su valor.

const MIVARIABLE = 1;
console. log(MIVARIABLE);

MIVARIABLE = 10;
console.log(MIVARIABLE);

El primero nos dará 1 que es su valor, pero el segundo nos dará un error y nos dirá que su valor sigue siendo 1. Obviamente, el lenguaje no nos permite modificar el valor de una constante.

La declaración const tiene ciertas unas peculiaridades interesantes. Por ejemplo:

const MIVARIABLE;
MIVARIABLE = 10;
console.log(MIVARIABLE);

En este caso hemos declarado MIVARIABLE y en la siguiente línea le hemos asignado un valor. Quizás parece correcto, pero cuando intentamos ponerle el valor, de manera posterior a su definición, vemos que no es posible por ser una constante. En realidad la constante se ha creado con el valor undefined y se quedará con ese valor por siempre. Es algo a tener muy en cuenta y que puede llevar a error muy fácilmente.

Declaración const en objetos

Otra particularidad de const es en su uso con objetos. Como imaginamos creará un objeto que su valor será inalterable y es así pero quizás no exactamente de la manera que pensamos. Veamos un ejemplo que lo dejará muy claro:

const OBJ = {
  id: '01',
  name: 'David'
}
OBJ.name = 'Miguel';
console.log(OBJ.name);

Esto nos imprimirá Miguel ya que la constante es el propio objeto no sus propiedades, fijaros que el objeto en sí está con mayúsculas pero sus propiedades no, porque no son constantes. Las propiedades del objeto en si se pueden modificar, añadir o borrar según necesitemos, lo que nunca podremos cambiar es la referencia a ese objeto. Por tanto, no podremos hacer es algo como: OBJ = 'Hola mundo'; ya que si estamos intentando alterar la referencia al objeto en sí.

Como podéis ver se abren muchas puertas a un código más sencillo y más práctico del que estábamos acostumbrados todo depende de nosotros el hacer un buen uso de él.

¿Para qué usar la antigua declaración "var" a partir de ahora?

Como habrás deducido, la mayoría de las ocasiones se usará "let" para declarar variables, dado que su ámbito es más restringido (al bloque definido por las llaves) y por tanto nos puede dar lugar a menos errores debidos a la interferencia entre variables del mismo nombre. Sin embargo, la declaración "var" sigue existiendo.

Obviamente, "var" se podrá usar cuando se trata de asignar un ámbito de toda una función, o ámbito global. Al principio del artículo hemos hablado de ámbitos de var, así que debe haber quedado más o menos claro.

Una posible regla sería: usar "let" siempre por regla general, hasta que por su ámbito restringido no nos venga bien, y entonces pasaremos a usar "var".

Otra cosa interesante que nos sirve para definir las diferencias entre let y var es el mecanismo de doble pasada del intérprete de Javascript. En la primera pasada leerá todas las variables definidas con "var" y en la segunda al ejecutar el código ya conocerá esas variables y las podrá usar. Así pues, una declaración "var" nos permite usar una variable que ha sido declarada más adelante en el código, siempre que su ámbito lo permita.