Javascript let vs var: ¿Cuáles son las diferencias?

Hasta la introducción de la especificación ES6 los programadores Javascript estaban acostumbrados a declarar cada variable con la palabra clave var, la única disponible en ese momento. Con ES6, sin embargo, se han introducido dos nuevas palabras clave, let e const, que conllevan algunas diferencias en el uso. Veamos entonces más detalladamente cuales son las características de let vs var en Javascript.

Alcance local o global: ¿Cuál es la diferencia?

Antes que nada, aclaremos el concepto de scope, es decir donde una variable o una constante pueden actuar en una específica parte del código. El alcance, de hecho, es una de las principales diferencias entre let e var.

Alcance local

El alcance local se refiere únicamente a un bloque específico, es decir a las líneas comprendidas entre dos corchetes {}. Las constantes y las variables declaradas en el interior de un bloque tiene entonces un alcance local. Cuando utilizamos las palabras clave const o let para indicar constantes o variables, estas funcionarán entonces solamente en el bloque en el que están declaradas. Serán, por el contrario, inaccesibles al exterior del bloque en cuestión.

Alcance global

Una variable o una constante declaradas fuera de una función y no limitadas entre corchetes {} en un bloque tienen el alcance global. Son entonces accesibles y utilizables en el script a nivel global.

Está bien señalar que las variables declaradas en el interior de un bloque tienen prioridad frente a las del alcance global. Como veremos más adelante, la palabra clave let se puede usar para evitar que la variable local se sobreponga a una global.

let vs var en Javascript

Como hemos ya anticipado, antes de la llegada de ES6 era posible declarar las variables solamente a través de la palabra clave var. ES6 ha introducido las nuevas palabras clave const y let para declarar constantes y variables.

La palabra clave const, como es fácil de intuir, se utiliza para declarar una constante, es decir una variable que no se puede reasignar. Su alcance está limitado al bloque en el cual está declarada. Veamos ahora más detalladamente las diferencias específicas en las palabras clave para las variantes, es decir let vs var en Javascript. 

La palabra clave let

La palabra clave let ha sido utilizada para declarar variables ligadas al bloque en el que aparece. Declarar una variable con let limita entonces el alcance a ese específico bloque. Esto significa también que no se sobrescribirá variables globales y no será accesible a través del objeto window.

Si intentamos recordar una variable indicada con let más allá del bloque en el cual se encuentra recibiremos en la pantalla un mensaje de Reference error. 

Las variables declaradas con let, además, no se pueden volver a declarar en el interior del mismo alcance, sino solamente en bloques diferentes.

La palabra clave var

Una variable declarada a través de la palabra clave var no está limitada al bloque, pero se puede utilizar en el interior de la función donde se encuentra. La variable tiene un alcance de funcionamiento. En este caso, la variable puede ser de nuevo denominada más allá del bloque en el cual está declarada en cuanto no está limitada al alcance del bloque. Tiene además alcance global, siendo accesible a través del objeto window. A diferencia de la variable let, la variable var puede ser de nuevo declarada en el interior del mismo alcance. En este caso el primer valor será simplemente reemplazado. 

Hoisting de let vs var en Javascript

Hoisting quiere decir el comportamiento de Javascript que permite utilizar variables antes de que estuvieran declaradas. Esto es cierto para las variables indicadas con la palabra clave var, que ya son accesibles en la parte superior del bloque de código en el que se encuentran, aunque en realidad solo serán declaradas más abajo.

Esto no se aplica a las variables indicadas con la palabra clave let. Estas no se inicializan antes de la declaración real, e intentar usarlas antes de la línea de código en la cual aparecen resultará en un Reference error.

Resumen de las diferencias entre let vs var en Javascript

En conclusión, existen cuatro diferencias principales al declarar las variables con let vs var en Javascript, es decir:

1. El alcance: mientras la palabra clave let crea una variable cuyo alcance está ligado al bloque en el cual está declarada, la palabra clave var crea una variable con el alcance de función; 
2. La re-declaración de una variable: No es posible utilizar en el interior del mismo alcance la palabra clave let, que crearía entonces un Reference erro en la consola. Con la palabra clave var, por el contrario, se tiene más flexibilidad y es posible re-declarar las variables sin problemas;
3. Hoisting: Las variables let no se pueden utilizar antes de la línea en la cual son declaradas, mientras que las variables var son inicializadas ya desde el inicio del bloque en el que aparecen;
4. Propiedades globales: Si las variables var se utilizan más allá de una función crea una variable global accesible a través del objeto window, que no sucede por ejemplo con la variable let.