Free

Operadores JavaScript

Activar audio

Domina los operadores en JavaScript: aritméticos, lógicos, de comparación, asignación y más. Aprende cómo se comportan, qué errores evitar y por qué entender su precedencia puede ahorrarte horas de depuración.

Anterior Siguiente
Desafío Práctico

Los operadores en JavaScript son símbolos especiales que se utilizan para realizar operaciones sobre valores. Son el pegamento entre los datos y las acciones que quieres ejecutar. Desde sumar números hasta comprobar condiciones, los operadores están en todas partes.

Comprenderlos no solo te permite leer y escribir código con fluidez, sino también anticipar cómo se van a comportar tus expresiones, especialmente cuando se combinan operadores distintos.

Operadores aritméticos

Realizan operaciones matemáticas básicas.

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.333...
console.log(x % y); // 1 (modulo)
console.log(x ** y); // 1000 (exponential)

Edge case: dividir por cero no lanza error, pero puede darte Infinity o NaN.

console.log(10 / 0);    // Infinity
console.log(0 / 0);     // NaN

¿Por qué 10 / 0 da Infinity y 0 / 0 da NaN?

JavaScript (y muchos lenguajes que siguen la especificación IEEE 754 para números en coma flotante) no lanza errores en operaciones aritméticas inválidas, sino que devuelve valores especiales como Infinity o NaN.

10 / 0 → Infinity

  • Esto representa un límite matemático: cuanto más pequeño es el divisor, más grande es el resultado.
  • En matemáticas, el límite de 10 / x cuando x → 0 tiende a infinito.
  • Por eso, en JavaScript:
console.log(10 / 0); // Infinity

No se lanza un error. JavaScript entiende que estás dividiendo por un número muy pequeño, y devuelve Infinity.

0 / 0 → NaN

  • Esto no tiene sentido matemático. No hay un valor definido para esta operación.
  • ¿Qué número multiplicado por 0 da 0? Todos.
  • ¿Y qué número dividido entre 0 da 0? Ninguno.
  • Resultado: indeterminación, que en JavaScript se representa como:
console.log(0 / 0); // NaN (Not a Number)

Técnicamente, NaN es un valor especial en JavaScript que representa una operación matemática inválida. No es un error, es un resultado.

Por qué esto importa

  1. No se lanza una excepción. Tu código sigue ejecutándose, lo que puede producir bugs silenciosos.
  2. NaN es tóxico: cualquier operación con NaN también da NaN.
  3. NaN !== NaN — no es igual a sí mismo, lo que dificulta su detección si no lo conoces.
console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true

Operadores de asignación

Sirven para asignar valores a variables.

let a = 5;       // adds primitive value 5 to variable a
a += 3;          // a = a + 3 (8)
a *= 2;          // a = a * 2 (16)

Operadores de comparación

Devuelven un valor booleano según la relación entre dos valores.

console.log(5 > 3);    // true
console.log(5 === '5'); // false (compares type and value)
console.log(5 == '5');  // true (type coercion)

Edge case: == hace coerción de tipos. Recuerda: usa siempre comparación estricta con === salvo que tengas un motivo claro para lo contrario.

Operadores lógicos

Se utilizan para combinar o invertir expresiones booleanas.

let isLogged = true;
let isAdmin = false;

console.log(isLogged && isAdmin); // false
console.log(isLogged || isAdmin); // true
console.log(!isLogged);           // false

Cortocircuito (short-circuit)

JavaScript evalúa operadores lógicos de izquierda a derecha y detiene la evaluación tan pronto como el resultado esté determinado:

  • && (AND) se detiene en el primer valor falsy.
  • || (OR) se detiene en el primer valor truthy.

Esto permite usar valores por defecto o condicionales sin if:

También son útiles en evaluaciones condicionales “cortocircuitadas”:

let username = userInput || 'Guest'; // if userInput is falsy, use 'Guest'

También puedes ejecutar funciones condicionalmente:

isLogged && showDashboard(); // only executes showDashboard if user isLogged (evaluates to true)

Este comportamiento no es solo booleano: cualquier valor puede ser truthy o falsy.

Operadores unarios

Operan sobre un solo operando.

let x = "5";
console.log(-x);  // -5
console.log(typeof x); // "string"
console.log(typeof +x); // "number"

Operador ternario

Una forma corta de escribir un if-else.

let age = 18;
let canVote = age >= 18 ? 'yes' : 'no';
console.log(canVote); // "yes"

Relación entre operadores y expresiones

