Operadores

Los operadores son los símbolos que te permiten hacer cosas con los datos: sumar precios, comparar edades, decidir si un usuario puede entrar o asignar un valor por defecto cuando falta información. En esta lección conocerás todos los operadores que usarás a diario, incluyendo los modernos ?? y ?., y la famosa diferencia entre == y ===.

Concepto

Un operador toma uno o más valores (llamados operandos) y produce un resultado:

const total = 250 + 180;
//            ↑   ↑  ↑
//     operando  op  operando   → resultado: 430

Piensa en los operadores como los botones de una calculadora, pero con superpoderes: además de sumar y restar, pueden comparar, combinar condiciones y elegir valores.

Operadores aritméticos

const a = 17;
const b = 5;

console.log(a + b);   // 22   suma
console.log(a - b);   // 12   resta
console.log(a * b);   // 85   multiplicación
console.log(a / b);   // 3.4  división
console.log(a % b);   // 2    residuo (módulo): lo que sobra de 17 / 5
console.log(a ** 2);  // 289  potencia: 17 al cuadrado

// Incremento y decremento
let visitas = 10;
visitas++;            // visitas = 11
visitas--;            // visitas = 10

El operador % (módulo) es más útil de lo que parece:

// ¿Es par? Si el residuo de dividir entre 2 es 0, sí
console.log(8 % 2 === 0);  // true
console.log(7 % 2 === 0);  // false

// Convertir minutos a horas y minutos
const minutosTotales = 135;
const horas = Math.floor(minutosTotales / 60); // 2
const minutos = minutosTotales % 60;           // 15
console.log(`${horas} h ${minutos} min`);      // 2 h 15 min

Error común

Los decimales en JavaScript (y en casi todos los lenguajes) no son exactos:

console.log(0.1 + 0.2);         // 0.30000000000000004 😵
console.log((0.1 + 0.2).toFixed(2)); // "0.30" ✅

Con dinero, redondea al mostrar con toFixed(2) o trabaja en centavos (enteros): $19.99 → 1999.

Operadores de asignación

let total = 100;

total += 50;   // total = total + 50   → 150
total -= 20;   // total = total - 20   → 130
total *= 2;    // total = total * 2    → 260
total /= 4;    // total = total / 4    → 65
total %= 10;   // total = total % 10   → 5
total **= 2;   // total = total ** 2   → 25

// Con texto, += concatena
let mensaje = 'Hola';
mensaje += ', bienvenido'; // "Hola, bienvenido"

También existen asignaciones lógicas (ES2021), muy útiles para valores por defecto:

let config = { tema: null, idioma: 'es' };

config.tema ??= 'claro';   // asigna sólo si es null o undefined → "claro"
config.idioma ||= 'en';    // asigna sólo si es falsy → sigue "es"

Operadores de comparación

Siempre devuelven un booleano (true o false):

const edad = 20;

console.log(edad > 18);   // true   mayor que
console.log(edad < 18);   // false  menor que
console.log(edad >= 20);  // true   mayor o igual
console.log(edad <= 19);  // false  menor o igual
console.log(edad === 20); // true   estrictamente igual
console.log(edad !== 20); // false  estrictamente diferente

== vs ===: la gran diferencia

• == (igualdad débil): convierte los tipos antes de comparar. Produce resultados sorprendentes.
• === (igualdad estricta): compara valor y tipo. Sin trucos.

console.log(5 == '5');          // true  😬 convirtió el texto a número
console.log(5 === '5');         // false ✅ number vs string

console.log(0 == false);        // true  😬
console.log(0 === false);       // false ✅

console.log('' == 0);           // true  😬
console.log(null == undefined); // true
console.log(null === undefined);// false

Buena práctica

Usa siempre === y !==. Te ahorrarás errores muy difíciles de encontrar. La única excepción que algunos equipos aceptan es valor == null, que detecta null y undefined a la vez, aunque hoy es más claro usar ??.

Operadores lógicos

Sirven para combinar condiciones:

• && (Y / AND): devuelve true si ambas condiciones son verdaderas.
• || (O / OR): devuelve true si al menos una es verdadera.
• ! (NO / NOT): invierte el valor.

const edad = 25;
const tieneINE = true;
const esVIP = false;

// Puede entrar al evento si es mayor de edad Y tiene identificación
console.log(edad >= 18 && tieneINE); // true

// Envío gratis si es VIP O la compra supera $999
const compra = 1200;
console.log(esVIP || compra > 999);  // true

// Negación
console.log(!esVIP);                 // true

Truthy y falsy

En JavaScript, cualquier valor puede evaluarse como verdadero o falso en una condición. Sólo hay 8 valores falsy; todo lo demás es truthy:

// Valores FALSY (se comportan como false)
false
0
-0
0n
''        // string vacío
null
undefined
NaN

// Todo lo demás es TRUTHY, incluso:
'0'       // string con un cero
'false'   // string con la palabra false
[]        // array vacío
{}        // objeto vacío

Esto permite escribir condiciones más cortas:

const nombre = '';

if (!nombre) {
  console.log('El nombre es obligatorio'); // se ejecuta, '' es falsy
}

Cortocircuito: && y || devuelven valores

&& y || no siempre devuelven true/false: devuelven uno de los operandos.

// || devuelve el primer valor truthy
const nombreUsuario = '' || 'Invitado';
console.log(nombreUsuario); // "Invitado"

