El operador typeof en JavaScript: ¿Para que sirve y cómo usar?

El operador typeof en JavaScript es una forma sencilla de conocer el tipo de un valor en tiempo de ejecución. Sus características lo hacen útil para validar datos y evitar errores inesperados. Aprender para que sirve y cómo usarlo correctamente con ejemplos te ayudará a escribir código más robusto y dinámico.

el operador typeof en javascript

1. ¿Qué es el operador typeof en JavaScript?

El operador typeof en JavaScript es un operador unario que se utiliza para determinar o conocer el tipo de dato de una variable o expresión. Devuelve una cadena (string) con el tipo de dato del valor evaluado.

  1. Ejemplo de cómo funciona:
  2. ¿Qué tipos de datos puede detectar typeof?
  3. Características claves del operador typeof:

1.1. Ejemplo de cómo funciona:

Supongamos que tenemos las siguientes variables con sus respectivos tipos de datos almacenados:

let edad = 25;
let nombre = "Juan";
let esMayor = true;
let noDefinido;
let nulo = null;
let objeto = { clave: "valor" };
let arreglo = [1, 2, 3];
let funcion = function() { return "Hola"; };Lenguaje del código: JavaScript (javascript)

Y queremos saber que tipo de dato es el que esta almacenando en cada variable, para ello podemos usar el operador typeof de la siguiente manera:

console.log(typeof edad);     // "number"
console.log(typeof nombre);   // "string"
console.log(typeof esMayor);  // "boolean"
console.log(typeof noDefinido); // "undefined"
console.log(typeof nulo);     // "object" (error histórico)
console.log(typeof objeto);   // "object"
console.log(typeof arreglo);  // "object" (porque los arrays son objetos)
console.log(typeof funcion);  // "function"Lenguaje del código: JavaScript (javascript)

Como vemos, al usar typeof con un console.log, nos devuelve el tipo de dato que se eta usando en la variable.

NOTA!!!! Si te animas y deseas ver el resultado de este ejemplo y de todos los que iremos proporcionando directamente desde tu PC, te invito a seguir estos pasos.

  1. Primero, revisa el punto 5 del siguiente artículo sobre como usar e instalar VSCode (este es el editor de código mas usado), donde encontrarás los pasos para crear la estructura necesaria para visualizar una página desde tu navegador predeterminado.
  2. Si entendiste correctamente este paso anterior, sabrás donde colocar el código script que te acabamos de proporcionar (debes colocar ambos códigos que se encuentran arriba en este caso). Ahora, puedes visualizar el resultado, para ello puedes hacer lo siguiente:
    • Una vez abierta y visualizada la página, abre la consola del navegador presionando la tecla F12.
    • Ahora, dirígete a la pestaña que dice Console, y desde aquí podrás ver el resultado del script que hayamos introducido anteriormente.
  3. No te preocupes, estos pasos son más simples de lo que parecen!!!! Entonces… cada vez que dejemos un código de ejemplo como éste, puedes seguir estos pasos y ver los resultados por ti mismo. ¡Ojalá te animes!!!!

Link para descargar el editor de código Visual Studi Code!!

1.2. ¿Qué tipos de datos puede detectar typeof?

  1. PRIMITIVOS:
    • "undefined" → cuando la variable no ha sido inicializada o es undefined.
    • "boolean" → para valores true o false.
    • "number" → para cualquier número (incluidos NaN e Infinity).
    • "bigint" → para números enteros grandes (BigInt).
    • "string" → para cadenas de texto.
    • "symbol" → para valores de tipo Symbol.
  2. OBJETOS Y FUNCIONES:
    • "object" → para objetos, arrays y null.
    • "function" → para funciones.

Ejemplo:

console.log(typeof 42); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof Symbol('id')); // "symbol"
console.log(typeof BigInt(123456789123456789)); // "bigint"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof null); // "object"  // 🚨 Caso especial
console.log(typeof function() {}); // "function"
console.log(typeof undefined); // "undefined"Lenguaje del código: JavaScript (javascript)

1.3. Características claves del operador typeof:

  1. Devuelve una cadena (string) para indicarnos el tipo de dato.
    • Nos damos cuenta que es un string, porque cada resultado que nos brinda typeof esta envuelto entre comillas, como podemos ver en el ejemplo de arriba.
  2. Es útil para depuración y validaciones antes de realizar operaciones en variables.
  3. Funciona con tipos primitivos y objetos, aunque con algunas peculiaridades.

2. ¿Cómo usar el operador typeof?

Para responder esta pregunta, veamos su sintaxis y una explicación de la misma:

El operador typeof se puede utilizar de dos formas:

typeof operando
typeof (operando) // Los paréntesis son opcionales
Lenguaje del código: JavaScript (javascript)

Donde operando puede ser:

  • Una variable: typeof nombreVariable
  • Un valor literal: typeof 123, typeof "hola"
  • Una expresión: typeof (5 + 5)

Explicación:

El operador typeof evalúa el tipo de dato del operando y devuelve una cadena (string) que representa ese tipo. En el punto 1.2. vimos los tipos de datos que puede devolver este operador.

3. Casos especiales en el uso de typeof

  1. typeof null retorna «object»
  2. typeof NaN devuelve «number»
  3. Diferencia entre undefined y null en JavaScript

3.1. typeof null retorna "object"

3.1.1. ¿Por qué typeof null devuelve "object"?

Esto sucede debido a un bug histórico en JavaScript que nunca se corrigió por razones de retrocompatibilidad.

Aquí te lo explico:

  • Cuando JavaScript fue diseñado en sus primeras versiones (en los años 90), los valores en memoria se almacenaban con una estructura específica en la que los primeros bits de la referencia de un objeto definían su tipo. En esta estructura, el tipo de dato "object" se representaba internamente con los primeros bits en 000 (cero).
  • El problema es que el valor null también se representaba con estos mismos bits (000), lo que hizo que typeof null devolviera "object".
  • Aunque esto fue reconocido como un error, nunca se corrigió porque cambiarlo podría romper millones de sitios web y aplicaciones que dependían de este comportamiento.

3.1.2. ¿Por qué necesitas saber esto?

Este conocimiento es fundamental porque:
✅ Evita que cometas errores al validar null.
✅ Te ayuda a entender cómo JavaScript maneja los tipos de datos en memoria.
✅ Te permite escribir código más preciso y evitar confusiones.

Si confías solo en typeof, podrías tratar null como un objeto cuando en realidad representa «ausencia de valor».

3.1.3. Ejemplo del problema con typeof null

let valor = null;

console.log(typeof valor); // "object" ❌ Esto es incorrecto conceptualmente

// Comparación correcta para detectar `null`
if (valor === null) {
    console.log("El valor es null ✅");
} else {
    console.log("El valor no es null ❌");
}Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

  • typeof valor devuelve "object", lo cual es incorrecto porque null no es realmente un objeto.
  • Para detectar null correctamente, debes usar valor === null en lugar de typeof valor === "object".

NOTA: En el ejemplo anterior, se usa un condicional if-else para dicha comparación!

3.1.4. Ejemplo de una validación incorrecta usando typeof

function verificarDato(dato) {
    if (typeof dato === "object") {
        console.log("Es un objeto, podemos usar propiedades"); 
        console.log(dato.propiedad); // ❌ Esto lanzaría un error si `dato` es `null`
    }
}

verificarDato(null); // ❌ "Es un objeto", pero `null` no tiene propiedades

SALIDA ESPERADA:
    Es un objeto, podemos usar propiedades
    TypeError: Cannot read properties of null (reading 'propiedad')Lenguaje del código: JavaScript (javascript)

¿Qué sucede aquí?

  • Como typeof null devuelve "object", el código trata a null como un objeto y trata de acceder a dato.propiedad, lo que provoca un error.

Solución correcta:

function verificarDato(dato) {
    if (dato !== null && typeof dato === "object") {
        console.log("Es un objeto, podemos usar propiedades");
        console.log(dato.propiedad);
    } else {
        console.log("No es un objeto válido");
    }
}

verificarDato(null); // ✅ "No es un objeto válido"Lenguaje del código: JavaScript (javascript)

3.1.5. Conclusión

1️⃣ typeof null devuelve "object" por un bug histórico basado en la representación en memoria.
2️⃣ Nunca uses typeof para verificar null, usa variable === null.
3️⃣ Este conocimiento te ayuda a evitar errores al tratar valores nulos en tu código.

📌 REGLA DE ORO: Siempre verifica null con === null y no con typeof.

3.2. typeof NaN devuelve "number"

3.2.1. ¿Por qué typeof NaN devuelve "number"?

