Diferencia entre Let y Var en Javascript

2020-03-11 Laravel

De seguro has venido utilizando toda la vida var y ahora estás preguntandote para qué sirve let en términos de la declaración e inicialización de una variable. Si es así, o bien no conoces ninguna de las dos palabras reservadas y estás inciando en javascript este es el lugar indicado para despejar esa duda.

Definición global de una variable

La primera diferencia radica en la definición global de una variable. Cuando quieres que una variable quede guardada de manera global debes utilizar VAR. La forma de verificar que una variable está guardada de manera global es comprobar si está en el objeto window.

var varVariable = "Hola Mundo!";
let letVariable = "Hola Mundo!";
console.log(window.varVariable); // Hola Mundo!
console.log(window.letVariable); // undefined

Una ejecución del ejemplo anterior muestra que la única variable definida en el espacio global es varVariable.

Ámbito dentro de un bloque

Las variables definidas con LET están disponibles solamente dentro del bloque javascript en el cual se crearon. Veamos un ejemplo sencillo de una definición dentro de un bloque de desición.

if (true) {
   let message = 'All right';
} else {
   let message = 'Something looks wrong';
}

console.log(message); // Uncaught ReferenceError: ...

Como puedes ver la variable message no está definida al momento que queremos imprimir su valor debido a que fue creada dentro del bloque if{}. En este caso el intérprete arroja una excepción. Dejando claro esto, veamos el siguiente ejemplo en donde es bastante común su uso.

for (let i=0; i<3; i++){
   console.log(i); // 0, 1, 2
}

console.log(i); // Uncaught ReferenceError: ...

Al ejecutar el mismo ejemplo utilizando var vemos que la variable queda definida después del ciclo.

for (var i=0; i<3; i++){
   console.log(i); // 0, 1, 2
}

console.log(i); // 3

Ámbito dentro de una función

El comportamiento de VAR y LET es el mismo dentro de una función.

function myFunction(){
   let letVariable = "Hola";
   var varVariable = "mundo!";
   console.log(letVariable); // Hola
   console.log(varVariable); // mundo!
}

console.log(window.letVariable); // undefined
console.log(window.varVariable); // undefined

Redeclaración de una variable

Las variables declaradas con LET no se puede redeclarar.

let foo;
let foo; // Uncaught SyntaxError ...

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.