Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

DIFERENCIAS ENTRE VAR, LET Y CONST EN JAVASCRIPT MODERNO

January 12, 2026

Introducción a las declaraciones de variables en JavaScript

En el desarrollo de aplicaciones web modernas, la forma en que declaramos variables en JavaScript juega un rol fundamental para escribir código robusto, predecible y libre de errores comunes. Desde la introducción de ECMAScript 2015, conocido como ES6, los desarrolladores cuentan con tres palabras clave principales para declarar variables: var, let y const. Aunque todas permiten crear variables, sus comportamientos difieren significativamente en aspectos como el alcance, el hoisting y la posibilidad de reasignación.

Comprender estas diferencias es esencial para cualquier programador que trabaje con JavaScript en entornos actuales, ya sea en frontend con frameworks como React o Vue, o en backend con Node.js. Este tutorial profundiza en cada una de estas declaraciones, con ejemplos prácticos que ilustran su uso y las implicaciones en el código real. Al final, podrás decidir con confianza cuándo emplear cada una para mejorar la calidad de tus proyectos.

Formas de declarar variables en JavaScript

JavaScript ofrece varias maneras de crear variables, aunque algunas están desaconsejadas en el código moderno.

// Declaración implícita (equivalente a var, no recomendada en modo strict)
nombre = "Juan";

// Usando var (legado)
var precio = 150;

// Usando let (recomendado para valores mutables)
let activo = true;

// Usando const (recomendado para valores constantes)
const IVA = 0.21;

Estas declaraciones se comportan de manera distinta según tres conceptos clave: el alcance de la variable, la posibilidad de reasignar valores y el comportamiento al acceder antes de la declaración. A continuación, exploramos cada uno en detalle.

El alcance de las variables en JavaScript

El alcance determina dónde una variable es accesible dentro del código. JavaScript distingue entre alcance global, de función y de bloque. Un bloque es cualquier sección de código delimitada por llaves {}.

{
    let nombre = "Ana";
    const CODIGO = 12345;
    var edad = 30;
}

console.log(edad); // 30 (accesible fuera del bloque)
console.log(nombre); // ReferenceError
console.log(CODIGO); // ReferenceError

Alcance de bloque con let y const

Las variables declaradas con let y const tienen alcance de bloque. Esto significa que solo existen dentro del bloque donde se declaran, lo que previene fugas accidentales de variables y facilita el control del flujo de datos.

Este comportamiento es particularmente útil en estructuras como bucles o condicionales.

if (true) {
    let mensaje = "Hola desde el bloque";
    const LIMITE = 100;
    var contador = 5;
}

console.log(contador); // 5 (var ignora el bloque)
console.log(mensaje); // ReferenceError
console.log(LIMITE); // ReferenceError

En entornos modernos, evitar var dentro de bloques reduce significativamente los errores relacionados con variables que se filtran inesperadamente.

Alcance de función

Dentro de una función, las tres palabras clave restringen el acceso fuera de ella, pero var se limita al alcance de función, mientras que let y const al de bloque interno.

function probarAlcance() {
    let nombre = "Luis";
    const ID = 987;
    var puntaje = 50;
}

probarAlcance();
console.log(nombre); // ReferenceError
console.log(ID); // ReferenceError
console.log(puntaje); // ReferenceError

Aquí, ninguna variable escapa de la función, independientemente de la palabra clave utilizada.

Alcance global

Las variables declaradas fuera de cualquier función o bloque tienen alcance global y son accesibles desde cualquier parte del programa.

let usuario = "admin";
const API_URL = "https://api.ejemplo.com";
var visitas = 1000;

function mostrarGlobales() {
    console.log(usuario); // admin
    console.log(API_URL); // https://api.ejemplo.com
    console.log(visitas); // 1000
}

mostrarGlobales();
console.log(usuario); // admin

Aunque funcional, el uso excesivo de variables globales puede complicar el mantenimiento de aplicaciones grandes, por lo que se recomienda minimizarlo.

Reasignación de valores a variables

Una diferencia crucial radica en la capacidad de cambiar el valor de una variable después de su declaración inicial.

let contador = 10;
contador = 20; // Permitido

const MAXIMO = 100;
// MAXIMO = 200; // TypeError: Assignment to constant variable

var legado = 5;
legado = 15; // Permitido

Las variables con let y var permiten reasignación, mientras que const no. Sin embargo, con const, si el valor es un objeto o array, sus propiedades internas sí pueden modificarse.

const configuracion = {
    tema: "oscuro",
    idioma: "es",
};

configuracion.idioma = "en"; // Permitido
console.log(configuracion.idioma); // en

// configuracion = {}; // TypeError

Esta característica hace que const sea ideal para objetos de configuración donde el enlace permanece constante, pero el contenido puede evolucionar.

Hoisting y la zona muerta temporal

El hoisting es un mecanismo de JavaScript donde las declaraciones de variables y funciones se procesan antes de la ejecución del código. Sin embargo, el comportamiento varía según la palabra clave.

Las variables var se elevan y se inicializan con undefined.

console.log(variableVar); // undefined
var variableVar = "elevada";
console.log(variableVar); // elevada

En contraste, let y const también se elevan, pero permanecen en una zona muerta temporal hasta su inicialización, provocando un ReferenceError si se accede antes.

console.log(variableLet); // ReferenceError
let variableLet = "bloqueada en TDZ";

console.log(variableConst); // ReferenceError
const variableConst = "inmutable";

La zona muerta temporal previene errores comunes asociados al hoisting de var, promoviendo un código más seguro.

function ejemploHoisting() {
    console.log(a); // undefined
    console.log(b); // ReferenceError (TDZ)
    // console.log(c); // ReferenceError (TDZ)

    var a = 1;
    let b = 2;
    const c = 3;
}

ejemploHoisting();

Este mecanismo refuerza la recomendación actual: evitar var en favor de let y const.

Mejores prácticas en el uso de var, let y const

En el ecosistema JavaScript de 2026, las guías de estilo como ESLint y las recomendaciones de la comunidad coinciden en desaconsejar var debido a sus limitaciones en alcance y hoisting.

Prioriza const para cualquier variable cuyo valor no necesite reasignación. Esto comunica intención clara y previene modificaciones accidentales.

const PI = 3.14159;
const colores = ["rojo", "verde", "azul"];
colores.push("amarillo"); // Permitido (mutación interna)

Usa let únicamente cuando la reasignación sea necesaria, como en contadores de bucles o estados mutables.

let indice = 0;
while (indice < 10) {
    console.log(indice);
    indice++;
}

Evita declaraciones implícitas o var, ya que pueden generar variables globales inesperadas en modo no strict.

En aplicaciones grandes, combinar const y let con alcance de bloque facilita la depuración y optimización por parte de motores como V8.

Ejemplos prácticos en escenarios comunes

Consideremos un caso real: manejo de estado en una función asíncrona.

async function cargarDatos() {
    const url = "https://api.datos.com"; // Constante
    let datos = null; // Mutable

    try {
        const respuesta = await fetch(url);
        datos = await respuesta.json(); // Reasignación permitida
        console.log(datos);
    } catch (error) {
        console.error("Error:", error);
    }
}

Otro ejemplo en bucles:

for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 1000 * i);
} // Imprime 0,1,2,3,4 gracias al alcance de bloque de let

// Con var imprimiría 5 cinco veces

Estos patrones destacan cómo let y const mejoran la predictibilidad del código.

Consideraciones avanzadas sobre mutabilidad

Aunque const impide reasignación, no garantiza inmutabilidad completa para objetos complejos. Para lograr inmutabilidad real, combina con Object.freeze.

const configInmutable = Object.freeze({
    puerto: 3000,
    modo: "produccion",
});

// configInmutable.puerto = 8080; // No tiene efecto en modo strict

Esta técnica es común en aplicaciones Redux o estados inmutables en React.

Errores comunes y cómo evitarlos

Un error frecuente es asumir que const hace inmutable un objeto.

Otro es acceder variables en la zona muerta temporal por orden incorrecto.

function malOrden() {
    console.log(temp); // ReferenceError
    let temp = "temporal";
}

Siempre declara variables al inicio de su alcance para mayor claridad.

Conclusiones

En resumen, las palabras clave var, let y const representan etapas evolutivas de JavaScript. Mientras var pertenece al legado pre-ES6 con alcance de función y hoisting inicializado, let y const introducen alcance de bloque y zona muerta temporal, alineándose con paradigmas modernos de programación.

La práctica recomendada actual es utilizar const por defecto para expresar intención de no reasignación, recurriendo a let solo cuando sea estrictamente necesario. Evitar var elimina fuentes comunes de bugs y mejora la legibilidad.

Aplicar estos principios resulta en código más mantenible, escalable y preparado para las demandas de desarrollo web en 2026. Dominar estas diferencias no solo previene errores, sino que eleva la calidad general de tus proyectos en JavaScript.