Diferencias entre var y let en JavaScript

Hasta hace unos años lo normal era usar var para declarar las variables en JavaScript. Sin embargo desde ES6, se introdujo la palabra clave let. Esto introduce tres cambios principales con respecto al uso de var. Con let:

• No se puede llamar a una variable antes de declararse.
• No se puede volver a declarar una variable con el mismo nombre que otra.
• La variable acota su ámbito al bloque en que se haya definido.

Pasemos a ver el significado de cada punto con ejemplos de código muy sencillitos.

No se puede llamar a una variable antes de declararse

// En esta función usamos "hello" antes de tener su declaración con var.
function testVar() {
  hello = 345;
  var hello = 123;
  console.log(hello);
}

// Si llamamos a la función, no se produce ningún error e imprime: 123
testVar();

// Si hacemos lo mismo con let, obtendremos un error.
function testLet() {
  hello = 345;
  let hello = 123;
  console.log(hello);
}

// Al llamar a la función tendremos el error: Uncaught ReferenceError: Cannot access 'hello' before initialization
testLet(); 

No se puede volver a declarar una variable con el mismo nombre que otra

// En esta función se define dos veces la variable "hello" mediante el uso de var.
function testVar() {
  var hello = 123;
  var hello = 234;
  console.log(hello);
}

// Esta llamada no provoca ningún error e imprime: 234
testVar()

// En esta ocasión no podremos ni llamar a la función, porque al crearla se nos devolverá el
// error: Uncaught SyntaxError: Identifier 'hello' has already been declared.
function testLet() {
  let hello = 123;
  let hello = 234;
  console.log(hello);
}

La variable acota su ámbito al bloque en que se haya definido

function scope() {
  var globalVar = "Hola";
  let globalLet = "Mundo";

  for (var indexVar = 0; indexVar < 1; ++indexVar) {
    console.log("indexVar dentro del bucle: " + indexVar);
  }
  console.log("indexVar fuera del bucle: " + indexVar);

  for (let indexLet = 0; indexLet < 1; ++indexLet) {
    console.log("indexLet dentro del bucle: " + indexLet);
  }

  // Esta llamada si estuviera descomentada nos daría el error: Uncaught ReferenceError: indexLet is not defined
  // console.log("indexLet fuera del bucle: " + indexLet);

  if (true) {
    var inIfVar = "Magia global";
    let inIfLet = "Mejor sin magia";
  }

  console.log("inIfVar fuera del if" + inIfVar);

  // Esta llamada si estuviera descomentada nos daría el error: Uncaught ReferenceError: inIfLet is not defined
  // console.log("inIfLet fuera del if" + inIfLet);

  console.log("globalVar: " + globalVar);
  console.log("globalLet: " + globalLet);
}

En este último ejemplo, como el código es más largo, pasemos a ver lo que ocurre con cada variable declarada:

• globalVar: tiene de ámbito toda la función.
• globalLet: tiene de ámbito toda la función.
• indexVar: aunque se declara en el bucle. Ya sabemos se use donde se use, la declaración con var, es equivalente a poner una línea "var indexVar;" al principio de la función.
• indexLet: se declara dentro del bucle, de forma que en cuanto éste termina, la variable deja de existir.
• inIfVar: ocurre lo mismo que con indexVar. Aunque esté dentro del bloque condicional, es como si se hubiera declarado al principio de la función.
• inIfLet: sólo vive dentro del bloque condicional en el que se encuentra. Desde fuera ya no existe.

Resumen

Hoy hemos aprendido las diferencias entre let y var. Y es que, de ahora en adelante deberías usar let, ya que está ampliamente admitido por los navegadores modernos, y nos puede ayudar a evitar errores en el código, principalmente: evitando que tengamos una variable que se puede usar sin estar declarada, que una variable se pueda declarar dos veces (perdiendo un poco el contexto de su uso y los posibles problemas derivados), o que sea modificada en un ámbito que no toque. Junto con const, debería ser la forma principal de declarar elementos en nuestra aplicación.

Lo anterior aplicará siempre y cuando se vaya a usar el código en navegadores relativamente modernos; si te toca hacer código para IE... pues siendo sinceros, dile a tu empresa que se suba al carro del siglo XXI 😉.