¿Quieres saber cual es la diferencia entre var y let en JavaScript? Aunque son dos elementos similares, en este artículo te explicamos los aspectos que los diferencian.
¡Empezamos!
Índice de Contenidos
Al grano: Diferencia entre var y let en JavaScript
Si has llegado a este artículo, entiendo que conoces el concepto de variable y la existencia de diferentes formas de variable en JavaScript, por lo que iré al grano. Pero si desconoces estos conceptos, en los siguientes puntos los explico con mayor profundidad.
En JavaScript, tanto var como let son utilizados para declarar variables. Sin embargo, hay una diferencia importante en cómo funcionan.
La principal diferencia es que var tiene un alcance de función (function scope), mientras que let tiene un alcance de bloque (block scope). Esto significa que si declaras una variable con var dentro de una función, puedes acceder a ella desde cualquier lugar dentro de esa función. Por el contrario, si declaras una variable con let dentro de un bloque, como un if o un for, solo puedes acceder a ella dentro de ese bloque.
Además, las variables declaradas con var pueden ser utilizadas antes de ser declaradas (hoisting). Por otro lado, las variables declaradas con let no se pueden utilizar antes de su declaración.
En el siguiente ejemplo te muestro un código HTML que puedes copiar y abrir con tu navegador web. En él, se hace uso de las variables let y var dentro de un bloque condicional if. Posteriormente, se trata de mostrar en consola el valor de ambas variables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let vs Var</title>
</head>
<body>
<script>
var condicion = true;
if(condicion){
var edad1 = 25;
let edad2 = 32;
}
console.log(edad1);
console.log(edad2);
</script>
</body>
</html>
Sin embargo, al observar la consola del navegador, verás lo siguiente:
Como ves, la variable definida con var, es accesible fuera del bloque if y se puede mostrar en pantalla. Sin embargo, la variable creada con let no existe fuera del bloque donde se ha definido, por lo que no se puede emplear fuera del mismo.
Si no entiendes el concepto de variable y qué tipos existen en JavaScript, en los siguientes ejemplos profundizo en estos conceptos.
El concepto de variable en programación
En programación, una variable es un contenedor para un valor, como un número, un texto, un objeto, etc. Las variables permiten que los desarrolladores almacenen y manipulen datos en sus programas.
En JavaScript, las variables se declaran utilizando una de las palabras clave var, let o const.
Por ejemplo, en el siguiente código se ha declarado una variable llamada «nombre» utilizando la palabra clave var. Luego, se ha asignado el valor «Juan» a la variable «nombre» y finalmente, se ha utilizado la función console.log() para imprimir el valor de la variable en la consola del navegador.
// Declarar una variable llamada "nombre"
var nombre;
// Asignar un valor a la variable "nombre"
nombre = "Juan";
// Imprimir el valor de la variable "nombre" en la consola del navegador
console.log(nombre);
const, let y var en JavaScript
Aunque const, let y var se utilizan para declarar varibales en JavaScript, cada una tiene sus propias características:
- const: se utiliza para declarar una variable cuyo valor no cambiará a lo largo del programa. Una vez que se le asigna un valor, no se puede reasignar. Las variables declaradas con const tienen un alcance de bloque.
- let: se emplea para declarar una variable cuyo valor puede cambiar a lo largo del programa. Las variables declaradas con let tienen un alcance de bloque.
- var: sirve para declarar una variable cuyo valor puede cambiar a lo largo del programa. Las variables declaradas con var tienen un alcance de función.
Observa el siguiente ejemplo:
var controlador = true;
if (controlador) {
// Declaración de variables con const, let y var
const a = 1;
let b = 2;
var c = 3;
}
// Intentar reasignar los valores de las variables
a = 4; // No se permite la reasignación porque a es una constante
b = 5; // No se permite la reasignación porque b no es accesible fuera de su bloque
c = 6; // Se permite la reasignación
Te invito a probar y modificar el código anterior para entender el funcionamiento de las variables en JavaScript.
Resumen: let vs var en JavaScript
En resumen, las variables son contenedores para almacenar valores en un programa. En JavaScript, se pueden declarar variables utilizando las palabras clave var, let o const. La principal diferencia entre var y let es que var tiene un alcance de función y let tiene un alcance de bloque.
Espero que este artículo te haya ayudado a entender la diferencia entre var y let en JavaScript. Si tienes dudas, puedes dejarme un comentario.
¡Hasta la próxima!
