Command Palette

Search for a command to run...

Operadores Aritméticos y Asignación en JavaScript

Aprende los operadores matemáticos de JavaScript: suma, resta, multiplicación, división, módulo, exponenciación, y asignación compuesta con sus casos especiales.

Lectura: 11 min
Nivel: Principiante

TL;DR - Resumen rápido

  • Operadores básicos: + (suma), - (resta), * (multiplicación), / (división), % (módulo), ** (exponenciación)
  • ++ y -- incrementan/decrementan en 1. Prefijo (++x) retorna nuevo valor, postfijo (x++) retorna valor original
  • Operadores de asignación compuesta: +=, -=, *=, /=, %=, **= combinan operación y asignación
  • El operador + hace concatenación si uno de los operandos es string, los demás siempre hacen aritmética
  • División por cero da Infinity o -Infinity, no lanza error. 0/0 da NaN
  • Operador módulo % da el residuo de una división, útil para verificar pares/impares y ciclos
  • Precedencia: ** > * / % > + -. Usa paréntesis para claridad en expresiones complejas

Introducción a Operadores Aritméticos

Los operadores aritméticos permiten realizar operaciones matemáticas en JavaScript. Incluyen las operaciones básicas que conoces de matemáticas: suma (+), resta (-), multiplicación (*), división (/), y también operaciones especiales como módulo (%) que da el residuo de una división, y exponenciación (**) para potencias. Estos operadores trabajan principalmente con números, pero algunos tienen comportamientos especiales con otros tipos debido a la coerción de tipos.

Además de los operadores aritméticos, JavaScript tiene operadores de asignación que permiten asignar valores a variables. El operador de asignación básico es =, pero existen versiones compuestas (+=, -=, etc.) que combinan una operación aritmética con asignación. También están los operadores de incremento (++) y decremento (--) que suman o restan 1 de forma compacta. Entender estos operadores es fundamental para cualquier cálculo o manipulación de valores numéricos.

Operadores vs Métodos Math

JavaScript tiene operadores aritméticos (+, -, *, /) para operaciones básicas, y el objeto Math para operaciones más avanzadas (Math.sqrt(), Math.pow(), Math.round(), etc.). Usa operadores para aritmética básica - son más rápidos y legibles. Usa Math para operaciones como raíces cuadradas, trigonometría, redondeo, valores absolutos, y funciones matemáticas avanzadas.

Operadores Aritméticos Básicos

Los operadores aritméticos básicos son +, -, *, y /. Funcionan como esperarías con números: suman, restan, multiplican y dividen. Sin embargo, el operador + tiene un comportamiento especial - si uno de los operandos es string, hace concatenación en lugar de suma. Los otros operadores (-, *, /) siempre intentan convertir los operandos a números, lo que puede producir NaN si la conversión falla.

operadores-basicos.js
Loading code...

La suma, resta, multiplicación y división funcionan con números como esperarías. La división siempre retorna un número decimal (no hay división entera como en otros lenguajes). División por cero da Infinity o -Infinity, no lanza error. El operador + es especial: si hay un string, concatena en lugar de sumar. Los operadores -, *, / hacen coerción a número, lo que puede producir NaN con valores no-numéricos.

El Operador + es Especial

El operador + hace dos cosas: suma numérica Y concatenación de strings. Si UNO de los operandos es string, hace concatenación. Esto causa bugs: "2" + 2 da "22", no 4. Los otros operadores (-, *, /) SIEMPRE convierten a número: "10" - 2 da 8. Con inputs de usuario (siempre strings), SIEMPRE convierte a número explícitamente antes de sumar: Number(input1) + Number(input2).

Operador Módulo (%): El Residuo

El operador módulo (%) retorna el residuo de una división. Por ejemplo, 10 % 3 da 1 porque 10 dividido entre 3 es 3 con residuo 1. Es útil para verificar si un número es par o impar (n % 2 === 0 significa par), para ciclos que se repiten cada N elementos, y para mantener valores dentro de un rango.

operador-modulo.js
Loading code...

El módulo es el residuo de dividir el primer número entre el segundo. Es útil para: (1) Verificar pares/impares (n % 2 === 0 es par), (2) Ciclos que se repiten cada N elementos (índice % n), (3) Mantener valores en rango (valor % máximo), (4) Verificar divisibilidad (a % b === 0 significa que a es divisible por b). El signo del resultado toma el signo del dividendo (primer operando).