NaN significa «Not a Number», lo que puede parecer contradictorio porque typeof NaN devuelve "number".

Sin embargo, en JavaScript, NaN es un valor especial que representa un resultado inválido de una operación matemática dentro del tipo de datos number.

Este comportamiento tiene su origen en el estándar IEEE 754, que es el sistema utilizado por JavaScript para representar números en coma flotante. En este sistema, NaN es un valor especial dentro del conjunto de los números (number), lo que explica por qué typeof NaN sigue devolviendo "number" en lugar de "NaN" o "undefined".

3.2.2. ¿Por qué necesitas saber esto?

✅ Para entender que NaN sigue siendo un número en términos de tipo de datos, aunque represente un valor matemático inválido.
✅ Para evitar errores al realizar operaciones matemáticas y validaciones numéricas.
✅ Para aprender a detectar y manejar NaN correctamente en tu código.

3.2.3. Ejemplo del problema con typeof NaN

console.log(typeof NaN); // "number" ❌ Puede ser confusoLenguaje del código: JavaScript (javascript)

Aunque NaN indica un error matemático, sigue siendo del tipo number. Esto puede causar problemas si no se maneja correctamente.

3.2.4. Ejemplo: Operaciones que producen NaN

console.log(0 / 0); // NaN
console.log(Math.sqrt(-1)); // NaN
console.log(parseInt("Hola")); // NaN
console.log(undefined + 1); // NaNLenguaje del código: JavaScript (javascript)

Explicación:

  • 0 / 0: La división de cero entre cero no está definida matemáticamente.
  • Math.sqrt(-1): No hay raíz cuadrada real para un número negativo.
  • parseInt("Hola"): No se puede convertir "Hola" en un número.
  • undefined + 1: undefined no es un número, por lo que la suma da NaN.

3.2.5. ¿Cómo detectar NaN correctamente?

La mejor forma de verificar si un valor es NaN es usando Number.isNaN().

let resultado = 0 / 0;

if (Number.isNaN(resultado)) {
    console.log("El valor es NaN ✅");
} else {
    console.log("El valor es un número válido ❌");
}

SALIDA:
 "El valor es NaN ✅"Lenguaje del código: JavaScript (javascript)

Explicación:

  • 0 / 0 es una operación indefinida matemáticamente, por lo que el resultado en JavaScript es NaN (Not-a-Number).
  • Number.isNaN(resultado) verifica si resultado es realmente NaN, devolviendo true, por lo que entra en el bloque if y muestra el mensaje.

3.2.6. Ejemplo del problema con NaN y typeof y su solución

let numero = "Hola"; // Es un string
let resultado = numero * 2; // Intentamos multiplicar un string por un número

console.log(resultado); // NaN
console.log(typeof resultado); // "number" ❌ Parece un número, pero no lo es

// Intentamos verificar si es un número con typeof (MALA PRÁCTICA)
if (typeof resultado === "number") {
    console.log("Es un número válido ❌"); // Esto es incorrecto, porque en realidad es NaN
}

// Solución correcta: Usar Number.isNaN()
if (Number.isNaN(resultado)) {
    console.log("El valor es NaN ✅"); // Esto es correcto
}
Lenguaje del código: JavaScript (javascript)

Explicación paso a paso:

  1. Declaramos una variable numero con el valor "Hola", que es un string.
  2. Intentamos multiplicar numero * 2, lo cual no tiene sentido matemático, por lo que JavaScript devuelve NaN.
  3. Al hacer typeof resultado, obtenemos "number", lo cual es confuso porque NaN no es un número válido.
  4. Si intentamos verificar con typeof resultado === "number", JavaScript nos dice que NaN es un número, lo cual nos puede llevar a errores lógicos.
  5. Para evitar este problema, la mejor práctica es usar Number.isNaN(resultado), que detecta correctamente si el valor es NaN.

3.2.7. Conclusión

1️⃣ typeof NaN devuelve "number" porque NaN es parte del sistema numérico de JavaScript basado en IEEE 754.
2️⃣ No significa que NaN sea un número válido, solo que es un valor especial dentro del tipo number.
3️⃣ Siempre usa Number.isNaN(valor) para verificar si un valor es NaN, ya que typeof no es suficiente.

📌 REGLA DE ORO: Nunca confíes en typeof para detectar NaN, usa Number.isNaN() en su lugar. 🚀

3.3. Diferencia entre undefined y null en JavaScript

