Diferencia entre let y var en JavaScript

Este artículo tutorial explica el funcionamiento real de las palabras clave var y let en JavaScript y también sus diferencias clave.

Al igual que otros lenguajes de programación, JavaScript tiene variables para almacenar valores y datos. Y en JavaScript, usamos las palabras clave let y var para declarar variables.

Algunas personas piensan que estas dos palabras clave se pueden usar indistintamente, pero eso no es cierto. Las diferencias clave entre los dos pueden causar errores importantes en nuestra programación.

Antes de la actualización de ES6 a JavaScript, solo había una forma de declarar variables y constantes en JavaScript. Pero desde la actualización de ES6, ahora tenemos las palabras clave let y const que se usan para declarar variables y constantes.

Una de las principales razones para agregar las palabras clave let y const a JavaScript fue que la variable declarada con la palabra clave var no era el bloque en el que se declaró. En cambio, su alcance se limitó a la función, lo que provocó algunos problemas de programación, que discutiremos en la última parte del artículo.

Veamos este segmento de código para una mejor comprensión.

function example() {
  for (let i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

En este segmento de código, declaramos la variable i en el bucle for y usamos un console.log para obtener los valores de la variable. No hemos usado los corchetes {} después del bucle for, por lo que el bloque para el bucle for es solo la siguiente línea.

Sin embargo, hemos utilizado un console.log extra para mostrar el valor de i. Pero el segundo console.log no podrá obtener el valor de la variable i y mostrará el siguiente error:

ReferenceError: i is not defined

Este error ocurrió porque el alcance de la variable i era solo para el bloque de bucle for y no se podía acceder fuera del bloque. Entonces, de esta manera, no podemos usar la variable fuera del bloque ya que la variable declarada usando la palabra clave let tiene su alcance limitado solo al bloque.

Para ver la diferencia entre let y var mira el siguiente segmento de código:

function example() {
  for (var i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

En el código anterior, podemos observar que hemos utilizado la palabra clave var en lugar de la palabra clave let.

Si bien quedan los mismos dos console.log del ejemplo anterior, en este caso, el segundo console.log también tendrá una salida. Entonces, echemos un vistazo a la salida:

0
1
2
3
4
5
6
7
8
9
10

El primer console.log imprimía los valores desde 0 hasta 9, al igual que la condición i<10.

Pero podemos ver 10 como una salida que ciertamente no salió del primer console.log. Por lo tanto, este 10 es la segunda salida de console.log.

El problema aquí es que se suponía que la variable i se usaría dentro de su bloque, pero como console.log accedió a ella fuera del bloque, significa que ha excedido su alcance.

Demuestra que las palabras clave let y var se utilizan para declarar variables, pero la palabra clave var declara variables limitadas al bloque en términos de su alcance. Sin embargo, la palabra clave var tiene su alcance limitado a la función.

Si declaramos una variable fuera de la función, tanto let como var tienen otra gran diferencia entre ellos. Si usamos la palabra clave let fuera de la función, se crea una variable local a la que no se puede acceder desde el exterior.

Pero en caso de que usemos la palabra clave var, se convierte en una variable global. Echemos un vistazo al siguiente segmento de código:

var color = 'blue';
let model = '2021';

Aquí, se han declarado dos variables en este segmento de código, una usando la palabra clave let y la otra usando la palabra clave var. Entonces, la variable declarada usando la palabra clave var se ha convertido en una variable global y se adjuntará al objeto window en el navegador.

En los navegadores tenemos un objeto window que tiene muchas propiedades y métodos y es muy complejo. Los desarrolladores de aplicaciones front-end conocen ampliamente el objeto window, ya que trabajan mucho con él.

Cada vez que usamos la palabra clave var fuera de una función, la variable se convierte en una variable global y se une al objeto window y se puede acceder desde el objeto window. En este caso, se accedería como window.color mostrará el valor dentro de la variable color, que es azul.

Usamos bibliotecas de terceros y declaramos variables fuera de la función usando la palabra clave var. Si la biblioteca de terceros tuviera una variable con el mismo nombre que nuestra variable, esa variable sobrescribiría nuestra variable.

Es otra razón para que evitemos agregar nada al objeto ventana; nos referimos a evitar el uso de la palabra clave var en tales casos.