Tema 3 · Fundamentos

Tipos de Datos Primitivos y typeof

Conoce los 7 tipos primitivos de JavaScript, las estructuras de referencia (objetos y arrays) y el uso del operador typeof para inspección en tiempo de ejecución.

Variables: let, const y var Operadores y Comparación Estricta

Tipado Dinámico en JavaScript

JavaScript es un lenguaje de tipado dinámico y débil. Esto significa que una variable no está atada a un tipo de dato fijo: una variable puede almacenar un número y más adelante almacenar un texto.

Los 7 Tipos de Datos Primitivos

Los tipos primitivos representan valores inmutables y no son objetos:

Tipo Descripción Ejemplo
string Cadenas de caracteres de texto. "Kilopolis" o 'Frontend'
number Números enteros y con decimales (formato de 64 bits IEEE 754). 42, 3.1416, NaN
boolean Valor de verdad lógico: solo dos opciones. true o false
undefined Una variable declarada a la que aún no se le ha asignado ningún valor. let x; (x es undefined)
null Representa intencionalmente la ausencia de cualquier objeto o valor. let usuario = null;
bigint Enteros gigantescos que superan el límite seguro de Number (2^53 - 1). 9007199254740991n
symbol Identificador único e inmutable para claves de objetos. Symbol("id")

El Operador typeof

Puedes consultar el tipo de cualquier variable o expresión usando el operador typeof: 

typeof "Hola"        // "string"
typeof 100           // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof { id: 1 }     // "object"
typeof [1, 2, 3]     // "object" (los arrays son un subtipo de objeto en JS)
typeof null          // "object" (famoso bug histórico de JS conservado por compatibilidad)

⚡ Inspección de Tipos con typeof en Vivo

Observa cómo evalúa JavaScript el tipo de dato de diferentes valores y variables:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tipos de Datos en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-tipos { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; }
    .tabla-inspeccion { width: 100%; border-collapse: collapse; margin-top: 15px; }
    .tabla-inspeccion th, .tabla-inspeccion td { border: 1px solid #e2e8f0; padding: 8px 12px; font-size: 0.9rem; }
    .tabla-inspeccion th { background: #f1f5f9; text-align: left; }
    .badge-tipo { font-weight: bold; color: #0284c7; font-family: monospace; }
  </style>
</head>
<body>

  <div class="card-tipos">
    <h3 style="margin-top: 0; color: #0f172a;">Evaluación Dinámica de Tipos</h3>
    <p style="font-size: 0.9rem; color: #64748b;">
      Los siguientes valores son evaluados automáticamente por el motor de JavaScript con <code>typeof</code>:
    </p>

    <table class="tabla-inspeccion">
      <thead>
        <tr>
          <th>Valor Evaluado</th>
          <th>Resultado de typeof</th>
        </tr>
      </thead>
      <tbody id="cuerpo-tabla">
        <!-- Generado dinámicamente -->
      </tbody>
    </table>

    <script>
      const muestras = [
        { valor: "¡Hola Mundo!", texto: '"¡Hola Mundo!"' },
        { valor: 2026, texto: '2026' },
        { valor: true, texto: 'true' },
        { valor: undefined, texto: 'undefined' },
        { valor: null, texto: 'null' },
        { valor: { curso: "JS", nivel: "Pro" }, texto: '{ curso: "JS" }' },
        { valor: ["HTML", "CSS", "JS"], texto: '["HTML", "CSS", "JS"]' }
      ];

      const tbody = document.getElementById('cuerpo-tabla');
      muestras.forEach(item => {
        const fila = document.createElement('tr');
        fila.innerHTML = `
          <td><code>${item.texto}</code></td>
          <td class="badge-tipo">${typeof item.valor}</td>
        `;
        tbody.appendChild(fila);
      });
    </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.