Exponenciación (**): Potencias

El operador de exponenciación (**) eleva un número a una potencia. Es equivalente a Math.pow() pero con sintaxis más limpia. 2 ** 3 da 8 (2 al cubo), 5 ** 2 da 25 (5 al cuadrado). También funciona con exponentes negativos (da fracciones) y decimales (da raíces). Es un operador moderno añadido en ES2016.

operador-exponenciacion.js
Loading code...

El operador ** hace potencias: base ** exponente. Es más legible que Math.pow(base, exponente). Funciona con exponentes negativos (dan fracciones: 2 ** -2 = 0.25), y con decimales (dan raíces: 9 ** 0.5 = 3, que es raíz cuadrada). Tiene precedencia alta - 2 ** 3 ** 2 se evalúa como 2 ** (3 ** 2), no (2 ** 3) ** 2. Usa paréntesis para claridad.

Incremento (++) y Decremento (--)

Los operadores ++ y -- incrementan o decrementan un valor en 1. Vienen en dos formas: prefijo (++x) que incrementa primero y luego retorna el nuevo valor, y postfijo (x++) que retorna el valor original y luego incrementa. Esta diferencia es importante cuando usas el resultado en una expresión. Son atajos para x = x + 1 o x = x - 1, pero más concisos.

incremento-decremento.js
Loading code...

Prefijo (++x, --x) incrementa/decrementa PRIMERO, luego retorna el nuevo valor. Postfijo (x++, x--) retorna el valor ORIGINAL, luego incrementa/decrementa. Ambos modifican la variable. La diferencia solo importa cuando usas el resultado: let y = ++x usa el nuevo valor, let y = x++ usa el valor viejo. En loops simples (i++), no importa la forma. Para claridad, usa prefijo solo en líneas separadas.

Prefiere Simplicidad

Aunque x++ y ++x son convenientes, no los uses en expresiones complejas - confunden. Usa x++ en loops (for (let i = 0; i < n; i++)) y en líneas separadas. Evita cosas como arr[i++] o y = ++x + 5 que mezclan incremento con otras operaciones. Para código claro, incrementa en su propia línea: x++; o simplemente usa x += 1 que es más explícito.

Operadores de Asignación

El operador de asignación básico es = que asigna un valor a una variable. A diferencia de matemáticas donde = significa igualdad, en programación = significa asignación - pone el valor de la derecha en la variable de la izquierda. La asignación es una expresión que retorna el valor asignado, permitiendo asignaciones encadenadas como x = y = 5.

operador-asignacion.js
Loading code...

El operador = asigna valores a variables. La variable está a la izquierda, el valor a la derecha. La asignación retorna el valor asignado, permitiendo asignaciones encadenadas (x = y = 5) o usar asignación en condiciones (if ((x = obtenerValor()) !== null)). Sin embargo, asignaciones encadenadas y en condiciones son confusas - evítalas. Para comparación usa ==, no confundas con =.

Asignación Compuesta

Los operadores de asignación compuesta combinan una operación aritmética con asignación. En lugar de escribir x = x + 5, puedes escribir x += 5. Existen para todos los operadores aritméticos: +=, -=, *=, /=, %=, **=. Son más concisos y hacen la intención más clara. También pueden ser más eficientes porque evalúan la variable izquierda solo una vez.

asignacion-compuesta.js
Loading code...

Los operadores compuestos (+=, -=, *=, /=, %=, **=) combinan operación y asignación. x += 5 es equivalente a x = x + 5, pero más conciso. Son especialmente útiles en loops y acumuladores. Con objetos/arrays, x += 5 solo evalúa x una vez, mientras x = x + 5 lo evalúa dos veces (importante si x es una expresión compleja como obj.prop[i]). Usa operadores compuestos para claridad y brevedad.

Operadores Unarios + y -

Los operadores unarios + y - se usan con un solo operando. El - unario niega un número (cambia su signo). El + unario convierte su operando a número - es un atajo para Number(). Ambos son diferentes de los operadores binarios + y - que operan sobre dos valores. El + unario es útil para convertir strings a números de forma concisa, aunque Number() es más explícito.