En JavaScript, undefined y null son valores distintos, aunque a veces se usen de forma similar. Vamos a analizar por qué son diferentes y por qué es importante entender esta diferencia.

3.3.1. ¿Por qué sucede esta diferencia?

Ambos valores representan la ausencia de valor, pero hay una distinción clave en su significado:

  1. undefined:
    • La variable fue declarada pero no tiene un valor asignado. También puede ser el valor por defecto de parámetros de funciones, propiedades de objetos inexistentes, etc.
  2. null:
    • Representa explícitamente la ausencia de valor. Se usa intencionalmente para indicar que una variable u objeto no tiene un valor válido.

3.3.2. ¿Por qué necesitas saber esto?

Para evitar errores al trabajar con variables sin inicializar.
Para saber cuándo usar null en lugar de undefined.
✅ Para manejar correctamente los valores en estructuras de datos y funciones.

3.3.3. Ejemplo de undefined

let sinValor; // No tiene un valor asignado
console.log(sinValor); // undefined
console.log(typeof sinValor); // "undefined"Lenguaje del código: JavaScript (javascript)

Explicación:

  • La variable sinValor existe, pero no tiene ningún valor asignado, por lo que su valor predeterminado es undefined.

3.3.4. Ejemplo de null

let vacio = null; // Asignamos explícitamente null
console.log(vacio); // null
console.log(typeof vacio); // "object" (⚠️ Este es un bug histórico en JavaScript)Lenguaje del código: JavaScript (javascript)

Explicación:

  • vacio tiene un valor asignado de null, lo que indica que sabemos que no tiene ningún dato válido.
  • typeof null devuelve "object" debido a un error en JavaScript que nunca se corrigió por compatibilidad (lo explicaciones ampliamente en punto 3.1.)

3.3.5. Problema al no diferenciar undefined de null

function obtenerUsuario() {
    return null; // El usuario no existe en la base de datos
}

let usuario = obtenerUsuario();

if (usuario === undefined) {
    console.log("Error: la variable no está definida ❌");
} else if (usuario === null) {
    console.log("El usuario no existe en la base de datos ✅");
}Lenguaje del código: JavaScript (javascript)

🔹 Error común:
Si tratamos null como si fuera undefined, podríamos interpretar mal los datos. En este caso, la función obtenerUsuario() devuelve null para indicar que no encontró un usuario, lo cual es diferente a una variable undefined.

3.3.6. Conclusión

1️⃣ undefined significa «falta de definición», ocurre automáticamente cuando una variable no tiene un valor asignado.
2️⃣ null es un valor explícito que indica la ausencia de datos y se asigna manualmente.
3️⃣ typeof null es "object" por un bug histórico, pero sigue siendo diferente de undefined.

📌 REGLA DE ORO: Usa null cuando quieras representar «vacío intencional» y undefined solo cuando realmente no se haya definido un valor. 🚀

4. ¿Para que sirve typeof en JavaScript?

  1. Uso de typeof en condicionales:
  2. Uso de typeof para filtrar datos o validar objetos en JavaScript
  3. Determinar si una variable es una función en JavaScript con typeof

4.1. Uso de typeof en condicionales:

4.1.1. ¿Por qué es útil usar typeof en condicionales?

Cuando escribimos código, muchas veces necesitamos asegurarnos de que una variable es del tipo correcto antes de ejecutar una operación. Si intentamos realizar una acción sobre un tipo de dato incorrecto, podemos obtener errores o resultados inesperados.

Evita errores de ejecución cuando los valores no son los esperados.
Permite escribir código más seguro y flexible.
Facilita la depuración al manejar diferentes tipos de datos correctamente.

4.1.2. ¿Cómo usar typeof en condicionales?

El operador typeof nos permite hacer verificaciones dentro de estructuras condicionales (if, switch, operadores ternarios, etc.), para ejecutar la lógica adecuada según el tipo de dato.

📌 EJEMPLO 1: Diferenciar entre números y strings antes de operar:

function procesarDato(dato) {
    if (typeof dato === "number") {
        console.log("Es un número, lo multiplicamos por 2:", dato * 2);
    } else if (typeof dato === "string") {
        console.log("Es un string, lo convertimos en mayúsculas:", dato.toUpperCase());
    } else {
        console.log("Tipo de dato no reconocido ❌");
    }
}

