JavaScript
Variables
Explica cómo declarar, inicializar y reasignar variables con const, let y var, además de diferenciar reasignación, mutación y nombres claros.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Explica cómo declarar, inicializar y reasignar variables con const, let y var, además de diferenciar reasignación, mutación y nombres claros.
Una variable es un nombre que usamos para encontrar un valor mientras el programa se está ejecutando. Puedes imaginarla como una etiqueta pegada a una caja: la etiqueta nos permite volver a encontrar lo que guardamos.
Cuando escribimos un programa necesitamos recordar información: el nombre de una persona, el total de una compra, si una sesión está activa o una lista de productos. Las variables nos permiten darle un nombre claro a cada valor.
const userName = "Nicolás";
let cartTotal = 0;Aquí userName y cartTotal son variables. Los valores guardados son "Nicolás" y 0.
Aunque suelen ocurrir juntas, son acciones diferentes:
let score; // Declaración
score = 10; // Inicialización
score = 20; // ReasignaciónEntender estas palabras ayuda a explicar con precisión qué está haciendo el código.
Usa const cuando la variable no necesite apuntar a otro valor.
const productName = "Teclado";
const unitPrice = 120000;Una variable creada con const no puede reasignarse:
const productName = "Teclado";
productName = "Mouse"; // TypeErrorconst user = {
name: "Nicolás",
};
user.name = "Nico"; // Válido
user = {}; // ErrorUsa let cuando el valor deba cambiar durante la ejecución.
let attempts = 0;
attempts = attempts + 1;
attempts += 1;
attempts++;Las tres últimas expresiones incrementan el valor, aunque no siempre son intercambiables dentro de una expresión más grande.
var permite reasignar y redeclarar una variable. Además, tiene scope de función en lugar de scope de bloque. Estas reglas pueden producir comportamientos inesperados.
var status = "pending";
var status = "completed"; // PermitidoEn código moderno normalmente se evita. Aun así, es importante entenderlo porque aparece en proyectos antiguos y está relacionado con scope y hoisting.
No porque todo valor deba ser inmutable, sino porque deja clara una intención:
Esta variable no necesita apuntar a otra cosa.
Eso reduce cambios accidentales y facilita leer el código.
const products = getProducts();
const activeProducts = products.filter((product) => product.isActive);
let total = 0;
for (const product of activeProducts) {
total += product.price;
}products y activeProducts no se reasignan. total sí cambia, por eso utiliza let.
Un buen nombre indica qué representa el valor sin obligarnos a leer todo el contexto.
// Poco claro
const d = 7;
const x = true;
// Más claro
const trialDays = 7;
const isAuthenticated = true;En JavaScript se utiliza normalmente camelCase:
const customerName = "Laura";
const pendingOrderCount = 3;
const hasActiveSubscription = false;Las constantes compartidas que representan una regla fija suelen escribirse en mayúsculas:
const MAX_LOGIN_ATTEMPTS = 3;
const DEFAULT_PAGE_SIZE = 20;No es necesario escribir en mayúsculas cada variable declarada con const. Se reserva para constantes con significado global o de configuración.
const unitPrice = 25000;
let quantity = 2;
let subtotal = unitPrice * quantity;
quantity = 3;
subtotal = unitPrice * quantity;
console.log(subtotal); // 75000Paso a paso:
unitPrice no cambia, por eso utiliza const.quantity puede cambiar cuando el usuario agrega otra unidad.subtotal se vuelve a calcular, por eso está declarado con let.Una alternativa más clara es calcular el subtotal cuando se necesita, evitando guardar datos derivados innecesariamente:
const unitPrice = 25000;
let quantity = 3;
const getSubtotal = () => unitPrice * quantity;
console.log(getSubtotal()); // 75000const settings = {
theme: "dark",
};
settings.theme = "light"; // VálidoLa variable conserva la misma referencia. Lo que cambió fue una propiedad del objeto.
let apiUrl = "https://api.example.com";Si nunca se reasigna, const comunica mejor la intención:
const apiUrl = "https://api.example.com";let user = { name: "Ana" };
user = { name: "Laura" }; // Reasignación
user.name = "Marta"; // MutaciónSon operaciones distintas y más adelante serán importantes para comprender objetos, referencias e inmutabilidad en React.
const por defecto y cambia a let cuando necesites reasignar.const impide reasignar la variable, pero no hace inmutable un objeto.var tiene reglas diferentes de scope, redeclaración y hoisting.const todavía puede recibir elementos?let: birthDate, currentPage, apiBaseUrl?user y cambiar user.name?var en código moderno?const impide reasignar la variable, pero no bloquea la mutación del array.currentPage, porque puede cambiar durante la navegación.user es una reasignación; cambiar user.name es una mutación del objeto referenciado.let y const evitan.Para continuar, estudia Tipos de datos y valores. Después podrás entender mejor qué se guarda en una variable y cómo JavaScript trata cada clase de valor.