JavaScript
Operadores
Reúne operadores aritméticos, lógicos, de asignación, comparación y acceso, junto con cortocircuito, ternarios, precedencia y sintaxis spread/rest.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Reúne operadores aritméticos, lógicos, de asignación, comparación y acceso, junto con cortocircuito, ternarios, precedencia y sintaxis spread/rest.
Un operador es una herramienta del lenguaje que trabaja con uno o más valores para producir un resultado, modificar una variable o comprobar una condición.
const subtotal = 50 * 3;
const hasFreeShipping = subtotal >= 100;Los valores sobre los que actúa un operador se llaman operandos.
10 + 5;+ es el operador.10 y 5 son los operandos.15 es el resultado.Algunos operadores trabajan con un valor:
!isActive;
typeof value;Otros necesitan dos:
price * quantity;
age >= 18;Y el operador ternario utiliza tres partes:
condition ? valueIfTrue : valueIfFalse;Permiten realizar cálculos.
| Operador | Operación | Ejemplo | Resultado |
|---|---|---|---|
| `+` | Suma | `5 + 3` | `8` |
| `-` | Resta | `10 - 4` | `6` |
| `*` | Multiplicación | `6 * 7` | `42` |
| `/` | División | `20 / 4` | `5` |
| `%` | Resto | `17 % 5` | `2` |
| `**` | Potencia | `2 ** 3` | `8` |
const unitPrice = 25;
const quantity = 4;
const subtotal = unitPrice * quantity;
console.log(subtotal); // 100% devuelve lo que sobra después de una división entera.
10 % 3; // 1
8 % 2; // 0Puede utilizarse para comprobar si un número es par:
function isEven(number) {
return number % 2 === 0;
}También sirve para crear ciclos:
const nextIndex = (currentIndex + 1) % images.length;+ puede sumar números o concatenar strings.
10 + 5; // 15
"Hola, " + name; // "Hola, Nicolás"Si uno de los operandos se convierte en string, el resultado puede ser texto:
"10" + 5; // "105"Por eso conviene convertir los datos antes de calcular:
const quantity = Number("5");
const total = quantity + 10;
console.log(total); // 15Las reglas detalladas se encuentran en Conversión y coerción de tipos.
= guarda un valor en una variable.
let score = 10;Los operadores compuestos realizan una operación y asignan el resultado.
let score = 10;
score += 5; // score = score + 5
score -= 2; // score = score - 2
score *= 3; // score = score * 3
score /= 2; // score = score / 2También existen:
value %= 2;
value **= 3;Estos operadores solo asignan bajo una condición concreta.
value ||= fallback;
value &&= replacement;
value ??= fallback;Asigna cuando el valor actual es falsy.
let title = "";
title ||= "Sin título";
console.log(title); // "Sin título"Asigna cuando el valor actual es truthy.
let session = { active: true };
session &&= { active: false };Asigna únicamente cuando el valor es null o undefined.
let limit = 0;
limit ??= 20;
console.log(limit); // 0let count = 0;
count++;
count--;Son equivalentes a sumar o restar uno, pero existe una diferencia cuando se utilizan dentro de otra expresión.
Devuelve primero el valor anterior y después incrementa.
let count = 5;
const previous = count++;
console.log(previous); // 5
console.log(count); // 6Incrementa primero y devuelve el valor nuevo.
let count = 5;
const current = ++count;
console.log(current); // 6
console.log(count); // 6Para evitar confusión, suele ser mejor utilizarlos como instrucciones independientes:
count++;Producen un valor booleano.
age >= 18;
price < budget;
status === "active";| Operador | Pregunta |
|---|---|
| `===` | ¿Tienen el mismo tipo y valor? |
| `!==` | ¿Son estrictamente diferentes? |
| `>` | ¿El primero es mayor? |
| `<` | ¿El primero es menor? |
| `>=` | ¿Es mayor o igual? |
| `<=` | ¿Es menor o igual? |
const canPurchase = age >= 18 && balance >= price;Las diferencias entre ===, ==, objetos, NaN y fechas se estudian en Igualdad y comparaciones.
Convierte un valor a boolean y lo invierte.
!true; // false
!false; // true
!0; // true
!"Hi"; // falseEvalúa de izquierda a derecha y se detiene al encontrar un valor falsy.
isAuthenticated && showDashboard();Si isAuthenticated es falsy, showDashboard no se ejecuta.
Se detiene al encontrar un valor truthy.
const displayName = username || "Anónimo";Utiliza el valor alternativo únicamente cuando el primero es null o undefined.
const displayStock = stock ?? "Sin información";0 || 10; // 10
0 ?? 10; // 0Las reglas de truthy, falsy y cortocircuito se encuentran en Truthy y falsy.
Permite acceder a una propiedad o ejecutar una función únicamente cuando el valor anterior no es null ni undefined.
const city = user?.address?.city;Sin optional chaining habría que comprobar cada nivel:
const city = user && user.address && user.address.city;También funciona con métodos:
onComplete?.();Y con acceso por índice:
const firstItem = items?.[0];?. no protege contra cualquier error. Si address existe pero getCity no es una función, esto sigue fallando:
user.address?.getCity();Para comprobar también el método:
user.address?.getCity?.();Permite escoger entre dos valores según una condición.
const message = age >= 18
? "Acceso permitido"
: "Acceso restringido";Es útil cuando el resultado forma parte de una expresión.
const buttonLabel = isSaving ? "Guardando..." : "Guardar";No conviene encadenar muchos ternarios:
const statusLabel = isLoading
? "Cargando"
: hasError
? "Error"
: isEmpty
? "Vacío"
: "Listo";Aunque funciona, un if, una función o un mapa de estados puede ser más legible.
function getStatusLabel(status) {
const labels = {
loading: "Cargando",
error: "Error",
empty: "Vacío",
ready: "Listo",
};
return labels[status] ?? "Desconocido";
}Devuelve el tipo detectado como string.
typeof "Hola"; // "string"Su comportamiento completo se explica en typeof y comprobación de tipos.
Elimina una propiedad propia de un objeto.
const user = {
name: "Nicolás",
temporaryToken: "abc123",
};
delete user.temporaryToken;No se utiliza para eliminar una variable declarada con let, const o var.
En código donde se prefiera inmutabilidad, puede crearse un objeto nuevo sin la propiedad:
const { temporaryToken, ...safeUser } = user;Evalúa una expresión y devuelve undefined.
void 0; // undefinedEs poco frecuente en código cotidiano. Puede aparecer en herramientas, librerías o expresiones donde se desea ignorar explícitamente el resultado.
Comprueba si una propiedad existe en un objeto o en su cadena de prototipos.
const user = {
name: "Nicolás",
};
"name" in user; // true
"email" in user; // falseNo comprueba si el valor es truthy:
const settings = {
darkMode: false,
};
"darkMode" in settings; // truePara comprobar únicamente propiedades propias:
Object.hasOwn(settings, "darkMode"); // trueComprueba si un constructor aparece en la cadena de prototipos de un objeto.
const today = new Date();
console.log(today instanceof Date); // trueEste comportamiento se profundiza en Prototipos y herencia.
Ambos utilizan ..., pero cumplen funciones diferentes según el lugar donde aparecen.
const numbers = [1, 2, 3];
const copy = [...numbers];const user = { name: "Nicolás" };
const updatedUser = { ...user, active: true };function sum(...numbers) {
return numbers.reduce((total, number) => total + number, 0);
}const { password, ...publicUser } = user;Aunque suelen llamarse operador spread y rest, técnicamente ... es una sintaxis que cambia de función según el contexto.
JavaScript no evalúa todos los operadores en orden de lectura. Algunos tienen mayor prioridad.
2 + 3 * 4; // 14Primero se ejecuta la multiplicación:
2 + (3 * 4);Con paréntesis puedes expresar otro orden:
(2 + 3) * 4; // 20No es necesario memorizar toda la tabla de precedencia. Cuando una expresión combine varias operaciones, usa paréntesis para comunicar la intención.
const canCheckout =
isAuthenticated &&
(hasProducts || hasSavedCart) &&
balance >= total;La mayoría de expresiones evalúan sus operandos de izquierda a derecha, aunque la precedencia determine qué operación se agrupa primero.
first() + second() * third();Las funciones se llaman en este orden:
first()
second()
third()Después se multiplican los resultados de second y third, y finalmente se suma el resultado de first.
JavaScript también incluye operadores que trabajan con la representación binaria de números:
&
|
^
~
<<
>>
>>>Son útiles en permisos compactos, protocolos, gráficos y tareas de bajo nivel, pero no forman parte del uso diario de la mayoría de aplicaciones web. Tendrán una nota aplicada si el notebook requiere profundizar en esos casos.
function getPurchaseResult({
price,
quantity,
balance,
isAuthenticated,
discount = 0,
}) {
const subtotal = price * quantity;
const discountAmount = subtotal * (discount / 100);
const total = subtotal - discountAmount;
const canPurchase =
isAuthenticated &&
quantity > 0 &&
balance >= total;
return {
subtotal,
discountAmount,
total,
message: canPurchase
? "Compra aprobada"
: "No es posible completar la compra",
};
}El ejemplo combina operadores aritméticos, asignación, comparación, lógicos y ternario, pero cada expresión conserva una responsabilidad clara.
= con ===.|| cuando cero o false son valores válidos.&& y || siempre devuelven booleanos.delete cuando el flujo requiere inmutabilidad.++ dentro de expresiones sin conocer la diferencia entre prefijo y postfijo.+ puede sumar o concatenar.&&, || y ?? utilizan cortocircuito y devuelven valores.?. permite continuar únicamente cuando no hay null ni undefined.in comprueba existencia de propiedades; instanceof, relación con constructores.... puede expandir o agrupar según el contexto.Predice los resultados:
2 + 3 * 4;
(2 + 3) * 4;
"10" + 5;
"10" - 5;
0 || 20;
0 ?? 20;
false && "resultado";
true && "resultado";2 + 3 * 4; // 14
(2 + 3) * 4; // 20
"10" + 5; // "105"
"10" - 5; // 5
0 || 20; // 20
0 ?? 20; // 0
false && "resultado"; // false
true && "resultado"; // "resultado"Expresiones y sentencias explica cómo estos valores y operadores se combinan para formar instrucciones completas dentro de un programa.