Los Números en JavaScript

Desde calcular el total de un carrito de compras hasta animar un elemento en la pantalla, los números son el motor de incontables operaciones en la web. En JavaScript, el manejo de datos numéricos es a la vez simple y poderoso, pero esconde algunas peculiaridades que todo desarrollador debe conocer para evitar errores comunes y escribir código robusto.

Esta guía te llevará desde los fundamentos hasta los trucos y herramientas que necesitas para dominar los números en JavaScript.

¿Qué son los números en JavaScript?

JavaScript utiliza un solo tipo de dato numérico (number) para representar todos los números, ya sean enteros o de punto flotante. A diferencia de otros lenguajes que tienen tipos separados para enteros y decimales (como int y float), JavaScript simplifica las cosas con un único tipo de dato: number. Este tipo maneja ambos casos bajo el mismo estándar (el formato de punto flotante de doble precisión IEEE 754).

const integerNumber = 100;      // Un número entero
const decimalNumber = 3.1416;   // Un número decimal

console.log(typeof integerNumber); // "number"
console.log(typeof decimalNumber); // "number"

Esta unificación hace que empezar sea fácil, pero introduce un concepto clave que veremos más adelante: la imprecisión en los cálculos con decimales.

Formas de Escribir Números

JavaScript nos ofrece flexibilidad para representar valores numéricos de distintas maneras, desde la notación decimal que usamos a diario hasta formatos especializados para ciencia o sistemas de bajo nivel. Aunque todos se evalúan como el mismo tipo number, conocer estas sintaxis te permitirá entender y escribir código más versátil.

1. Notación Decimal (Enteros y Decimales)

Esta es la notación estándar y la que utilizarás el 99% del tiempo. Corresponde a la forma en que representamos los números en la vida cotidiana (base 10), utilizando los dígitos del 0 al 9 y un punto (.) para separar la parte decimal. Su sintaxis es directa e intuitiva.

// Ejemplos de números enteros
const score = 100;
const year = 2025;

// Ejemplos de números con punto flotante (decimales)
const price = 19.99;
const PI = 3.14159;

2. Notación Científica (e)

Para manejar cifras con muchos ceros, ya sean astronómicamente grandes o infinitesimalmente pequeñas, la notación científica es la herramienta perfecta. Utiliza la letra e (o E) para representar “por diez elevado a la potencia de…”. Esto no solo ahorra espacio, sino que hace que el código sea mucho más legible y menos propenso a errores al contar ceros.

// Representando un número muy grande
const speedOfLight = 3e8; // 3 * 10^8 = 300,000,000

// Representando un número muy pequeño
const protonMass = 1.67e-27; // 1.67 / 10^27

console.log(speedOfLight); 

3. Otras Bases Numéricas (Hexadecimal y Octal)

En ciertos campos del desarrollo como la manipulación de colores, los gráficos o los sistemas de bajo nivel, es común encontrar números representados en bases distintas a la decimal. JavaScript proporciona una sintaxis clara para definir estos valores, que internamente se convierten al tipo number estándar para poder operar con ellos.

• Hexadecimal (base 16): Se prefija con 0x. Utiliza los dígitos del 0 al 9 y las letras de la A a la F. Es el estándar para definir colores en la web.
• Octal (base 8): Se prefija con 0o (cero y la letra ‘o’). Utiliza los dígitos del 0 al 7. Es menos común, pero puede aparecer en contextos como los permisos de archivos en sistemas UNIX.

// Un color rojo puro en hexadecimal
const redColor = 0xFF0000;

// Permisos de lectura/escritura para el dueño en octal
const filePermissions = 0o744;

// JavaScript los muestra en su valor decimal
console.log(redColor); // 16711680
console.log(filePermissions); // 484

Reconocer estas sintaxis es clave para trabajar con ciertas APIs y librerías especializadas.

El “Error” Más Famoso: La Imprecisión de Punto Flotante

Este es uno de los conceptos más importantes y a menudo desconcertantes sobre los números en programación. Debido a cómo los ordenadores almacenan los números decimales en formato binario, ciertas operaciones aritméticas que deberían ser exactas producen pequeños errores de redondeo. Esto no es un fallo exclusivo de JavaScript, sino una característica inherente al estándar IEEE 754 que usan la mayoría de los lenguajes.

const result = 0.1 + 0.2;

console.log(result); // Resultado inesperado: 0.30000000000000004

¿Cómo solucionarlo? La regla de oro es nunca confiar ciegamente en los resultados de operaciones con decimales para comparaciones exactas o cálculos de alta precisión, como en aplicaciones financieras.

