Saltar al contenido
tipos-de-datos.js · devschool

Tipos de datos en JavaScript

Lección 5 de 38 · 4 min de lectura · Actualizado el

En esta lección
  1. Los tipos básicos
  2. Tipos compuestos
  3. Saber el tipo: typeof
  4. Convertir entre tipos
  5. Las trampas de NaN
  6. Number() es demasiado permisivo
  7. undefined frente a null

Cada valor en JavaScript tiene un tipo. El tipo decide qué puedes hacer con él: los números se suman, los textos se unen.

Los tipos básicos

String (texto). Va entre comillas dobles, simples o invertidas:

const ciudad = "Santander";
const saludo = 'Hola';
const mensaje = `Vivo en ${ciudad}`; // comillas invertidas: plantilla

Las comillas invertidas (`) permiten meter variables dentro con ${ }. Es la forma más cómoda de construir textos.

Number (número). Enteros y decimales son el mismo tipo. Los decimales llevan punto, no coma:

const edad = 30;
const precio = 19.99;

A diferencia de muchos otros lenguajes, no hay un tipo para enteros y otro para decimales. Y existen tres valores numéricos especiales:

1 / 0       // Infinity
-1 / 0      // -Infinity
0 / 0       // NaN (Not a Number: el resultado no es un número válido)
typeof NaN  // "number" (sí, paradójicamente)

Boolean (verdadero o falso). Solo tiene dos valores: true y false. Es el resultado de las comparaciones:

const esMayorDeEdad = edad >= 18; // true

Undefined. Una variable que se ha creado pero no tiene valor:

let telefono;
console.log(telefono); // undefined

Null. Significa “vacío a propósito”. Lo pones tú para indicar que no hay valor:

let usuarioConectado = null;

Tipos compuestos

Guardan varios valores a la vez. Tienen su propia lección más adelante:

const colores = ["rojo", "verde", "azul"];   // array: una lista
const alumno = { nombre: "Leo", edad: 20 };  // objeto: datos con nombre

Saber el tipo: typeof

typeof "hola"     // "string"
typeof 42         // "number"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof {}         // "object"
typeof []         // "object" (¡los arrays también!)
typeof null       // "object" (un error histórico del lenguaje)

Convertir entre tipos

Los datos que escribe el usuario en un formulario siempre llegan como texto, aunque sean números. Hay que convertirlos:

Number("42")       // 42
Number("hola")     // NaN (Not a Number: no se puede convertir)
parseInt("42px")   // 42  (lee los números del principio)
String(42)         // "42"

Cuidado con el +: si uno de los dos valores es texto, une en lugar de sumar.

"5" + 3   // "53"
5 + 3     // 8
"5" - 3   // 2  (el - siempre convierte a número)

Las trampas de NaN

NaN aparece cuando una operación matemática no tiene sentido, como convertir "hola" en número. Y tiene una rareza única: no es igual a nada, ni siquiera a sí mismo.

const x = Number("hola");
x === NaN        // false (!)
NaN === NaN      // false
Number.isNaN(x)  // true ✓ la forma correcta de comprobarlo

Existe también la función global isNaN(), pero antes de comprobar convierte el valor a número, y da resultados confusos: isNaN("hola") es true aunque "hola" no sea NaN, sino un texto. Usa Number.isNaN().

Number() es demasiado permisivo

Number() acepta cosas que quizá no esperas:

Number("")        // 0   (!)
Number("   ")     // 0   (!)
Number(null)      // 0
Number(true)      // 1
Number(" 42 ")    // 42  (ignora los espacios de los extremos)
Number("1e3")     // 1000 (notación científica)
Number("0x10")    // 16  (hexadecimal)
Number("12abc")   // NaN
parseInt("12abc") // 12  (lee hasta donde puede)

Si un campo de formulario vacío se convierte en 0, tu programa puede creer que el usuario ha escrito un cero. Para validar que un texto contiene de verdad un número:

function esNumeroValido(texto) {
  return typeof texto === "string" &&
         texto.trim() !== "" &&
         Number.isFinite(Number(texto));
}

esNumeroValido("42")    // true
esNumeroValido("")      // false
esNumeroValido("12abc") // false

Number.isFinite() devuelve true solo si el valor es un número normal (ni NaN ni Infinity).

undefined frente a null

Los dos significan “no hay valor”, y es normal confundirlos:

undefinednull
Quién lo poneJavaScript, automáticamenteTú, a propósito
Cuándo apareceVariable sin valor, parámetro que no se pasó, propiedad que no existe, función sin returnCuando quieres decir “vacío” explícitamente
typeof"undefined""object" (un error histórico)

Para comprobar si algo es cualquiera de los dos, puedes usar valor == null (el único caso en que == es aceptable) o el operador ??, que verás en la lección de operadores.

Pruébalo tú

Cambia el código y pulsa Ejecutar (o Ctrl + Enter).

tipos-de-datos.js
Consola

Pon a prueba lo que has aprendido

[JavaScript] ¿Qué muestra la consola?
console.log(typeof []);

[JavaScript] ¿Qué muestra la consola?
console.log(Number(""));

[JavaScript] ¿Cómo compruebas correctamente si x es NaN?

¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.