Variables: var, let y const

¿Qué es una Variable?

Imagina una variable como una caja etiquetada donde puedes guardar información. Cada caja tiene un nombre único (identificador) que te permite encontrar lo que guardaste dentro. En JavaScript, estas "cajas" pueden contener diferentes tipos de datos: números, textos, booleanos, objetos y más.

Antes de usar una variable, debemos declararla. Esto le dice a JavaScript que Reserve espacio en memoria para almacenar nuestro valor. Vamos a explorar las tres palabras clave que tenemos disponibles.

La Palabra Clave "var"

var fue la forma original de declarar variables en JavaScript desde sus inicios. Aunque todavía funciona, tiene algunos comportamientos que pueden resultar confusos, especialmente para principiantes.

var nombre = "Carlos";
var edad = 25;
var esEstudiante = true;

console.log(nombre); // Imprime: Carlos
console.log(edad);  // Imprime: 25

Características de var:

• Función alcance (function scope): La variable solo existe dentro de la función donde fue declarada.
• Hoisting: Las declaraciones se mueven al inicio de su ámbito, pero la asignación permanece en su lugar.
• Redeclaración permitida: Puedes declarar la misma variable múltiples veces sin errores.

function ejemploHoisting() {
  console.log(mensaje); // undefined (no error, pero valor inesperado)
  var mensaje = "Hola mundo";
  console.log(mensaje); // "Hola mundo"
}

// Equivale aproximadamente a:
function ejemploHoisting2() {
  var mensaje; // La declaración se "eleva"
  console.log(mensaje); // undefined
  mensaje = "Hola mundo"; // La asignación permanece aquí
  console.log(mensaje); // "Hola mundo"
}

La Palabra Clave "let"

let fue introducida en ES6 (2015) y解决了 muchos de los problemas asociados con var. Es la opción recomendada cuando necesitas una variable cuyo valor cambiará con el tiempo.

let contador = 0;
contador = contador + 1; // Perfectamente válido
contador += 5;
console.log(contador); // Imprime: 6

let nombre = "Ana";
nombre = "María"; // Cambiamos el valor
console.log(nombre); // Imprime: María

Características de let:

• Bloque alcance (block scope): La variable solo existe dentro del bloque { } donde fue declarada.
• Temporal Dead Zone: No puedes usar la variable antes de su declaración, lo cual previene errores.
• Redeclaración prohibida: No puedes declarar la misma variable dos veces en el mismo ámbito.

// Ejemplo práctico: contador en un bucle
for (let i = 0; i < 5; i++) {
  console.log("Iteración número " + i);
}
// console.log(i); // Error: i no está definido fuera del bucle

// Con var, el comportamiento sería diferente y problemático:
for (var j = 0; j < 5; j++) {
  console.log("Iteración número " + j);
}
console.log(j); // Imprime: 5 (j sigue existiendo, ¡peligroso!)

La Palabra Clave "const"

const también fue introduced en ES6 y se usa para declarar valores que no cambiarán durante la ejecución del programa. Es ideal para referencias ثابتas como configuraciones, claves API o valores que queremos proteger de modificaciones accidentales.

const PI = 3.14159;
const NOMBRE_APLICACION = "MiApp";
const TAX_RATE = 0.16;

console.log(PI); // Imprime: 3.14159
console.log(NOMBRE_APLICACION); // Imprime: MiApp

Características de const:

• Bloque alcance (block scope): Al igual que let, solo existe dentro del bloque donde se declara.
• Inicialización obligatoria: Debes asignar un valor al momento de la declaración.
• No permite reassignación: No puedes cambiar el valor después de asignarlo.

// Con objetos:
const usuario = {
  nombre: "Pedro",
  edad: 30
};

// Esto NO funciona:
// usuario = { nombre: "Juan" }; // Error!

// Esto SÍ funciona (modificamos propiedades, no la referencia):
usuario.nombre = "Juan";
usuario.edad = 35;
console.log(usuario); // { nombre: "Juan", edad: 35 }

// Con arrays:
const colores = ["rojo", "azul", "verde"];
colores.push("amarillo"); // Perfectamente válido
console.log(colores); // ["rojo", "azul", "verde", "amarillo"]

Comparación Directa

¿Cuál Debería Usar?

La regla general es sencilla:

1. Por defecto, usa const. Si el valor no necesita cambiar, decláralo como constante. Esto hace tu código más predecible y expresivo.
2. Si necesitas reasignar, usa let. Cuando sepas que el valor cambiará, let es la elección correcta.
3. Evita var. En código moderno, no hay razón para usar var. Si ves var en código existente, considera refactorizarlo.

// Ejemplo completo: Calculadora de áreas

// Constantes (nunca cambian)
const PI = 3.14159;
const FACTOR_CONVERSIÓN = 0.01; // metros a centímetros

// Variables (pueden cambiar)
let áreaCírculo;
let radio = 5;

// Cálculo
áreaCírculo = PI * radio * radio;
console.log("Área del círculo:", áreaCírculo);

// Cambiamos el radio
radio = 10;
áreaCírculo = PI * radio * radio;
console.log("Nuevo área:", áreaCírculo);

Errores Comunes y Cómo Evitarlos

const precio = 100;
precio = 150; // TypeError: Assignment to constant variable

// Solución: Usa let
let precio2 = 100;
precio2 = 150; // Correcto

const nombre; // SyntaxError: Missing initializer in const declaration

// Solución: Siempre asigna un valor al declarar
const nombre = "Carlos";

let edad = 25;
let edad = 30; // SyntaxError: Identifier 'edad' has already been declared

// Solución: No redeclares
let edad2 = 25;
edad2 = 30; // Esto sí funciona

Buenas Prácticas

1. Nombra descriptivamente: Usa nombres que expliquen el propósito de la variable.
2. Seguir convenciones: Usa camelCase para variables (primer palabra en minúscula, siguientes con mayúscula inicial).
3. Declare primero: Agrupa todas tus declaraciones al inicio de cada bloque o función.
4. Inicializa inmediatamente: Evita dejar variables sin valor inicial cuando sea posible.

// Malos nombres (evitar)
let x = 5;
let data;
let temp;

// Buenos nombres (preferir)
let númeroDeUsuarios = 5;
let fechaDeNacimiento;
let temperaturaTemporal;

Resumen Práctico

Usa const para valores que no cambiarán, let cuando necesites reasignar, y evita var completamente en código nuevo. Esta simple regla te protegerá de muchos errores comunes y hará tu código más fácil de entender.

const objeto = { a: 1 };
objeto.b = 2;
console.log(objeto);