Tipos de datos en JavaScript
En esta lección
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:
undefined | null | |
|---|---|---|
| Quién lo pone | JavaScript, automáticamente | Tú, a propósito |
| Cuándo aparece | Variable sin valor, parámetro que no se pasó, propiedad que no existe, función sin return | Cuando 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).
Pon a prueba lo que has aprendido
¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.