Declarar variables con LET en JavaScript

Tradicionalmente las variables en JavaScript solo manejaban la palabra reservada var para declararlas con un ámbito local o sin anteponer ninguna palabra reservada para declararlas con un ámbito global.

Pero en la revisión del estándar para JavaScript; la ES6 (2015) se agregó la palabra reservada let para dar una mayor restricción y mejor control de los ámbitos (alcances) de las variables en JavaScript, y que se explican a detalle en este artículo con la siguiente premisa:

• Las variables declaradas con let no pueden ser redeclaradas.
• Las variables declaradas con let deben estar declaradas antes de ser usadas.
• Las variables declaradas con let tienen un ámbito de bloque.

Declarar una variable let con valor indefinido

En el siguiente ejemplo, se declara una variable Javascript con la palabra reservada let pero sin la asignación de algún valor:

let nombreAuto;

Después de esta declaración, la variable no tiene ningún valor; pero técnicamente tiene el valor de "indefinido".

Para asignarle un valor a la variable se realiza con el operador de asignación "=" (signo igual):

nombreAuto = "Volvo";

Declarar una variable let con un valor definido

También se pudo haber asignado el valor en el mismo momento en que se declaró la variable:

let = nombreAuto = "Volvo";

Después de esta declaración, la variable tiene un valor definido como una cadena de texto "Volvo" y que esta disponible para su acceso en los scripts.

Para reasignarle un nuevo valor a esta variable, de igual manera se realiza con el operador de asignación "=" (signo igual):

nombreAuto = "Mercedes";

Ahora la variable tiene el valor definido como otra cadena de texto "Mercedes", y que de igual manera esta disponible para acceso en los scripts. Pero ojo, la cadena "Volvo" ya no existe.

Las variables declaradas con let no pueden ser redeclaradas

Las variables definidas con la palabra reservada let tienen la restricción de que una vez declaradas ya no pueden ser declaradas de nuevo.

Esto es una diferencia con las variables declaradas con la palabra reservada var, en donde si es posible por tener esta restricción, así, las variables let son más seguras para no alterar el valor por error en los script de JavaScript.

let x = "Hola Mundo";
let x = 1; // Error: x ya fue declarada.

var y = "Hola";
var y = 3; // Si es posible con var

Ámbito de una variable declarada con let

En el siguiente ejemplo, creamos la variable nombreAuto y le asignamos el valor "Volvo". Después mostramos la valor dentro del párrafo HTML con id="demo":

<p id="demo"></p>

<script>
let nombreAuto = "Volvo";  
document.getElementById("demo").innerHTML = nombreAuto;
</script>

Tomando en cuenta este ejemplo, la declaración de la variable nombreAuto se hace fuera de cualquier bloque, entonces; la variable tiene un ámbito global, así será accesible desde cualquier script de la página y podremos accesarla inclusive dentro de un bloque:

<p id="demo"></p>

<script>
let nombreAuto = "Volvo";
{
  document.getElementById("demo").innerHTML = nombreAuto; // Muestra Volvo
}
</script>

Pero no será así, si la variable var se declara dentro de una función:

<script>

function prueba1(){
  let nombreAuto = "Volvo";
  document.getElementById("demo").innerHTML = nombreAuto; // muestra Volvo
}

document.getElementById("demo").innerHTML = nombreAuto; // Error

</script>

El error ocurre porque lal variable nombreAuto se declaró dentro de la función prueba1() y solo ahí existe dicha variable, así cuando se accesa a dicha variable dentro de la función, es totalmente accesible. Pero cuando se intenta accesar a dicha variable pero fuera de la función ocurrirá el error porque esta variable no existe fuera de la función.

Mismo comportamiento en los bloques acotados por {}

En JavaScript los bloques de código se acotan por medio de la llave de apertura { y terminan con la llave de cierre }. Como se ve en el código anterior el código de la función es acotado por estas llaves, y el ámbito de las variables se limita a este bloque.

A diferencias de las variables declaradas con var, las declaraciones declaradas con let si tienen un el mismo comportamiento en los bloques de código acotados por la llave de apertura { y llave de cierre }.

Veamos y analicemos el siguiente código JavaScript:

<script>

let x = 1;
document.getElementById("muestra1").innerHTML = x; // muestra 1

function prueba2(){
  let x = 2;
  document.getElementById("muestra2").innerHTML = x; // muestra 2
}

prueba2();
document.getElementById("muestra3").innerHTML = x; // muestra 1

let i = true;
if( i ){
  let x = 3;
  document.getElementById("muestra4").innerHTML = x; // muestra 3
}

document.getElementById("muestra5").innerHTML = x; // muestra 1

</script>

Explicando las 5 muestras:

1. x como global vale:
   Al principio del script se declarada la variable x como global y se la asigna el valor de 1, posteriormente se muestra.
2. x como local dentro de la función vale:
   Dentro de la función se declara una nueva variable x y se le asigna el valor de 2, posteriormente se muestra.
   La variable global x que se declaró al principio del script queda oculta dentro la función y no se esta alterando, esto porque dentro de la función ahora existe otra variable local llamada exactamente igual como x.
3. x como global tanto fuera como después de la llamada a la función vale:
   Mostramos el valor de x global y comprobamos que su valor es el mismo que se le asigno inicialmente.
   Esto porque una vez fuera de la función de nuevo es accesible la variable x global declarada al principio del script y su valor no fue alterado. La otra variable local llamada de igual forma como x dentro de la función ya no existe aquí porque ya no se esta dentro de la función.
4. x global dentro de la estructura if vale:
   (Declaramos una variable i solo para ejecutar una condición verdadera con la estructura de control if)
   Una vez ejecutándose la estructura if, declaramos la variable x como local dentro del bloque acotado por la estructura if y mostramos su valor.
   Aquí el comportamiento es diferencias de las variables var, dado que las variables let respetan todos bloques de acotados con llaves {}, ya sean funciones, estructuras de control o bloques simples no condicionados.
5. x fuera de la estructura if vale:
   Para fines de comprobar que la variable x global no se altero su valor original la mostramos.