// && devuelve el primer valor falsy, o el último si todos son truthy
const usuario = { nombre: 'Ana' };
console.log(usuario && usuario.nombre); // "Ana"

// Ejecutar algo sólo si se cumple una condición
const hayErrores = true;
hayErrores && console.log('Revisa el formulario');

Nullish coalescing ??

?? devuelve el lado derecho sólo si el izquierdo es null o undefined. A diferencia de ||, respeta valores como 0 o ''.

const stock = 0;

console.log(stock || 'Sin dato'); // "Sin dato" ❌ ¡pero el stock es 0, sí hay dato!
console.log(stock ?? 'Sin dato'); // 0 ✅

const descuento = null;
console.log(descuento ?? 0);      // 0

Encadenamiento opcional ?.

Te permite acceder a propiedades que podrían no existir sin que el programa truene:

const pedido = {
  id: 1024,
  cliente: { nombre: 'Luis' },
};

// Sin ?. esto lanza: TypeError: Cannot read properties of undefined
// console.log(pedido.envio.direccion);

console.log(pedido.envio?.direccion);       // undefined (sin error)
console.log(pedido.cliente?.nombre);        // "Luis"

// Combinado con ?? para un valor por defecto
const ciudad = pedido.envio?.ciudad ?? 'Recoger en tienda';
console.log(ciudad); // "Recoger en tienda"

// También con métodos que quizá no existan
pedido.notificar?.(); // no hace nada si notificar no existe

Esto es muy común al trabajar con datos de APIs (Fetch y APIs), donde algunos campos pueden venir vacíos.

Operador ternario

Es un if/else en una línea: condición ? valorSiTrue : valorSiFalse.

const edad = 16;
const acceso = edad >= 18 ? 'Permitido' : 'Denegado';
console.log(acceso); // "Denegado"

// Muy útil dentro de template literals
const articulos = 1;
console.log(`Tienes ${articulos} ${articulos === 1 ? 'artículo' : 'artículos'}`);

Lo verás con más detalle en Condicionales.

Precedencia de operadores

Igual que en matemáticas, algunos operadores se evalúan antes que otros. De mayor a menor (simplificado):

1. Agrupación ( )
2. !, ++, --, typeof
3. **
4. *, /, %
5. +, -
6. <, >, <=, >=
7. ===, !==, ==, !=
8. &&
9. ||, ??
10. ? : (ternario)
11. =, +=, -=... (asignación)

console.log(2 + 3 * 4);      // 14, no 20
console.log((2 + 3) * 4);    // 20

// Calcular total con IVA y descuento
const precio = 500;
const total = precio - precio * 0.1 + (precio - precio * 0.1) * 0.16;

// ✅ Más claro con variables intermedias y paréntesis
const conDescuento = precio * (1 - 0.1); // 450
const totalFinal = conDescuento * 1.16;  // 522

Buena práctica

Si tienes que pensar en la precedencia, usa paréntesis o divide la operación en variables con buenos nombres. El código se lee muchas más veces de las que se escribe.

Ejemplo completo: calculadora de IMC

Esta demo combina operadores aritméticos (/, **), de comparación y lógicos para validar y clasificar el resultado:

Calculadora de IMC

✏️ Editar en el Playground↗ Abrir en pestaña nueva

La parte clave del cálculo:

const peso = Number(inputPeso.value);                 // kg
const estaturaM = Number(inputEstatura.value) / 100;  // cm → m

// Validación con operadores lógicos y de comparación
if (!peso || !estaturaM || peso <= 0 || estaturaM <= 0) {
  console.log('Datos inválidos');
} else {
  const imc = peso / (estaturaM ** 2);  // potencia y división
  console.log(imc.toFixed(1));
}

Ejercicios

1. Un producto cuesta $1,250 y tiene 15 % de descuento. Calcula el precio final con IVA (16 %) y muéstralo con dos decimales.
2. Predice el resultado: '7' == 7, '7' === 7, null ?? 'a', 0 || 'b', 0 ?? 'c', !!'hola'.
3. Dado const usuario = { perfil: null };, obtén usuario.perfil.foto sin error y, si no existe, usa 'avatar.png'.

Ver solución

1.

const precio = 1250;
const conDescuento = precio * (1 - 0.15); // 1062.5
const total = conDescuento * 1.16;        // 1232.5
console.log(`$${total.toFixed(2)}`);      // $1232.50

2.

'7' == 7;      // true  (convierte tipos)
'7' === 7;     // false (tipos distintos)
null ?? 'a';   // "a"
0 || 'b';      // "b"   (0 es falsy)
0 ?? 'c';      // 0     (0 no es null ni undefined)
!!'hola';      // true  (doble negación = convertir a booleano)

3.

const usuario = { perfil: null };
const foto = usuario.perfil?.foto ?? 'avatar.png';
console.log(foto); // "avatar.png"

Resumen

• Aritméticos: + - * / % **; el % sirve para pares/impares y conversiones.
• Asignación: +=, -=, ??=, etc. abrevian operaciones.
• Compara siempre con === y !==, nunca con ==.
• Lógicos: && (y), || (o), ! (no); devuelven uno de los operandos.
• Sólo hay 8 valores falsy: false, 0, -0, 0n, '', null, undefined, NaN.
• ?? da un valor por defecto sólo ante null/undefined; ?. evita errores con propiedades inexistentes.
• El ternario es un if/else compacto.
• Ante la duda de precedencia, usa paréntesis.

Siguiente: Condicionales