Operadores y Expresiones en JavaScript

Al finalizar esta lección serás capaz de:

• Utilizar todos los operadores aritméticos, de comparación, lógicos y de asignación
• Entender la precedencia de operadores y cómo afecta los cálculos
• Aplicar operadores especiales como el ternario, nullish coalescing y optional chaining
• Combinar operadores para crear expresiones complejas y legibles
• Resolver problemas prácticos usando operadores de forma eficiente

Los operadores son los verbos de JavaScript — son las acciones que realizamos sobre los datos. Empecemos por los más intuitivos.

Operadores aritméticos

// Básicos
let a = 10, b = 3;
console.log(a + b);   // 13 (suma)
console.log(a - b);   // 7  (resta)
console.log(a * b);   // 30 (multiplicación)
console.log(a / b);   // 3.3333... (división)
console.log(a % b);   // 1  (módulo - resto de la división)
console.log(a ** b);  // 1000 (exponenciación: 10³)

// El módulo (%) es más útil de lo que parece
let numero = 17;
console.log(numero % 2 === 0); // false → 17 es impar
console.log(numero % 2 === 1); // true  → 17 es impar

// Uso práctico: ¿es divisible?
console.log(100 % 10 === 0); // true → 100 es divisible por 10
console.log(15 % 4 === 0);   // false → 15 NO es divisible por 4

// Uso práctico: ciclar valores (0, 1, 2, 0, 1, 2, ...)
for (let i = 0; i < 9; i++) {
  console.log(i % 3); // 0, 1, 2, 0, 1, 2, 0, 1, 2
}

Incremento y decremento

let contador = 5;

// Post-incremento: devuelve el valor ANTES de incrementar
console.log(contador++); // 5 (muestra 5, luego incrementa a 6)
console.log(contador);   // 6

// Pre-incremento: incrementa ANTES de devolver el valor
console.log(++contador); // 7 (incrementa a 7, luego muestra 7)

// Post-decremento
console.log(contador--); // 7 (muestra 7, luego decrementa a 6)

// Pre-decremento
console.log(--contador); // 5 (decrementa a 5, luego muestra 5)

Operadores de asignación compuesta

En vez de escribir x = x + 5, JavaScript ofrece atajos:

let precio = 100;

precio += 20;  // precio = precio + 20 → 120
precio -= 10;  // precio = precio - 10 → 110
precio *= 2;   // precio = precio * 2  → 220
precio /= 4;   // precio = precio / 4  → 55
precio %= 10;  // precio = precio % 10 → 5
precio **= 3;  // precio = precio ** 3 → 125

// También funciona con strings
let saludo = "Hola";
saludo += " mundo"; // "Hola mundo"

Precedencia de operadores

JavaScript sigue reglas de precedencia similares a las matemáticas:

// Multiplicación y división antes que suma y resta
console.log(2 + 3 * 4);     // 14 (no 20)
console.log((2 + 3) * 4);   // 20 (paréntesis primero)

// Orden de precedencia (de mayor a menor):
// 1. () Paréntesis
// 2. ** Exponenciación
// 3. * / % Multiplicación, división, módulo
// 4. + - Suma, resta
// 5. Comparaciones
// 6. Operadores lógicos
// 7. Asignación

// Ejemplo práctico: calcular precio con IVA y descuento
const precioBase = 1000;
const iva = 0.16;
const descuento = 0.10;

// Sin paréntesis — resultado incorrecto
let mal = precioBase + precioBase * iva - precioBase * descuento;
// Con paréntesis — más legible
let bien = precioBase * (1 + iva) * (1 - descuento);
console.log(bien); // 1044

Estos operadores devuelven true o false y son fundamentales para tomar decisiones en tu código.

Operadores de comparación

// Igualdad
console.log(5 == "5");    // true  (== convierte tipos)
console.log(5 === "5");   // false (=== NO convierte tipos)
console.log(5 != "5");    // false (!= convierte tipos)
console.log(5 !== "5");   // true  (!== NO convierte tipos)

// ⚠️ REGLA: Siempre usá === y !== (comparación estricta)

// Mayor, menor
console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 >= 10);   // true (mayor O igual)
console.log(10 <= 9);    // false

// Comparación de strings (orden alfabético / Unicode)
console.log("apple" < "banana");  // true
console.log("A" < "a");           // true (mayúsculas primero en Unicode)
console.log("abc" < "abd");       // true

Operadores lógicos: AND, OR, NOT

