Declaraciones de Variables en JavaScript: Entendiendo var, let y const

El desarrollo moderno de JavaScript exige claridad en las declaraciones de variables en JavaScript—sin embargo, muchos desarrolladores aún tienen dificultades para elegir entre var, let y const. Entender el ámbito de variables ES6 no se trata solo de memorizar reglas; se trata de escribir código que comunique intención y prevenga errores antes de que ocurran.

Entendiendo las Tres Palabras Clave de Declaración en JavaScript

JavaScript ofrece tres formas de declarar variables, cada una con comportamientos distintos en cuanto a ámbito, elevación (hoisting) y reasignación. Tu elección señala diferentes intenciones tanto al motor de JavaScript como a otros desarrolladores que lean tu código.

Ámbito de Bloque vs Ámbito de Función

La diferencia fundamental entre el ámbito de variables ES6 moderno y los patrones heredados radica en cómo se contienen las variables:

function processData() {
    if (true) {
        var x = 1;  // Function-scoped
        let y = 2;  // Block-scoped
        const z = 3; // Block-scoped
    }
    console.log(x); // 1 (accessible)
    console.log(y); // ReferenceError
    console.log(z); // ReferenceError
}

Con var, las variables se filtran fuera de los bloques pero permanecen dentro de las funciones. Tanto let como const respetan los límites de bloque—cualquier llave crea un nuevo ámbito, incluyendo aquellas en bucles, condicionales y bloques simples.

La Zona Muerta Temporal Explicada

Las declaraciones de variables en JavaScript con let y const se elevan (hoisting) pero permanecen sin inicializar hasta que se alcanza su declaración. Esto crea la Zona Muerta Temporal (TDZ, por sus siglas en inglés):

console.log(myVar);   // undefined (hoisted, initialized)
console.log(myLet);   // ReferenceError (TDZ)
console.log(myConst); // ReferenceError (TDZ)

var myVar = 1;
let myLet = 2;
const myConst = 3;

La TDZ previene los errores sutiles que el comportamiento de var a menudo causaba. No puedes usar accidentalmente una variable antes de que esté correctamente inicializada—el motor lanza un error inmediatamente.

Reasignación vs Mutación

Una distinción crítica que muchos desarrolladores pasan por alto: const previene la reasignación, no la mutación:

const user = { name: 'Alice' };
user.name = 'Bob';          // Allowed (mutation)
user = { name: 'Charlie' }; // TypeError (reassignment)

const scores = [95, 87];
scores.push(91);            // Allowed
scores = [100, 100];        // TypeError

Para verdadera inmutabilidad, combina const con Object.freeze() o bibliotecas de datos inmutables. La palabra clave de declaración por sí sola no hace tus datos inmutables—hace que el enlace (binding) sea inmutable.

Mejores Prácticas Modernas para Declaraciones de Variables

Las bases de código JavaScript actuales siguen una jerarquía clara:

1. Por defecto usa const: Úsalo para valores que no serán reasignados. Esto incluye la mayoría de las variables, incluso objetos y arrays que mutarás.

2. Usa let para reasignación: Contadores de bucles, variables acumuladoras y valores que genuinamente necesitan ser reasignados.

3. Evita var en código nuevo: No hay ningún caso de uso moderno donde var proporcione beneficios sobre let.

Las herramientas modernas refuerzan estos patrones. La regla no-var de ESLint y la regla prefer-const detectan violaciones automáticamente. TypeScript trata las reglas del ámbito de variables ES6 como fundamentales, haciendo del ámbito de bloque el modelo mental por defecto.

Consideraciones de Frameworks

Los hooks de React dependen de que las declaraciones de variables en JavaScript se comporten de manera predecible:

function Counter() {
    const [count, setCount] = useState(0); // const for the binding
    
    // Wrong: Can't reassign
    // count = count + 1;
    
    // Right: Use the setter
    setCount(count + 1);
}

La API de Composición de Vue y otros frameworks modernos siguen patrones similares, donde const domina porque los sistemas de reactividad manejan las actualizaciones a través de métodos, no mediante reasignación.

Por Qué el Código Heredado Aún Usa var

Encontrarás var en bases de código más antiguas por razones históricas. Antes de ES6 (2015), era la única opción. La migración requiere pruebas cuidadosas porque:

• Cambiar var a let en bucles puede corregir errores o introducirlos, dependiendo del comportamiento de los closures
• Algún código heredado explota deliberadamente la elevación de ámbito de función de var
• Herramientas de construcción más antiguas podrían no transpilar correctamente el ámbito de variables ES6

Al refactorizar, usa herramientas automatizadas como jscodeshift con cobertura de pruebas exhaustiva. No conviertas manualmente miles de declaraciones—deja que las herramientas manejen los cambios mecánicos mientras verificas el comportamiento.

Conclusión

Las declaraciones de variables en JavaScript en código moderno siguen una regla simple: usa const por defecto, let cuando necesites reasignación, y nunca var. Esto no se trata de seguir tendencias—se trata de escribir código que exprese claramente la intención y aproveche el ámbito de variables ES6 para prevenir categorías enteras de errores. La Zona Muerta Temporal, el ámbito de bloque y las reglas de reasignación no son obstáculos—son barandillas que te guían hacia JavaScript más mantenible.

Preguntas Frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.