Una expresión es cualquier fragmento de código que produce un valor.

Un operador es lo que permite construir expresiones más complejas combinando valores.

Por ejemplo:

// Expression with two operands (3 and 4) and one operator (+)
3 + 4

Todas las expresiones que involucran operadores terminan evaluándose a un resultado. Esto se conecta directamente con el concepto de "expresiones vs sentencias" que ya tratamos en otro fundamental.

Precedencia de operadores (PEMDAS en JavaScript)

La precedencia de operadores define el orden en que se evalúan las partes de una expresión.

Es similar al principio PEMDAS que se enseña en matemáticas (Paréntesis, Exponentes, Multiplicación y División, Adición y Sustracción), pero adaptado al contexto de JavaScript.

JavaScript tiene un orden definido para evaluar operadores. Algunos tienen prioridad sobre otros:

  1. Paréntesis ().
  2. Acceso por punto o corchetes obj.prop, arr[i].
  3. Negación ! y typeof.
  4. Multiplicación, división, módulo / %.
  5. Suma y resta + -.
  6. Comparaciones < > <= >=.
  7. Igualdad == != === !==.
  8. AND lógico &&.
  9. OR lógico ||.
  10. Asignación = += =.

Puedes forzar el orden con paréntesis. Siempre.

let result = 2 + 3 * 4;      // 14 (multiplication first)
let result = (2 + 3) * 4;    // 20

Errores comunes

  • Usar == en lugar de === sin entender las consecuencias.
  • No usar paréntesis en expresiones complejas y asumir mal la precedencia.
  • Esperar errores al dividir por cero (en lugar de Infinity o NaN).
  • Confundir el operador ternario con expresiones condicionales más complejas.

Conclusión

  • Los operadores permiten construir expresiones.
  • Usa === y !== para comparar con precisión.
  • Comprende la precedencia para evitar bugs silenciosos.
  • Recuerda que los operadores lógicos pueden usarse para valores no booleanos.
  • Añade paréntesis si la expresión puede leerse de formas distintas.

Enlaces útiles

Desafío Práctico: Operadores en JavaScript

Prueba a resolver este desafío antes de continuar

Los operadores son las herramientas que usas para manipular datos en JavaScript. Hay diferentes tipos según lo que necesites hacer:

  • Aritméticos: Para cálculos (+, , , /, %).
  • Comparación: Para comparar valores (>, <, >=, <=, ===, !==).
  • Lógicos: Para combinar condiciones (&&, ||, !).
  • Asignación compuesta: Para modificar variables (+=, =, =).
  • Concatenación: Para unir strings (+).

Contexto real donde los usarás constantemente:

// E-commerce price calculation
let price = 100;
let discount = 20; // 20%
let finalPrice = price - (price * discount / 100); // Arithmetic operators

// User access validation
let canAccess = age >= 18 || isPremium; // Comparison + logical operators

// Score system
score += bonusPoints; // Compound assignment

Tu tarea es completar funciones que usan estos operadores en situaciones del día a día.

Tu Código

Solución

Operadores Aritméticos

Para cálculos de descuentos usamos multiplicación y división: price * discountPercent / 100 calcula el descuento, y luego lo restamos del precio original.

Operadores de Comparación y Lógicos

Combinamos condiciones con || (OR) para acceso: si cumples una condición u otra, puedes entrar. Para rangos usamos && (AND): debe cumplir ambas condiciones.

Operadores de Asignación Compuesta

+= es shorthand para variable = variable + value. Modifica la variable directamente.

Concatenación de Strings

+ une strings. Combinamos con lógica para manejar casos donde faltan datos.

Operador Módulo

% devuelve el resto de una división. Si number % 2 === 0, el número es par.

Código Final

function calculateFinalPrice(price, discountPercent) {
  const discountAmount = price * discountPercent / 100;
  return price - discountAmount;
}

function canAccessContent(age, isPremium) {
  return age >= 18 || isPremium;
}

function updateScore(currentScore, points) {
  currentScore += points;
  return currentScore;
}

function isValidRange(value, min, max) {
  return value >= min && value <= max;
}

function formatUserName(firstName, lastName) {
  if (lastName) {
    return firstName + " " + lastName;
  }
  return firstName;
}

function isEvenNumber(number) {
  return number % 2 === 0;
}
Juan Andrés Núñez

Juan Andrés Núñez

Ingeniero Frontend Senior. Especialista en Vue.js. Speaker. Docente profesional. Estoico.