// AND (&&): ambas condiciones deben ser true
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

// OR (||): al menos una condición debe ser true
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

// NOT (!): invierte el valor
console.log(!true);   // false
console.log(!false);  // true
console.log(!0);      // true (0 es falsy)
console.log(!"hola"); // false ("hola" es truthy)
console.log(!!"hola"); // true (doble negación = convertir a boolean)

Ejemplo práctico: sistema de validación

const edad = 25;
const tieneLicencia = true;
const tieneSeguro = true;
const tieneMultas = false;

// ¿Puede conducir?
const puedeConducir = edad >= 18 && tieneLicencia && tieneSeguro && !tieneMultas;
console.log(`¿Puede conducir? ${puedeConducir}`); // true

// ¿Puede obtener descuento?
const esMenor = edad < 12;
const esMayor = edad >= 65;
const esEstudiante = true;
const tieneDescuento = esMenor || esMayor || esEstudiante;
console.log(`¿Tiene descuento? ${tieneDescuento}`); // true (es estudiante)

Short-circuit evaluation (evaluación de cortocircuito)

Los operadores && y || no siempre devuelven true o false. Devuelven uno de los operandos:

// || devuelve el primer valor truthy (o el último si todos son falsy)
console.log("" || "default");      // "default"
console.log(null || "respaldo");   // "respaldo"
console.log(0 || 42);             // 42
console.log("primero" || "segundo"); // "primero"

// Uso práctico: valores por defecto
let nombreUsuario = "";
let nombreMostrado = nombreUsuario || "Anónimo";
console.log(nombreMostrado); // "Anónimo"

// && devuelve el primer valor falsy (o el último si todos son truthy)
console.log("hola" && "mundo");   // "mundo"
console.log(0 && "mundo");        // 0
console.log("" && "mundo");       // ""

// Uso práctico: ejecutar solo si hay valor
let usuario = { nombre: "Ana" };
usuario && console.log(usuario.nombre); // "Ana"

ES6+ introdujo operadores que hacen el código más limpio y seguro.

Operador ternario (? :)

Es un if-else en una sola línea:

// Sintaxis: condicion ? valorSiTrue : valorSiFalse
let edad = 20;
let acceso = edad >= 18 ? "Permitido" : "Denegado";
console.log(acceso); // "Permitido"

// Se puede anidar (pero no abuses, pierde legibilidad)
let nota = 85;
let calificacion = nota >= 90 ? "Excelente" 
                 : nota >= 70 ? "Bueno" 
                 : nota >= 50 ? "Regular" 
                 : "Insuficiente";
console.log(calificacion); // "Bueno"

// Uso práctico: texto dinámico
let items = 3;
console.log(`Tenés ${items} item${items !== 1 ? "s" : ""}`);
// "Tenés 3 items"

Nullish Coalescing (??)

Similar a || pero solo considera null y undefined como "vacío" (no 0 ni ""):

// Problema con ||
let cantidad = 0;
console.log(cantidad || 10); // 10 (¡incorrecto! 0 es un valor válido)

// Solución con ??
console.log(cantidad ?? 10); // 0 (correcto, 0 no es null ni undefined)

// Más ejemplos
console.log(null ?? "default");      // "default"
console.log(undefined ?? "default"); // "default"
console.log(0 ?? "default");         // 0
console.log("" ?? "default");        // ""
console.log(false ?? "default");     // false

// Uso práctico: configuración con valores que pueden ser 0 o ""
function crearUsuario(config) {
  const nombre = config.nombre ?? "Sin nombre";
  const edad = config.edad ?? 0;
  const activo = config.activo ?? true;
  return { nombre, edad, activo };
}

Optional Chaining (?.)

Accede a propiedades de objetos anidados sin causar error si algún nivel es null o undefined:

let usuario = {
  nombre: "Ana",
  direccion: {
    ciudad: "Buenos Aires",
    calle: "Av. Corrientes 1234"
  }
};

// Sin optional chaining — puede causar error
// let cp = usuario.direccion.codigoPostal.valor; // TypeError!

// Con optional chaining — devuelve undefined si no existe
let cp = usuario?.direccion?.codigoPostal?.valor;
console.log(cp); // undefined (sin error)

// También funciona con métodos
let resultado = usuario.direccion?.obtenerMapa?.();
console.log(resultado); // undefined (el método no existe, sin error)

// Y con arrays
let lista = null;
console.log(lista?.[0]); // undefined (sin error)

Spread y Rest (...)

