JavaScript se ha caracterizado por manejar el scope de una variable dentro de una función, mejor conocido como lexical scope. La nueva versión nos permite declarar variables locales, limitando el scope a un bloque.

Esto significa que ahora podremos definir una variable dentro de un bloque if o un for, y solo existirá dentro de ese bloque, una vez que termina la ejecución de ese bloque la memoria sería liberada.

Para definir una variable local utilizamos el operador let, este operador nos permitirá crear la variable dentro del bloque en el que estamos, por ejemplo.

let x = 1;

if(true){
  let x = 5;
  console.log(x); //=> 5
}

console.log(x); //=> 1

Como se puede observar en el ejemplo, estamos creando dos variables x, la variable dentro del bloque if solamente existirá en ese bloque, fuera del if existirá la primera declaración de x.

Otro ejemplo de uso de variables locales es un for, por ejemplo:

let callbacks = [];

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

callbacks[5](); // 5

console.log(i); //Uncaught ReferenceError: i is not defined

Como se puede observar, si intentamos acceder a la variable i fuera del bloque for, ocurrirá un error, ya que i no existe fuera del bloque for.

Algo importante a notar del ejemplo anterior es que la variable i se esta re-declarando por cada iteración del ciclo, por lo tanto dentro de cada función que creamos se imprimirá correctamente el valor deseado. Como ejercicio de práctica, intenta cambiar let por var en la declaración de i, ¿Que número imprime en la consola cuando ejecutamos el callback en la posición 5? (Deja un comentario con tu respuesta)

Soporte

Actualmente la mayoría de los navegadores modernos soportan esta característica, si requieres soportar nevegadores antiguos Babel es la solución. Te dejo una gráfica del soporte actual.

Soporte de variables locales

Declaración de bloques 

Para declarar un bloque simplemente podemos usar las llaves { y }, con esto podemos definir un nuevo scope local, todas las variables (creadas con let) existirán únicamente dentro de este bloque.

{
  let x = 1, 
      y = 2,
      z;
}

También podemos declarar más variables locales usando un mismo let, asignarle valores inmediatamente o definirlas sin valor alguno.

Conclusiones

Una de las principales razones para utilizar variables locales es el hecho de que estas variables serán destruidas en cuanto termine la ejecución del bloque, esto hará que el navegador tenga un mejor manejo de la memoria, permitíendonos tener aplicación más eficientes.

Personalmente he venido usando esta sintaxis desde ya hace varios meses, actualmente con Babel podemos transpilar a ES5 si necesitamos soportar navegadores antiguos. Si estas usando Chrome abre la consola y corre los ejemplos que he puesto, verás como funcionan de maravilla!

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso JavaScript Next, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!