operadores-unarios.js
Loading code...

El operador unario + convierte a número: +"42" da 42, +true da 1. Es un atajo para Number(), útil en código conciso pero menos legible que Number() explícito. El operador unario - niega números: -5 da -5, -(-5) da 5. Puede usarse para negar variables: let neg = -positivo. Ambos son diferentes de los operadores binarios + y - que requieren dos operandos.

+ Unario: Atajo para Conversión

El + unario es un truco común para convertir a número: +"42" en lugar de Number("42"). Es conciso pero menos legible. Usa Number() para código más claro en producción. El + unario es útil en código golf o cuando necesitas brevedad extrema. También convierte Date a timestamp: +new Date() da milisegundos, equivalente a Date.now().

Precedencia de Operadores

La precedencia de operadores determina el orden en que se evalúan las operaciones en una expresión compleja. Los operadores con mayor precedencia se evalúan primero. En aritmética, la precedencia sigue las reglas matemáticas: exponenciación primero, luego multiplicación/división/módulo, finalmente suma/resta. Usa paréntesis para controlar el orden de evaluación y hacer tu código más claro.

precedencia-operadores.js
Loading code...

Precedencia de operadores aritméticos (mayor a menor): ** (exponenciación), * / % (multiplicación, división, módulo), + - (suma, resta). Operadores del mismo nivel se evalúan de izquierda a derecha (excepto ** que es derecha a izquierda). Los paréntesis tienen máxima precedencia y fuerzan evaluación. Aunque puedes confiar en precedencia, usa paréntesis para claridad: (a + b) * c es más legible que a + b * c, incluso si ambos dan el mismo resultado.

Usa Paréntesis Para Claridad

Aunque la precedencia de operadores es predecible, no todos los lectores la memorizan. Usa paréntesis para hacer tus expresiones más claras: (precio * cantidad) + impuesto es más legible que precio * cantidad + impuesto. Los paréntesis no tienen costo de rendimiento y mejoran la legibilidad. En expresiones complejas, divide en múltiples líneas con variables intermedias para máxima claridad.

Casos Especiales y Errores Comunes

Las operaciones aritméticas en JavaScript tienen casos especiales que pueden causar bugs si no los conoces. División por cero da Infinity (no error), operaciones con NaN siempre dan NaN, el operador + concatena strings en lugar de sumar, y la coerción implícita puede dar resultados inesperados. Entender estos casos te ayuda a escribir código más robusto.

casos-especiales.js
Loading code...

Casos especiales importantes: (1) División por cero da Infinity o -Infinity, no error, (2) 0/0 da NaN, (3) Cualquier operación con NaN da NaN, (4) El operador + concatena si hay un string, (5) Números muy grandes o pequeños usan notación científica o dan Infinity, (6) Operaciones con undefined dan NaN, con null dan número (null se convierte a 0). Valida inputs y verifica resultados para evitar bugs silenciosos.

JavaScript No Lanza Errores en Operaciones Inválidas

A diferencia de otros lenguajes, JavaScript raramente lanza errores en operaciones aritméticas. División por cero da Infinity, operaciones inválidas dan NaN, todo silenciosamente. Esto permite que bugs pasen desapercibidos. SIEMPRE valida inputs numéricos, verifica NaN con Number.isNaN(), y verifica Infinity con Number.isFinite(). No asumas que la ausencia de errores significa que el cálculo es correcto.

Resumen: Operadores Aritméticos y Asignación

Operadores principales:

  • + - * / % ** para operaciones aritméticas básicas y avanzadas
  • ++ y -- para incremento/decremento (prefijo vs postfijo)
  • = para asignación, += -= *= /= %= **= para asignación compuesta
  • + y - unarios para conversión a número y negación
  • Precedencia: ** > * / % > + - (usa paréntesis para claridad)

Mejores prácticas:

  • Convierte strings a número explícitamente antes de usar +
  • Usa operadores compuestos (+=, -=) para claridad y brevedad
  • Verifica NaN con Number.isNaN() e Infinity con Number.isFinite()
  • Usa paréntesis en expresiones complejas para legibilidad
  • Evita ++ y -- en expresiones complejas, úsalos en líneas separadas