Operadores Aritméticos en JavaScript

Desde calcular el total de un carrito de compras hasta animar un elemento en la pantalla, las operaciones matemáticas son una parte fundamental de la programación. Los operadores aritméticos en JavaScript son los símbolos que nos permiten realizar estos cálculos, pero su poder va más allá de la simple aritmética: interactúan de maneras interesantes con diferentes tipos de datos, realizando conversiones automáticas que son clave entender.

Este artículo explora cada operador aritmético, sus características, su comportamiento con distintos tipos de datos y las mejores prácticas para escribir código preciso y funcional.

Los Operadores Aritméticos Estándar

Los operadores aritméticos son símbolos que indican al intérprete la realizaciones de operaciones matemáticas entre valores. Aunque se usan principalmente para operaciones numéricas, también pueden interactúan con otros tipos de datos como por ejemplo, los strings u objetos, generando así conversiones automáticas o comportamientos especiales.

Tipos de Operadores Aritméticos en JavaScript

JavaScript proporciona un conjunto de operadores estándar para las operaciones matemáticas básicas:

1. Suma (+): Suma dos números o concatena dos strings.
2. Resta (-): Resta un número de otro.
3. Multiplicación (*): Multiplica dos números.
4. División (/): Divide un número entre otro.
5. Módulo o Resto (%): Devuelve el resto de una división.
6. Exponenciación (**): Eleva un número a la potencia de otro.

Operador de Suma (+): Aritmética y Concatenación

El operador + tiene una doble personalidad única en JavaScript.

• Cuando se usa con números, realiza una suma aritmética.
• Cuando se usa con strings, realiza una concatenación (une los textos).

// Suma numérica
const total = 10 + 5; // 15

// Concatenación de strings
const greeting = "Hola, " + "mundo"; // "Hola, mundo"

Conversión Implícita (Coerción) con +

Si uno de los operandos es un string, JavaScript asumirá que quieres concatenar y convertirá el otro operando a string. Esta es la regla más importante del operador +.

const items = 5;
const message = "Tienes " + items + " artículos en tu carrito."; // El 5 se convierte a "5"
console.log(message); // "Tienes 5 artículos en tu carrito."

const result = "5" + 5;
console.log(result); // "55" (no 10)

Operador de Resta

El operador de resta (-) en JavaScript calcula la diferencia entre dos valores numéricos. También se utiliza para operar con valores negativos siguiendo las reglas matemáticas estándar.

const a = 10;
const b = 5;
const result = a - b;

console.log(result);

Resta de variables con valores negativos:

La resta de variables con valores negativos en JavaScript sigue las mismas reglas matemáticas que la resta de números positivos. Cuando restas un número negativo de otro número, estás sumando el valor absoluto del número negativo al primer número.

const numero1 = -10;
const numero2 = -5;

console.log(numero1 - numero2);

Conversión Implícita en Resta

A diferencia de la suma, el operador de resta (-) no tiene un rol secundario como concatenación de strings. Esto significa que si uno de los operandos es un string que contiene un número, el interprete intentará convertirlo a un número mediante coerción implícita para poder realizar la operación. Este proceso se basa en el método Number(), el cual intenta transformar el string a un número. Si la conversión falla, el resultado será NaN.

const x = "10";
const y = 5;

console.log(x - y);  // (convierte "10" a 10)

Este proceso evita errores y permite restas con datos que puedan estar almacenados como texto numérico.

Operador de Multiplicación

El operador de multiplicación (*) en JavaScript multiplica dos valores y devuelve su producto. Si uno de los valores es negativo, el resultado también será negativo, básicamente sigue las reglas matemáticas estándar.

const result = 2 * 3;

console.log(result);

Conversiones en Multiplicación

Al igual que en la resta, si uno de los operandos es un string que contiene un número, el interprete de JavaScript intenta convertirlo a un valor numérico utilizando la función Number(). Este proceso de conversión implícita permite realizar la operación sin necesidad de una conversión manual, esto siempre y cuando el string represente un valor numérico válido.

const x = "3";
const y = 4;

console.log(x * y);

Si el string no representa un número, el resultado será NaN, indicando que la conversión falló.

Operador de División

El operador de división (/) en JavaScript divide un valor entre otro y devuelve el cociente. Si el divisor es 0, el resultado será Infinity o -Infinity, dependiendo del signo del dividendo.