procesarDato(10); // Es un número, lo multiplicamos por 2: 20
procesarDato("hola"); // Es un string, lo convertimos en mayúsculas: HOLA
procesarDato(true); // Tipo de dato no reconocido ❌Lenguaje del código: JavaScript (javascript)

Explicación:

  • Si dato es un número, se multiplica por 2.
  • Si dato es un string, se convierte a mayúsculas.
  • Si es de otro tipo, muestra un mensaje de error.
  • Sin typeof, podríamos intentar usar un método que no existe para ciertos tipos, generando errores.

📌 EJEMPLO 2: Manejo de valores desconocidos en una API:

Cuando recibimos datos de una API, es común que no sepamos de antemano el tipo exacto de los valores. typeof nos ayuda a manejar estas situaciones.

function manejarRespuesta(respuesta) {
    if (typeof respuesta === "object" && respuesta !== null) {
        console.log("La respuesta es un objeto, procesando datos...");
    } else if (typeof respuesta === "string") {
        console.log("La respuesta es un mensaje:", respuesta);
    } else {
        console.log("Formato de respuesta inesperado ❌");
    }
}

// Simulación de diferentes respuestas de una API
manejarRespuesta({ nombre: "Juan", edad: 25 }); // La respuesta es un objeto, procesando datos...
manejarRespuesta("Error 404: No encontrado"); // La respuesta es un mensaje: Error 404: No encontrado
manejarRespuesta(404); // Formato de respuesta inesperado ❌Lenguaje del código: JavaScript (javascript)

Explicación:

  • Si la respuesta es un objeto, podemos procesar los datos correctamente.
  • Si es un string, lo tratamos como un mensaje de error o notificación.
  • Si es otro tipo de dato (como un número), mostramos un mensaje de error.
  • Esto evita intentos fallidos de acceder a propiedades de algo que no es un objeto.

📌 Ejemplo 3: Usando typeof en un switch para diferentes operaciones

function evaluarValor(valor) {
    switch (typeof valor) {
        case "number":
            console.log("Es un número, lo elevamos al cuadrado:", valor ** 2);
            break;
        case "boolean":
            console.log("Es un booleano, lo invertimos:", !valor);
            break;
        case "string":
            console.log("Es un string, su longitud es:", valor.length);
            break;
        default:
            console.log("Tipo no soportado ❌");
    }
}

evaluarValor(4);       // Es un número, lo elevamos al cuadrado: 16
evaluarValor(true);    // Es un booleano, lo invertimos: false
evaluarValor("hola");  // Es un string, su longitud es: 4
evaluarValor([]);      // Tipo no soportado ❌Lenguaje del código: JavaScript (javascript)

Explicación:

  • switch(typeof valor) evalúa el tipo de valor y ejecuta una acción específica.
  • Si es un número, se eleva al cuadrado.
  • Si es un booleano, se invierte.
  • Si es un string, se muestra su longitud.
  • Si el tipo no está contemplado, se maneja con un mensaje de error.

4.1.3. Conclusión

✔️ typeof en condicionales es útil para asegurarnos de que estamos manejando los datos correctamente.
✔️ Evita errores al tratar de operar con tipos incorrectos.
✔️ Permite escribir código más seguro y adaptable a diferentes valores.
✔️ Es especialmente útil cuando trabajamos con datos dinámicos, como valores ingresados por el usuario o respuestas de APIs.

4.2. Uso de typeof para filtrar datos o validar objetos en JavaScript

4.2.1. ¿Por qué es útil usar typeof para filtrar datos o validar objetos?

Cuando trabajamos con datos dinámicos en arrays u objetos, muchas veces necesitamos asegurarnos de que los valores sean del tipo correcto antes de operar con ellos.

El uso de typeof nos permite:

Filtrar elementos en un array según su tipo.
Validar que un objeto tenga los tipos correctos en sus propiedades.
Evitar errores inesperados al realizar operaciones en datos mal estructurados.

4.2.2. ¿Cómo usar typeof para filtrar datos en arrays?

Muchas veces un array puede contener datos de diferentes tipos, y queremos extraer solo aquellos que cumplen con un tipo específico.

🔹 Ejemplo: Filtrar solo los números de un array

const datos = [10, "JavaScript", 25, true, "Hola", 30, null, undefined, 50];

const soloNumeros = datos.filter(item => typeof item === "number");

console.log(soloNumeros); // [10, 25, 30, 50]Lenguaje del código: JavaScript (javascript)

