Entendiendo typeof en JavaScript: Identificando Tipos de Datos

  Entendiendo typeof en JavaScript: Identificando Tipos de Datos

En JavaScript, el operador typeof nos ayuda a determinar el tipo de una variable o expresión. Esto es especialmente útil para depurar código o validar datos. Veamos un ejemplo práctico:

🔹 Ejemplo Básico con typeof

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tipos de Datos en JS</title>
</head>
<body>
    <p>Tipos de variables</p>
    <p>Cadena: <span id="v_cadena"></span></p>
    <p>Número: <span id="v_numero"></span></p>
    <p>Booleano: <span id="v_boleano"></span></p>
    <p>Constante: <span id="v_constante"></span></p>
    <p>Variable vacía: <span id="v_vacia"></span></p>
    <p>Variable nula: <span id="v_nula"></span></p>

    <script>
        let cadena = "Hola mundo";        // string
        let numero = 42;                  // number
        let booleana = true;              // boolean
        const constante = "Soy constante";// string
        let vacia;                        // undefined
        let nula = null;                  // object (¡caso especial!)

        // Mostrar valores en el HTML
        document.getElementById("v_cadena").textContent = cadena;
        document.getElementById("v_numero").textContent = numero;
        document.getElementById("v_boleano").textContent = booleana;
        document.getElementById("v_constante").textContent = constante;
        document.getElementById("v_vacia").textContent = vacia;
        document.getElementById("v_nula").textContent = nula;

        // Consola: Tipos de datos
        console.log("=== TIPOS CON typeof ===");
        console.log("cadena:", typeof cadena);     // "string"
        console.log("número:", typeof numero);     // "number"
        console.log("booleana:", typeof booleana);  // "boolean"
        console.log("constante:", typeof constante); // "string"
        console.log("vacia:", typeof vacia);        // "undefined"
        console.log("nula:", typeof nula);          // "object" (¡sorpresa!)
    </script>
</body>
</html>

🔍 Resultados Clave:

  • string: Para cadenas de texto ("Hola mundo").

  • number: Para valores numéricos (42).

  • boolean: Para true/false.

  • undefined: Si una variable no tiene valor asignado.

  • object: Caso especial de null (es un error histórico de JavaScript).

⚠️ Curiosidad:

¿Por qué typeof null devuelve "object"?
Es un bug conocido desde las primeras versiones de JS que se mantiene por compatibilidad. ¡Siempre verifica valores null con === null!


💡 ¿Sabías que...?
typeof también puede devolver "function" (para funciones) y "symbol" (para símbolos ES6).

¿Has tenido problemas con typeof? ¡Comenta tu experiencia! 👇 #JavaScript #WebDev #Programming


Nota: El código incluye tanto la visualización en HTML como la salida por consola para fines didácticos.

Comentarios

Entradas más populares de este blog

1-valores duplicados en un arreglo

Pseudocódigo de la Máquina Expendedora

Trabajas en una compañía que ofrece seguros de vida y de gastos