Números en JavaScript
Ya sabes que un valor puede ser un number. Esta sesión se centra en ese único tipo: cómo escribir números, hacer cuentas cotidianas, reconocer resultados raros como NaN e Infinity, y mostrar un decimal limpio en la página.
¿Cómo funcionan los números en JavaScript?
Para principiantes, enteros y decimales comparten un tipo: number. Escríbelos sin comillas — 42 y 3.5 son números; "42" es un string. Sumas, restas, multiplicas, divides y obtienes el resto. Algunas operaciones dan resultados especiales: NaN (“Not a Number”) cuando el cálculo no es un número usable, e Infinity cuando el valor supera un límite finito (por ejemplo dividir entre cero). Para mostrar, toFixed crea un string con la cantidad de decimales que elijas.
Caja de herramientas numérica
📊 Herramientas numéricas que el principiante usa primero
| Idea | Ejemplo | Resultado / nota |
|---|---|---|
| Literal entero | let n = 10; |
Entero, tipo number |
| Literal decimal | let p = 2.5; |
El mismo tipo number |
| Aritmética | 10 + 3, 10 % 3 |
Suma 13; resto 1 |
| NaN | 0 / 0 o cuenta inválida |
“no es un número” — typeof sigue "number" |
| Infinity | 1 / 0 |
Más allá de límites finitos |
toFixed |
(3.14159).toFixed(2) |
String de visualización "3.14" |
Escribe números sin comillas
Enteros y decimales comparten tipo. No hace falta un “tipo entero” aparte en este nivel.
let score = 42;
let price = 9.99;
console.log(score);
console.log(price);
console.log(typeof score);
console.log(typeof price);
Aritmética cotidiana
Usa +, -, *, / y % (resto). El módulo de operadores profundiza después; aquí basta ver que los números calculan de verdad.
let a = 10;
let b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
NaN — no es un número usable
NaN significa que el resultado no es un número útil. Dato raro: typeof NaN sigue siendo "number". Si el cálculo parece roto, registra el valor y busca NaN.
let broken = 0 / 0;
console.log(broken);
console.log(typeof broken);
Infinity
Dividir un número positivo entre cero da Infinity (dividendo negativo: -Infinity). Es un resultado real del motor — conviene reconocerlo al depurar.
let huge = 1 / 0;
console.log(huge);
console.log(typeof huge);
Formatear decimales con toFixed
toFixed(n) devuelve un string con n dígitos tras el decimal — útil para mostrar como dinero. Recuerda: el resultado es texto; sigue calculando con el número original, no con el string formateado.
let total = 19.999;
console.log(total.toFixed(2));
console.log(typeof total.toFixed(2));
Mostrar un total en la página
Calcula una suma, formatea si quieres y pon el texto en la página con textContent.
<!DOCTYPE html>
<html>
<head>
<title>Numbers — total on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12.5;
let tax = 1.25;
let total = price + tax;
document.getElementById("out").textContent = "Total: " + total.toFixed(2);
</script>
</body>
</html>
El párrafo muestra un total al estilo dinero. Cambia price o tax, recarga y comprueba la línea.
Pruébalo tú mismo
- Crea dos
letnuméricos (entero y decimal); registra ambos ytypeof. - Registra
a + b,a * bya % bcon dos enteros pequeños. - Registra
0 / 0y confirmaNaN. - Registra
1 / 0y confirmaInfinity. - Llama a
toFixed(2)en un decimal;typeofdel resultado es"string". - En el demo HTML cambia solo
priceotax, recarga y lee el total nuevo.
Errores frecuentes
- Escribir
let n = "10";y esperar matemática numérica — las comillas crean un string - Ignorar
NaNcuando la Consola se ve “vacía” o rara - Sorprenderse con
Infinitytras dividir entre cero - Seguir calculando con el resultado de
toFixed(es un string) - Esperar un tipo entero aparte — el principiante usa un solo tipo number
Resumen
- Enteros y decimales comparten el tipo number; escríbelos sin comillas
- Para cuentas cotidianas usa
+,-,*,/y% - NaN e Infinity son resultados numéricos especiales
toFixedformatea decimales para mostrar y devuelve un string- Siguiente: Strings — texto con más detalle
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior