Declaración de variables en Javascript ES6: var frente a let y const

Si eres nuevo en Javascript o no has actualizado tu conocimiento del mismo y sigues programando igual que lo hacías en la anterior versión ES3 deberías conocer y comenzar a utilizar cuanto antes los nuevos métodos de declaración de variables disponibles en la version  ES2015: let y const.

El problema del ambito de var

Tradicionalmente en Javascript la declaración de variables se realiza con var.

var x=19;

El problema con las variables declaradas de esta manera es su ámbito o alcance, que sigue unas reglas un tanto extrañas y confusas para los desarrolladores provenientes de otros lenguajes. Para empezar, una variable definida de esta manera es accesible desde cualquier sitio de la función que la contiene, el modulo, el espacio de nombre o el ámbito global, o más concretamente desde su contexto de ejecución en curso. Por ejemplo:

function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  }
}
var g = f();
console.log(g()); // Imprime '11'

Este tipo de aplicación de alcance, si bien puede ser muy potente en ciertos escenarios, provoca gran cantidad de errores muy difíciles de localizar. Para colmo, Javascript no lanza ningún error si la misma variable se define más de una vez:

function f() {
  for (var x=0; x<2; x++) {
    console.log(x);
    for (var x=10; x<2; x++) {
      console.log(x);
    }
  }
  console.log(x); // x es accesible desde fuera del bucle for
}
f();

// Salida:
0
10
11
13

La probabilidad de ver a primer vistazo que está ocurriendo no es demasiado alta ¿verdad?. Y por si fuera poco lo anterior, las variables no declaradas tienen ámbito global:

function f() {
  x = 1; // variable no declarada, pasa a ser de ámbito global
  var y = 2;
}

f();
console.log(x); // Imprime "1"

Para resolver esta problemática en ES2015 se han incorporado dos nuevas palabras clave para definir variables: let y const. Ambas modifican el ambito de var, de manera que la variable declarada de esta manera tiene alcance local, es decir, no puede accederse fuera del bloque en el que se ha declarado. Nuestro anterior ejemplo queda así con let:

function f() {
  for (let x = 0; x < 2; x++) {
    console.log(x);
    for (let x = 10; x < 12; x++) {
      console.log(x);
    }
  }
  // console.log(x); -> Provoca un error, x no esta definida
}
// Salida:
0
10
11
1
10
11

Además, una variable declarada con let no puede ser re-declarada en el mismo bloque:

funtion f() {
  let x = 5;
  let x = 56; // error: no se puede volver a declarar x
}

Elevación de declaración (hoisting) con var frente a let y const

Otra característica de la declaración con var es que esta eleva la definición de la variable al principio de la función en la que esta se produce (lo que se conoce como hoisting), es decir, podemos referenciar la variable en el código antes de declararla, y si bien su valor no estará inicializado (la elevación afecta solo a la declaración) no recibiremos ningún error:

function f() {
  console.log(x) // salida: 'undefined'
  var  x = 10;
}

Por el contrario,  let no eleva la declaración a la parte superior del bloque, por lo que el anterior ejemplo provocaría un error:

function f() {
  console.log(x) // salida: ReferenceError: x is not defined
  let x = 10;
}

Diferencia entre let y const

Ya hemos visto que let crea una variable a nivel de bloque. const por su parte crea una constante a nivel de bloque, generando una referencia de solo lectura que es necesario inicializar en el momento de su declaración, ya que no es posible asignar la constante después:

const x = 1;

La declaración como constante no implica que el valor asignado sea inmutable, solamente que  variable no puede ser reasignada. Esto quiere decir que el siguiente código no es posible:

const x = 1;
x = 2; // error: no se puede asignar el valor de la constante

Pero si la asignación a la constante es un objeto o array el contenido de este sí puede variar:

const arr = [1,2,3];
arr.push(4); // es posible modificar el contenido del array
arr=[5,6]; // error: no es posible reasignar la constante

Mejorando el código con let y const

.¿Quiere decir esto que var debe desaparecer  de nuestro código? La respuesta es sí, en lo posible. Ademas de las razones que hemos visto anteriormente, la eficiencia en el uso de memoria es mayor ya que las variables se destruyen cuando se abandona el bloque en el que están definidas, que puede ser de mayor profundidad que el del ámbito de variables definidas con var  (donde como mínimo sera la función contenedora). Es más, deberías utilizar siempre que sea posible const, de forma que asegures que tus objetos no son reasignados inadvertidamente o por error.

Aún así hay situaciones en las que puede no ser posible sustituirlo: a diferencia de var, let no crea propiedades en el objeto global de Javascript (window en un navegador o global en node.js). Por tanto, si tenemos código antiguo o compartido con otras librerías que almacenan datos o comparten funciones en el objeto global podríamos tener que continuar con var hasta que sustituyamos esa dependencia por otro medio de comparticion de datos.