1. Trabaja con enteros: La mejor estrategia para manejar dinero es realizar todos los cálculos en la unidad más pequeña (céntimos en lugar de euros) y solo convertir de nuevo al formato decimal para mostrarlos al usuario.
2. Usa toFixed() para redondear: El método toFixed(n) es tu mejor aliado para formatear un número. Lo redondea a n decimales y lo devuelve como un string, eliminando los decimales imprecisos.

const sum = 0.1 + 0.2;
const resultAsString = sum.toFixed(2); // Devuelve el string "0.30"
const finalResult = Number(resultAsString); // Convierte de nuevo a número

console.log(finalResult); // 0.3

Los Valores Numéricos Especiales: NaN, Infinity

Además de los números convencionales, el tipo number incluye tres valores especiales que representan situaciones excepcionales.

NaN (Not a Number)

NaN es un valor de error que indica que el resultado de una operación que debería ser numérica no pudo ser calculado. Aparece en situaciones como intentar realizar una operación matemática con un dato no numérico.

const invalidCalculation = "hola" / 10;

console.log(invalidCalculation); // NaN

La peculiaridad de NaN: NaN tiene un comportamiento único: no es igual a nada, ni siquiera a sí mismo.

console.log(NaN === NaN); // false

Por esta razón, la única forma correcta y segura de comprobar si un valor es NaN es utilizando la función Number.isNaN():

const result = "a" - 5;

if (Number.isNaN(result)) {
    console.log("El cálculo no produjo un número válido.");
}

Infinity y -Infinity

Estos valores representan números que están fuera del rango manejable por JavaScript, es decir, el infinito matemático. El caso de uso más común donde aparecen es en la división por cero.

console.log(10 / 0);  // Infinity
console.log(-10 / 0); // -Infinity

Puedes comprobar si un número es finito (es decir, no es Infinity, -Infinity o NaN) con el método Number.isFinite().

También hay un valor -Infinity, que se usa para números negativos que van por debajo de -1.7976931348623157e+308

Convertir Otros Tipos de Datos a Números

En el desarrollo web es extremadamente común recibir datos como texto (por ejemplo, desde un campo de un formulario) y necesitar convertirlos a un tipo number para poder realizar cálculos con ellos. JavaScript ofrece varias formas de hacerlo.

Number(): La Conversión Explícita y Segura

La función Number() es la forma más moderna y recomendada. Intenta convertir el valor que se le pasa a un número. Si la conversión es exitosa, devuelve el número, si no, devuelve NaN, lo que te permite manejar el error de forma controlada.

const formInput = "123.45";
const formInvalidInput = "100px";

const numericValue = Number(formInput);       // 123.45
const invalidValue = Number(formInvalidInput); // NaN

console.log(numericValue);
console.log(invalidValue);

Métodos y Propiedades Útiles:

• Number.isNaN(): Determina si el valor es NaN (Not a Number) o No se un numero.
• Number.isFinite(): Determina si el valor es finito.
• Number.isInteger(): Determina si un valor es un entero.
• Number.MAX_SAFE_INTEGER: El máximo entero seguro en JavaScript.
• Number.MIN_SAFE_INTEGER: El mínimo entero seguro en JavaScript.

parseInt() y parseFloat(): Extracción de Números

Estas funciones son útiles cuando necesitas extraer un número de una cadena que puede contener otros caracteres.

• parseInt(string, radix): Analiza una cadena y devuelve un número entero. Ignora los caracteres no numéricos que encuentra después de los dígitos iniciales. Es crucial especificar el segundo argumento, radix (la base, usualmente 10), para asegurar una interpretación decimal correcta.
• parseFloat(string): Funciona de manera similar, pero también es capaz de analizar y devolver números con decimales.

const productWidth = "250px";
const itemPadding = "1.5rem";

const width = parseInt(productWidth, 10); // 250
const padding = parseFloat(itemPadding);    // 1.5

Una vez creado un valor numérico, podemos realizar operaciones aritméticas como sumas (+), restas (-), multiplicaciones (*) y divisiones (/). Además de la aritmética básica, JavaScript admite una gran variedad de funciones matemáticas, como Math.abs(), Math.pow() y Math.round(), que se pueden utilizar para realizar operaciones más complejas.

Conclusión

Los números en JavaScript son la base para una gran parte de la lógica de una aplicación. Comprender su naturaleza unificada, estar consciente de la imprecisión de punto flotante y saber cómo manejar los valores especiales como NaN te permitirá escribir un código más fiable y sin errores. Al dominar las herramientas de conversión y formato, tendrás el control total para manipular datos numéricos con confianza y precisión en cualquier proyecto.

En el siguiente artículo exploraremos los valores booleanos en JavaScript, abordando su importancia en las condiciones y la lógica de programación.