Tema 2 · Fundamentos

Variables: let, const y var

Domina la declaración moderna de variables en ES6+: inmutabilidad con const, alcance de bloque con let y las razones por las que nunca debes usar var.

Introducción a JavaScript y Salida Tipos de Datos Primitivos y typeof

Declaración Moderna de Variables (ES6+)

En JavaScript, una variable es un contenedor con nombre para almacenar datos en memoria. A partir de la especificación ECMAScript 2015 (ES6), la forma estándar y profesional de declarar variables es mediante const y let.

Palabra Clave ¿Se puede reasignar? ¿Se puede redeclarar? Tipo de Alcance (Scope)
const No (valor inmutable) No Alcance de Bloque ({ ... })
let Sí (variable mutable) No Alcance de Bloque ({ ... })
var (Obsoleto) Sí Sí (propenso a bugs graves) Alcance de Función / Global

¿Por qué NO debemos usar "var"?

La palabra clave var existió desde la versión 1.0 de JavaScript (1995) y presenta tres grandes problemas que causaron miles de bugs en la industria:

  • No respeta los bloques: Si declaras una variable con var dentro de un condicional if o bucle for, la variable se escapa y contamina todo el código exterior.
  • Permite redeclaración accidental: Puedes escribir var total = 10; y 100 líneas abajo volver a poner var total = 50; sin que el lenguaje arroje ningún error, sobrescribiendo el valor previo.
  • Se fuga al objeto global: Las variables var globales se anexan automáticamente al objeto window del navegador.

Regla de Oro en Desarrollo Profesional

💡 Recomendación oficial: Declara siempre todas tus variables con const por defecto. Utiliza let únicamente cuando sepas con certeza que el valor de la variable deberá cambiar en el tiempo (como el contador de un bucle o un total acumulativo).

⚡ Diferencias Prácticas entre const y let

Observa cómo let permite incrementar un contador y cómo const protege los valores inmutables contra reasignaciones no autorizadas:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Variables let y const en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-vars { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .contador-box { font-size: 2rem; font-weight: bold; color: #0284c7; margin: 15px 0; }
    .btn { background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-right: 6px; }
    .btn:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-vars">
    <h3 style="margin-top: 0; color: #0f172a;">Demostración de Variables</h3>
    <p>
      Nombre de Academia (<code>const</code> inmutable): <strong id="lbl-academia">Kilopolis</strong>
    </p>

    <div>Valor de Contador (<code>let</code> mutable):</div>
    <div id="valor-contador" class="contador-box">0</div>

    <button class="btn" onclick="incrementar()">Incrementar let (+1)</button>
    <button class="btn" onclick="probarConstError()" style="background: #ef4444;">Intentar reasignar const</button>

    <script>
      // 1. Constante: su valor no cambia
      const nombreAcademia = "Kilopolis Academia";
      document.getElementById('lbl-academia').textContent = nombreAcademia;

      // 2. Variable let: su valor cambia con cada clic
      let contador = 0;

      function incrementar() {
        contador++; // let permite la reasignación
        document.getElementById('valor-contador').textContent = contador;
      }

      function probarConstError() {
        try {
          // Intentar sobrescribir const provocará un TypeError
          nombreAcademia = "Otro Nombre";
        } catch (error) {
          alert("❌ Error bloqueado por JavaScript: " + error.message);
        }
      }
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.