Explicación:

  • Usamos el método .filter() para recorrer el array datos.
  • typeof item === "number" mantiene solo los valores de tipo number.
  • Así nos aseguramos de trabajar solo con valores numéricos, evitando errores en cálculos.

🔹 Ejemplo: Separar strings y números en diferentes arrays

const valores = [42, "Hola", 100, "Mundo", true, 75, "JavaScript"];

const numeros = valores.filter(item => typeof item === "number");
const strings = valores.filter(item => typeof item === "string");

console.log("Números:", numeros); // Números: [42, 100, 75]
console.log("Strings:", strings); // Strings: ["Hola", "Mundo", "JavaScript"]Lenguaje del código: JavaScript (javascript)

Explicación:

  • Creamos dos arrays distintos (numeros y strings).
  • Usamos filter() con typeof para seleccionar los elementos correspondientes.
  • Esto es útil cuando necesitamos procesar los datos de manera diferenciada.

4.2.3. ¿Cómo usar typeof para validar objetos?

Cuando trabajamos con objetos, es importante verificar que las propiedades tengan el tipo de dato esperado antes de operar con ellas.

🔹 Ejemplo: Validar un objeto antes de procesarlo

const usuario = {
    nombre: "Manuel",
    edad: 35,
    email: "[email protected]",
    activo: true
};

function validarUsuario(obj) {
    if (typeof obj.nombre !== "string") {
        return "❌ Error: El nombre debe ser un string.";
    }
    if (typeof obj.edad !== "number") {
        return "❌ Error: La edad debe ser un número.";
    }
    if (typeof obj.email !== "string") {
        return "❌ Error: El email debe ser un string.";
    }
    if (typeof obj.activo !== "boolean") {
        return "❌ Error: El estado activo debe ser un booleano.";
    }
    
    return "✅ Usuario válido.";
}

console.log(validarUsuario(usuario)); // ✅ Usuario válido.Lenguaje del código: JavaScript (javascript)

Explicación:

  • La función validarUsuario(obj) revisa que cada propiedad tenga el tipo esperado.
  • Si alguna propiedad tiene un tipo incorrecto, se devuelve un mensaje de error.
  • Si todas las validaciones pasan, se considera un usuario válido.
  • Evita que el código falle cuando trabajamos con datos dinámicos.

🔹 Ejemplo: Validar datos de una API antes de usarlos

const datosAPI = [
    { nombre: "Carlos", edad: 28 },
    { nombre: "Ana", edad: "veinticinco" }, // Error: edad no es un número
    { nombre: 123, edad: 40 } // Error: nombre no es un string
];

const datosValidos = datosAPI.filter(
    item => typeof item.nombre === "string" && typeof item.edad === "number"
);

console.log(datosValidos); // [{ nombre: "Carlos", edad: 28 }]Lenguaje del código: JavaScript (javascript)

Explicación:

  • Filtramos solo los objetos donde nombre sea un string y edad un número.
  • Esto nos permite evitar errores antes de procesar los datos, asegurando que son válidos.

4.2.4. Conclusión

✔️ typeof es una herramienta clave para filtrar arrays y validar objetos antes de operar con ellos.
✔️ Nos ayuda a evitar errores cuando los datos no son del tipo esperado.
✔️ Es útil en aplicaciones dinámicas donde los valores pueden cambiar o provenir de fuentes externas (APIs, formularios, etc.).
✔️ REGLA CLAVE: Siempre que trabajes con datos desconocidos, usa typeof para asegurarte de que son del tipo correcto antes de procesarlos. 🚀

4.3. Determinar si una variable es una función en JavaScript con typeof

4.3.1. ¿Por qué es importante verificar si una variable contiene una función antes de ejecutarla?

En JavaScript, las variables pueden almacenar diferentes tipos de datos (números, strings, objetos, funciones, etc.). A veces, una variable que se espera que sea una función podría no serlo, lo que causaría errores si intentamos ejecutarla con ().

✅ Razones para verificar si una variable es una función antes de ejecutarla:

✔️ Evitar errores: Si intentamos llamar a una variable que no es una función, JavaScript lanzará un error.
✔️ Escribir código más seguro: Podemos manejar mejor los datos sin asumir su tipo.
✔️ Facilitar el desarrollo dinámico: Permite ejecutar funciones solo cuando realmente existen.

