Aritmética en JavaScript
Ya tienes el mapa de familias de operadores. Esta lección entra en la familia aritmética — símbolos que trabajan sobre todo con números y devuelven un valor nuevo. Practicarás + - * / %, controlarás el orden con paréntesis, moverás contadores con ++ y --, elevarás potencias con operador de potencia y corregirás la trampa clásica: cuando + une texto en lugar de sumar.
¿Qué son los operadores aritméticos?
Los operadores aritméticos le dicen a JavaScript que calcule. Los valores siguen llamándose operandos. En 12 / 4, / es el operador y 12 y 4 son los operandos. El resultado se puede guardar, registrar o mostrar en la página.
Los cinco operadores del día a día
📊 Operadores aritméticos cotidianos
| Operador | Función | Resultado de ejemplo |
|---|---|---|
+ |
sumar | 7 + 3 → 10 |
- |
restar | 7 - 3 → 4 |
* |
multiplicar | 7 * 3 → 21 |
/ |
dividir | 7 / 2 → 3.5 |
% |
resto tras dividir | 7 % 3 → 1 |
Ten esta tabla a mano. La división con / puede dar decimal. % no es «porcentaje» — es el resto.
console.log(20 + 4);
console.log(20 - 4);
console.log(20 * 4);
console.log(20 / 4);
console.log(20 % 4);
console.log(20 / 3);
Patrones de resto con %
% responde: «¿qué queda después de dividir?» Ese resto sirve para par/impar y para lógica de «cada N elementos».
console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 5);
console.log(17 % 5);
let n = 12;
console.log(n % 2 === 0);
8 % 2 es 0 (par). 9 % 2 es 1 (impar). Prueba habitual de paridad: n % 2 === 0. Más adelante usarás el resto en bucles; aquí basta leer lo que sobra.
Precedencia y paréntesis
JavaScript no evalúa siempre de izquierda a derecha. Multiplicación y división suelen ir antes que suma y resta. Los paréntesis imponen el orden que quieres — lee primero el interior de (…).
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 6 / 2);
console.log((10 - 6) / 2);
Sin paréntesis, 2 + 3 * 4 vale 14 (multiplica primero). Con (2 + 3) * 4 obtienes 20. Si el orden importa para un precio o fórmula, escribe los paréntesis a propósito.
++ -- y operador de potencia
++ suma uno a una variable numérica. -- resta uno. operador de potencia es potenciación. Si aún no te sientes cómodo, una línea clara n = n + 1 también vale; verás ++ mucho en bucles.
let lives = 3;
lives++;
console.log(lives);
lives--;
console.log(lives);
console.log(2 ** 3);
console.log(5 ** 2);
Tras lives++, el valor es 4. 2 elevado a 3 es 8. 5 elevado a 2 es 25. Atajos como += van en la lección de asignación; aquí nos quedamos en símbolos de cálculo.
Cuando + une en vez de sumar
Si un lado de + es una cadena, JavaScript a menudo concatena. Convierte con Number(...) cuando querías sumar.
console.log("5" + 2);
console.log(Number("5") + 2);
console.log(5 + Number("2"));
let a = "10";
let b = "3";
console.log(Number(a) + Number(b));
"5" + 2 pasa a "52". Number("5") + 2 pasa a 7. La misma idea de conversión de tipos — aparece sin cesar en formularios y texto de página.
Mostrar un total en la página
Calcula una cuenta pequeña, usa el resto como pista y escribe el resultado en la página.
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic — page total</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12;
let qty = 3;
let shipping = 4;
let total = price * qty + shipping;
let leftover = total % 5;
let box = document.getElementById("out");
box.textContent = "total=" + total + " · rem5=" + leftover;
</script>
</body>
</html>
Aquí * va antes que +, así que 12 * 3 + 4 → 40. 40 % 5 es 0. Cambia price, qty o shipping, recarga y comprueba ambos números.
Pruébalo tú
- Registra
14 + 5,14 - 5,14 * 5,14 / 5y14 % 5. - Comprueba si
22es par con%y=== 0. - Compara
1 + 2 * 3con(1 + 2) * 3. - Empieza con
let c = 0, ejecutac++dos veces y registrac. - Registra 3 elevado a 3 y
Number("8") + 1. - En la demo HTML cambia solo
qty, recarga y lee el total y el resto nuevos.
Errores frecuentes
- Leer
%como «porcentaje» — es el resto - Esperar que
+siempre sume — un lado cadena suele unir - Olvidar paréntesis cuando no deben ganar
*// - Confundir
++(cambiar en uno) con=(guardar cualquier valor) - Calcular sobre cadenas de pantalla en lugar de números crudos
Resumen
- Operadores aritméticos:
+-*/% %es resto — útil para par/impar y «cada N»- Los paréntesis controlan la precedencia; suele ganar
*/frente a+- ++/--cambian en uno; operador de potencia eleva a potencia- Usa
Number()cuando+concatena - Siguiente: asignación — guardar y actualizar con
=y compañía
🧠 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