const result = 20 / 10;

console.log(result);

División de Valores No Numéricos

Cuando uno de los operandos es un string que representa un número, JavaScript utiliza la conversión implícita para transformar el string a un número si es posible. Si el valor no es numérico, el resultado es NaN.

console.log("20" / 2);
console.log("Hola" / 2);

El interprete del lenguaje intenta convertir el string “20” a un número y logra hacer la división. Sin embargo, cuando el string no es convertible, como en "Hola", el resultado es NaN.

Operadores Aritméticos con Objetos en JavaScript

Cuando se aplican operadores aritméticos a objetos, JavaScript intenta convertirlos en valores primitivos mediante el método valueOf() o toString(). Si el objeto tiene un método valueOf() que devuelve un número, este se utiliza para la operación. Si valueOf() no existe o devuelve un valor no numérico, JavaScript intenta usar toString().

const objeto = {
  valueOf() {
    return 10;
  }
};

console.log(objeto + 5);
console.log(objeto * 2);

JavaScript invoca valueOf() para obtener un valor numérico del objeto, permitiendo que el operador realice la operación aritmética.

Precisión con Números Decimales (Punto Flotante)

JavaScript utiliza el formato de punto flotante de 64 bits (IEEE 754) para representar números. Esto puede llevar a pequeños errores de precisión con ciertas operaciones decimales, ya que algunas fracciones no se pueden representar de forma exacta en binario.

console.log(0.1 + 0.2); // 0.30000000000000004

¿Cómo solucionarlo?

Para mostrar resultados, usa el método .toFixed() para redondear a un número específico de decimales. (0.1 + 0.2).toFixed(2) devuelve “0.30“.

Para cálculos financieros o científicos de alta precisión, evita los decimales trabajando con enteros (ej. multiplicando por 100 para trabajar con céntimos) o utiliza librerías especializadas como Decimal.js o Big.js.

Prioridad de los Operadores (Precedencia)

JavaScript no ejecuta las operaciones de izquierda a derecha. Sigue un orden de prioridad matemático estándar para evaluar expresiones complejas.

1. Paréntesis (): Lo que está dentro de un paréntesis se evalúa primero.
2. Exponenciación **
3. Multiplicación *, División / y Módulo % (misma prioridad)
4. Suma + y Resta – (misma prioridad)

Cuando los operadores tienen la misma prioridad (como * y /), se evalúan de izquierda a derecha.

const result = 5 + 2 * 3 ** 2;
// 1. Exponenciación: 3 ** 2  ->  9
// 2. Multiplicación: 2 * 9   ->  18
// 3. Suma: 5 + 18         ->  23
console.log(result); // 23

Buena Práctica: Usa Paréntesis para la Claridad

Incluso si conoces el orden de prioridad, es una excelente práctica usar paréntesis para agrupar operaciones. Esto hace que tu código sea mucho más fácil de leer y entender para otros desarrolladores (y para tu yo del futuro), eliminando cualquier ambigüedad.

// Menos claro:
const unclearResult = 100 - 10 * 5;

// Mucho más claro:
const clearResult = 100 - (10 * 5);

En este caso:

1. Primero se evalúan las expresiones dentro de los paréntesis: 5 + 2 → 7 y 3 ** 2 → 9.
2. Luego, se realiza la multiplicación: 7 * 9 → 63.

Buenas Prácticas en el uso de Operadores Aritméticos

• Usa Paréntesis para Claridad: Aunque los operadores tienen prioridad, los paréntesis ayudan a que el código sea más legible.
• Controla Conversiones Implícitas: Conoce cómo cada operador convierte valores al usarse con diferentes tipos de datos.
• Evita Errores de Precisión con Decimales: Considera redondear o manejar decimales con métodos adicionales si se requiere precisión.

Conclusión

Los operadores aritméticos son una herramienta esencial en JavaScript. Entender no solo cómo realizan cálculos, sino también cómo interactúan con diferentes tipos de datos a través de la coerción de tipos, es fundamental. Al dominar su comportamiento, la precedencia y las buenas prácticas como el uso de paréntesis, podrás escribir un código matemático que no solo sea correcto, sino también legible, predecible y robusto.

En el siguiente artículo profundizaremos en los Operadores de Resto que nos permite obtener el resto de una división entre dos números.