4.3.2. ¿Cómo usar typeof para verificar si una variable es una función?

El operador typeof devuelve "function" cuando la variable contiene una función. Antes de ejecutarla, podemos comprobar su tipo:

EJEMPLO:

function saludar() {
    return "¡Hola, JavaScript!";
}

let variable = saludar; // Asignamos la función a una variable
let noFuncion = "No soy una función";

// Verificamos antes de ejecutar
if (typeof variable === "function") {
    console.log(variable()); // ¡Hola, JavaScript!
} else {
    console.log("La variable no es una función.");
}

if (typeof noFuncion === "function") {
    console.log(noFuncion());
} else {
    console.log("❌ Error: La variable no contiene una función.");
}Lenguaje del código: JavaScript (javascript)

Explicación:

  • typeof variable === "function" se usa antes de ejecutarla con variable().
  • En el primer caso, variable contiene una función, por lo que se ejecuta correctamente.
  • En el segundo caso, noFuncion es un string, por lo que evitamos un error mostrando un mensaje en su lugar.

Ejemplo en una función de orden superior:

Las funciones de orden superior aceptan funciones como argumentos. Antes de llamar a la función pasada, es importante verificar que realmente es una función.

function ejecutarFuncion(fn) {
    if (typeof fn === "function") {
        console.log("Ejecutando función...");
        fn();
    } else {
        console.log("❌ Error: El argumento no es una función.");
    }
}

function mensaje() {
    console.log("¡Soy una función ejecutada!");
}

ejecutarFuncion(mensaje); // Ejecutando función... ¡Soy una función ejecutada!
ejecutarFuncion(42); // ❌ Error: El argumento no es una función.Lenguaje del código: JavaScript (javascript)

Explicación:

  • La función ejecutarFuncion(fn) recibe un argumento y verifica si es una función antes de ejecutarla.
  • Si fn es una función, la ejecuta con fn().
  • Si fn no es una función, muestra un mensaje de error en lugar de fallar.

4.3.3. Conclusión:

✔️ Siempre verifica con typeof antes de ejecutar una función para evitar errores en tiempo de ejecución.
✔️ Es útil en funciones de orden superior, objetos con métodos opcionales y en código dinámico.
✔️ Mejora la seguridad y robustez del código, evitando fallos inesperados.
✔️ REGLA CLAVE: Siempre que una variable pueda contener algo distinto a una función, usa typeof variable === "function" antes de ejecutarla. 🚀

5. Preguntas frecuentes y resumen sobre el operador typeof en JS.

El operador typeof se usa para determinar el tipo de dato de una variable en JavaScript. Devuelve una cadena que representa el tipo de valor almacenado, permitiendo verificaciones rápidas y dinámicas en el código.

Se usa colocando typeof antes de la variable o valor. Ejemplo: typeof 42 devuelve "number". También se puede usar en variables: typeof myVar para saber su tipo.

Los valores que puede devolver incluyen: "undefined", "object", "boolean", "number", "bigint", "string", "symbol" y "function". null devuelve "object" por una peculiaridad histórica.

typeof null devuelve "object", lo que es un error histórico en JavaScript. Aunque null representa la ausencia de un objeto, no es realmente un objeto, por lo que es una excepción en la lógica de typeof.

typeof aplicado a un array devuelve "object" porque los arrays son un tipo especial de objeto. Para diferenciarlos, se usa Array.isArray(arr), que devuelve true si la variable es un array.

Cuando typeof se usa en una función, devuelve "function". Ejemplo: typeof function() {} devuelve "function". Es la única estructura que tiene su propio tipo específico en typeof.

Cuando typeof se aplica a un objeto, devuelve "object". Esto incluye arrays y null, lo que puede ser confuso. Para distinguir mejor objetos, se recomienda usar instanceof o Object.prototype.toString.call(obj).

Se puede usar typeof para evitar errores al acceder a variables no definidas. Ejemplo: if (typeof myVar !== "undefined") permite verificar si una variable existe sin que el código falle.

typeof devuelve el tipo de dato como una cadena y es útil para tipos primitivos. instanceof verifica si un objeto pertenece a una clase o prototipo específico, útil para estructuras complejas.

Usar typeof para comprobar tipos primitivos y evitar errores de variables no definidas. Para detectar null o arrays, usar !== null y Array.isArray(). Para objetos, combinar con instanceof si es necesario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *