Operadores en JavaScript
En esta lección
Los operadores son los símbolos que hacen cálculos y comparaciones con los valores.
Aritméticos
10 + 3 // 13 suma
10 - 3 // 7 resta
10 * 3 // 30 multiplicación
10 / 3 // 3.333... división
10 % 3 // 1 resto de la división
2 ** 3 // 8 potencia
El resto (%) es más útil de lo que parece. Por ejemplo, un número es par si el resto de dividirlo entre 2 es 0: numero % 2 === 0.
De asignación
Atajos para modificar una variable:
let puntos = 10;
puntos += 5; // puntos = puntos + 5 → 15
puntos -= 3; // puntos = puntos - 3 → 12
puntos *= 2; // puntos = puntos * 2 → 24
puntos++; // suma 1 → 25
puntos--; // resta 1 → 24
De comparación
Comparan dos valores y devuelven true o false:
5 > 3 // true mayor que
5 < 3 // false menor que
5 >= 5 // true mayor o igual
5 <= 4 // false menor o igual
5 === 5 // true igual
5 !== 3 // true distinto
=== frente a ==
===(igualdad estricta) compara el valor y el tipo.==convierte los tipos antes de comparar, y eso da sorpresas:
5 === "5" // false: número y texto
5 == "5" // true
0 == "" // true (!)
null == undefined // true
Algunos resultados más de ==, para que veas por qué tiene tan mala fama:
0 == false // true
1 == true // true
2 == true // false (!)
"" == "0" // false
0 == "0" // true
"\t123\n" == 123 // true
"true" == true // false
[] == ![] // true (!!)
No hace falta que entiendas las reglas que hay detrás: basta con no usar ==.
Usa siempre === y !==. Te ahorrarás errores difíciles de encontrar.
Lógicos
Sirven para combinar condiciones:
| Operador | Nombre | Es true si… |
|---|---|---|
&& | Y | las dos condiciones son verdaderas |
|| | O | al menos una es verdadera |
! | NO | la condición es falsa (le da la vuelta) |
const edad = 20;
const tieneEntrada = false;
edad >= 18 && tieneEntrada // false: falta la entrada
edad >= 18 || tieneEntrada // true: basta con ser mayor de edad
!tieneEntrada // true
Valores por defecto: || y ??
Los operadores lógicos no siempre devuelven true o false: devuelven uno de los dos valores. Eso se aprovecha para dar valores por defecto:
const nombre = entrada || "Anónimo";
Si entrada es un valor “falso” ("", 0, null, undefined…), se usa "Anónimo". El problema es que 0 o "" a veces son valores válidos. Para eso existe ?? (nullish coalescing), que solo usa el valor por defecto si el primero es null o undefined:
const cantidad = 0;
cantidad || 10 // 10 (trata el 0 como "vacío")
cantidad ?? 10 // 0 ✓
Acceso seguro: ?.
Si intentas leer una propiedad de undefined, el programa se detiene con un error. El encadenamiento opcional ?. devuelve undefined en lugar de fallar:
const usuario = { nombre: "Ana" };
usuario.direccion.ciudad // TypeError: Cannot read properties of undefined
usuario.direccion?.ciudad // undefined
El operador ternario
Un if en una sola línea: condición ? valorSiSí : valorSiNo.
const edad = 16;
const mensaje = edad >= 18 ? "Puedes votar" : "Todavía no puedes votar";
Úsalo para decisiones cortas. Si la lógica es larga, un if normal se lee mejor.
Pruébalo tú
Cambia el código y pulsa Ejecutar (o Ctrl + Enter).
Pon a prueba lo que has aprendido
¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.