Resumen de tipos de datos — typeof y una tabla de referencia rápida

Los valores de JavaScript abarcan cadenas, números, booleanos, arrays, objetos, null, undefined, Map, y Set. En el trabajo real, compruebas si un valor que llegó de un formulario o un servidor es del tipo que esperabas antes de procesarlo.

Este artículo ordena todo eso desde un solo ángulo — el tipo — resumiendo qué devuelve typeof y la forma correcta de comprobar cada tipo.

Los tipos se dividen en 7 primitivos y Object

Saber el tipo de un valor decide qué puedes hacer con él. Una cadena te da length y slice; un número te deja calcular; un array te da push.

Equivócate de tipo al procesar un valor que llegó, en cambio, y undefined o NaN pueden colarse hasta el final sin que te des cuenta.

Los valores de JavaScript se dividen en primitivos (7 tipos: number, string, boolean, null, undefined, symbol, y bigint — valores que no son ni objetos ni arrays) y Object (un valor que guarda propiedades; arrays, Map, y Set también caen aquí).

Este curso ha cubierto los primeros 5 primitivos y Object.

De los 2 restantes, symbol (un valor para crear una clave única que nunca se duplica) se usa cuando necesitas un tipo especial de clave, y bigint (un valor dedicado a manejar enteros extremadamente grandes) se usa para enteros demasiado grandes como para que Number los represente con precisión. Ninguno aparece dentro del alcance de este curso, así que basta con conocer solo el nombre y dónde encaja.

El operador que comprueba el tipo es typeof. Escríbelo antes de un valor, y devuelve el nombre del tipo como cadena.

Lo que devuelve está fijado a 8 tipos: "string" "number" "boolean" "undefined" "symbol" "bigint" "object" "function". "function" solo vuelve cuando le pasas una función — las funciones se cubren en la siguiente categoría.

console.log(typeof "ORD-6033");             // string
console.log(typeof 9800);                   // number
console.log(typeof true);                   // boolean
console.log(typeof undefined);              // undefined

console.log(typeof { orderId: "ORD-6033" });  // object
console.log(typeof [1, 2]);                   // object

// null también es un primitivo, pero typeof devuelve object
console.log(typeof null);                   // object

Ejecuta typeof sobre 4 valores de tipos mezclados, y comprueba qué cadena vuelve. values ya está declarado.

① Muestra el tipo de cada uno de los 4 valores, una línea a la vez.

② Une los 4 tipos con ", " y muéstralos en 1 línea.

③ Elimina duplicados de los tipos listados en ②, y muestra cuántos tipos distintos quedan.

(Si se ejecuta correctamente, aparecerá una explicación.)

Las 3 cosas para las que typeof devuelve object — null, arrays, y objetos

Si un valor que llegó de un servidor es un "objeto de dirección de envío", un null de "aún no elegido", o un "array de productos" cambia lo que haces con él después. Pero typeof devuelve el mismo "object" para los 3, así que no se puede usar para esta comprobación directamente.

Que typeof null devuelva "object" ha sido el comportamiento de JavaScript desde sus primeros días. Es un error de especificación conocido, pero arreglarlo rompería código existente, así que se ha quedado tal cual.

Comprueba null directamente con value === null.

Comprueba un array con Array.isArray(value). Devuelve true solo cuando le pasas un array, así que distingue arrays de objetos y null.

Descarta esos 2 primero, y lo que quede de "object" es "un objeto que no es ni array ni null".

const shipping = null;
const cart = ["Mouse"];
const order = { orderId: "ORD-6033" };

// typeof devuelve el mismo resultado para los 3
console.log(typeof shipping);      // object
console.log(typeof cart);          // object

// Comprueba null directamente con ===
console.log(shipping === null);    // true

// Comprueba un array con Array.isArray
console.log(Array.isArray(cart));  // true
console.log(Array.isArray(order)); // false

// ¿Es un objeto que no es ni array ni null?
console.log(typeof order === "object" && order !== null && !Array.isArray(order));  // true

Descarta null antes de leer su contenido

Haz de typeof value === "object" tu única condición antes de leer el contenido de un valor, y se detiene con un TypeError en cuanto value es null. typeof deja pasar null de largo, así que comprueba value !== null primero, o usa optional chaining, como en value?.city.

Clasifica por tipo cada campo de un objeto de respuesta que llegó de una API. response ya está declarado.

① Muestra el tipo de cada uno de los 4 campos, una línea a la vez, con el formato "clave: tipo".

② Muestra si items y coupon son arrays, con el formato "clave: resultado".

③ Muestra si shipping es null.

④ Muestra si coupon es "un objeto que no es ni array ni null," como una sola expresión que encadena 3 condiciones.

Si una cadena se puede tratar como número — Number y Number.isNaN

Una cantidad o un importe que llega de un formulario parece dígitos, pero su tipo es una cadena. Úsalo en un cálculo sin comprobar antes si se puede tratar como número, y un valor como "12px" fluye directo al cálculo y produce NaN.

Lo que se cubre aquí no es el tipo en sí, sino si se puede convertir.

Convertir con Number(input) y comprobar si el resultado es NaN con Number.isNaN(result) se cubrió en el artículo de conversión de tipos. Lo que vale la pena separar de la comprobación de tipo aquí es que esto es una comprobación sobre el contenido, no sobre el tipo.

Tanto "9800" como "abc" tienen el mismo typeof de "string" — si algo funciona como cantidad no se puede saber por su tipo.

La trampa es una cadena vacía. Number("") devuelve 0, no NaN, así que un campo de formulario sin rellenar se cuela como "una entrada válida de cantidad 0".

Para rechazar una cadena vacía, comprueba input !== "" antes de convertir.

console.log(Number("9800"));               // 9800
console.log(Number("abc"));                // NaN
console.log(Number(""));                   // 0 (no NaN)

// Comprueba si el resultado convertido es NaN
console.log(Number.isNaN(Number("abc")));  // true
console.log(Number.isNaN(Number("9800"))); // false

// Una cadena vacía se cuela como 0
console.log(Number.isNaN(Number("")));     // false

Juzga si 4 entradas que llegaron de un formulario se pueden usar como cantidad. inputs ya está declarado.

① Convierte las 4 a números, únelas con ", ", y muestra el resultado.

② Muestra si cada resultado convertido no es NaN, junto con la entrada, una línea a la vez, con el formato "entrada: resultado".

③ Añade una condición que rechace un campo sin rellenar, y muestra cómo cambia el resultado de la cadena vacía con 1 condición frente a 2, uno al lado del otro.

Elegir la comprobación correcta — una tabla de referencia rápida

Hay más de una forma de escribir una comprobación de tipo. Algunos tipos typeof por sí solo puede distinguir, otros necesitan una comprobación adicional sobre lo que devuelve typeof, y si el contenido de una cadena funciona como número es una comprobación totalmente separada del tipo. Elige la forma de escribirlo según lo que intentas confirmar.