// Spread: "expandir" un array u objeto
let frutas = ["manzana", "banana"];
let todasFrutas = [...frutas, "cereza", "durazno"];
console.log(todasFrutas); // ["manzana", "banana", "cereza", "durazno"]

// Copiar arrays (no por referencia)
let copia = [...frutas];
copia.push("uva");
console.log(frutas);  // ["manzana", "banana"] (original intacto)
console.log(copia);   // ["manzana", "banana", "uva"]

// Spread en objetos
let persona = { nombre: "Ana", edad: 25 };
let empleado = { ...persona, puesto: "Developer", salario: 3000 };
console.log(empleado); // { nombre: "Ana", edad: 25, puesto: "Developer", salario: 3000 }

// Rest: "recoger" múltiples argumentos
function sumar(...numeros) {
  return numeros.reduce((total, n) => total + n, 0);
}
console.log(sumar(1, 2, 3, 4, 5)); // 15

Destructuring (desestructuración)

// Destructuring de arrays
const colores = ["rojo", "verde", "azul"];
const [primero, segundo, tercero] = colores;
console.log(primero); // "rojo"
console.log(segundo); // "verde"

// Saltar elementos
const [, , ultimoColor] = colores;
console.log(ultimoColor); // "azul"

// Destructuring de objetos
const producto = { nombre: "Laptop", precio: 999, stock: 50 };
const { nombre, precio, stock } = producto;
console.log(nombre); // "Laptop"
console.log(precio); // 999

// Con alias
const { nombre: nombreProducto, precio: precioFinal } = producto;
console.log(nombreProducto); // "Laptop"

// Con valores por defecto
const { color = "negro", garantia = 12 } = producto;
console.log(color);    // "negro" (no existe en producto, usa default)
console.log(garantia); // 12

1. Confundir = con == o ===: = es asignación, == comparación con coerción, === comparación estricta. El 90% de las veces querés ===.

2. No entender la precedencia: 2 + 3 * 4 es 14, no 20. Usá paréntesis cuando tengas dudas.

3. Usar || para defaults cuando ?? es más apropiado: Si 0 o "" son valores válidos, usá ??.

4. Abusar del operador ternario: Si tu ternario tiene más de una línea, mejor usá un if-else tradicional.

5. Olvidar que ++ y -- tienen versión pre y post: i++ vs ++i pueden dar resultados diferentes en expresiones.

1. Los operadores aritméticos incluyen % (módulo) y ** (potencia) — son más útiles de lo que parecen.
2. Siempre usá === y !== (comparación estricta) en vez de == y !=.
3. Los operadores lógicos (&&, ||) usan evaluación de cortocircuito y devuelven operandos, no solo booleanos.
4. El operador ternario (? :) es ideal para asignaciones condicionales simples.
5. ?? (nullish coalescing) solo considera null/undefined como vacío — más seguro que || para defaults.
6. ?. (optional chaining) previene errores al acceder propiedades de objetos que podrían no existir.
7. Spread (...) y destructuring simplifican enormemente el trabajo con arrays y objetos.

1. ¿Cuál es el resultado de 10 % 3?
a) 3.33
b) 3
c) 1
d) 0

2. ¿Qué devuelve 0 || "hola"?
a) 0
b) "hola"
c) true
d) false

3. ¿Qué devuelve 0 ?? "hola"?
a) 0
b) "hola"
c) true
d) null

4. ¿Cuál es el resultado de "" === false?
a) true
b) false
c) Error
d) undefined

5. ¿Para qué sirve el optional chaining (?.)?
a) Para crear cadenas de texto
b) Para acceder a propiedades sin causar error si no existen
c) Para encadenar promesas
d) Para conectar funciones

Respuestas: 1-c, 2-b, 3-a, 4-b, 5-b

Ejercicio práctico

Misión: Sistema de calificaciones

Creá un programa que:

1. Tenga un array de 5 notas de un estudiante (del 1 al 10)
2. Calcule el promedio usando operadores aritméticos
3. Determine la calificación con operador ternario anidado (Excelente >= 9, Bueno >= 7, Regular >= 5, Insuficiente < 5)
4. Use destructuring para extraer la nota más alta y más baja
5. Muestre si aprobó o no (aprueba con promedio >= 6 AND sin ninguna nota menor a 4)
6. Use template literals y nullish coalescing para valores opcionales

const notas = [8, 6, 9, 5, 7];
const nombreEstudiante = null; // Simular que no se proporcionó nombre
// ... completá el resto