ECMAScript 6 - nuevas variables en JavaScript: let y const

ECMAScript 6 o dicho de otra forma: la nueva versión de JavaScript, que actualmente están empezando a implementar algunos navegadores. Firefox tiene un amplio soporte para esta nueva versión de JavaScript y Chrome, tiene algo de soporte (aunque se puede extender habilitando alguna flag).

Pero sin más preámbulos vamos a conocer los nuevos tipos de variables que acompañan a ya clásico var, como es let (para controlar el ámbito de la variable) o const (que por fin nos trae las constantes en JavaScript).

Constantes en JavaScript con const

Las constantes en JavaScript siempre se las ha echado en falta y nos hemos visto obligados a crear pseudo-constantes simplemente estableciendo el nombre de la variable en mayúscula (var PSEUDO_CONSTANTE) y dando por hecho que nadie la modificará posteriormente, algo que se podía hacer sin problemas en JavaScript, y ahora como debe de ocurrir en una constante, ya no variará el propio valor por mucho que se intente modificar.

Un ejemplo claro sería el siguiente:

// x: constante
const x = 20;
console.log(x); // 20
  
x = 1;
console.log(x); // 20
// No cambia el valor de x

Además const tiene un buen soporte, siendo quizás la característica de ECMAScript 6 con mayor soporte, pudiendo ser usado en Chrome, Safari, Firefox, Node.js e Internet Explorer 11, entre otros navegadores.

Controlando el ámbito de las variables con let

JavaScript es un lenguaje bastante flexible, sobre todo con el uso y declaración de variables, que pueden contener cualquier tipo de dato y mutar el tipo sin ningún problema, además de poder ser declaradas de diferentes formas y pasar a ser globales o locales según como se haga (lo que puede llevar a errores básicos de programación por no declarar correctamente una variable).

Además, las únicas clausuras para las variables se crean solo y exclusivamente con funciones, como no pasa en otros lenguajes como por ejemplo Java:

public static void main(String[] args) {
    int a = 1;
    int b = 2;
    
    {
        int c = 3;
    }

    System.out.println(a +" "+ b +" "+ c);
    // Error de compilación: c cannot be resolved to a variable 
}

En cambio en JavaScript:

var a = 1;
var b = 2;

{
    var c = 3;
}

console.info(a, b, c); // 1 2 3

Y esto se puede trasladar a bucles o condiciones, donde podemos declarar variables temporales y serán visibles desde fuera de esa sentencia.

Por suerte, esta nueva versión de JavaScript incorpora let para declarar variables y controlar mejor su propagación. En principio es bastante simple de entender, simplemente evita que una variable sea visible cuando no debe como ocurre con var.

let a = 1;
let b = 2;

{
    let c = 3;
}

console.info(a, b, c); // ReferenceError: c is not defined

Como vemos, declarar con var algunas variables temporales podría alterar la ejecución del código cuando realmente esas variables no se usan para ningún fin, más allá de poder hacer un bucle.

var i = "i";
var temporal = "temporal";

for(let i = 1; i != false; i = false){
    let temporal = 10;
}
console.log(i, temporal); // i temporal


for(var i = 1; i != false; i = false){
    var temporal = 10;
}
console.log(i, temporal); // false 10

Integridad declarativa

También otra pega que podemos encontrarle a JavaScript es que se pueden volver a declarar las variables, que a simple vista parece que no tiene mayor importancia, pero dependiendo de la situación un error a tiempo es mejor que mezclar dos variables para usos diferentes.

Como hemos visto anteriormente, podíamos sobrescribir una variable con otra declaración que pretendemos usarla de forma temporal dentro de un bucle. En este caso, la variable temporal ha escrito la variable que había por encima de ella, lo que puede llevar a confusiones en el futuro.

Para evitar esto al declarar variables, let no puede ser declarado dentro de la misma clausura dos veces, lanzando un error.

if(true){
    let a = 1;
    let a = 2; // TypeError: redeclaration of variable a
}

Conclusiones

JavaScript es un lenguaje que se ha actualizado poco, debido en gran parte a que no todo el mundo usa navegadores que respetan los estándares y que aún más común es que no se actualicen. Esto hace imposible que de un día para otro usemos un let en nuestro código y sea funcional para todo el mundo, cosa que no pasaría si instalásemos una versión nueva de un servidor web, con su actualización pertinente del lenguaje, que podríamos usarlo desde ese momento y nadie notaría la diferencia.

Y junto a estas nuevas formas de declarar variables, ECMAScript 6 trae unas cuantas novedades más que repasaremos en Genbeta Dev poco a poco.

En Genbeta Dev | Introducción a ECMAScript 6