Operadores

Operadores aritméticos

Los operadores aritméticos permiten realizar cálculos matemáticos sobre valores numéricos.

const a = 7;
const b = 2;

console.log(a + b); // 9
console.log(a - b); // 5
console.log(a * b); // 14
console.log(a / b); // 3.5
console.log(a % b); // 1
console.log(a ** b); // 49

Prioridad de los operadores aritméticos

Cuando una expresión contiene varios operadores, JavaScript sigue unas reglas de precedencia para determinar el orden en que deben evaluarse.

BUENAS PRÁCTICAS

Utiliza paréntesis siempre que una expresión aritmética resulte mínimamente compleja. Aunque conozcas las reglas de precedencia, el código será más fácil de leer y mantener.

Operadores de incremento y decremento

Los operadores de incremento (++) y decremento (--) aumentan o disminuyen en una unidad el valor de una variable numérica.

let counter = 10;

counter++;
console.log(counter); // 11

counter--;
console.log(counter); // 10

Estos operadores pueden utilizarse tanto antes como después de la variable.

let x = 5;

console.log(++x); // 6
console.log(x); // 6

console.log(x++); // 6
console.log(x); // 7

OPERADORES PREFIJOS Y POSTFIJOS

Cuando el operador se escribe antes de la variable (++x o --x), la variable se modifica antes de devolver su valor.

Cuando se escribe después (x++ o x--), primero se devuelve el valor actual y, a continuación, la variable se incrementa o decrementa.

Operadores de asignación

let x = 10;

console.log((x += 5)); // 15
console.log((x -= 3)); // 12
console.log((x *= 2)); // 24
console.log((x /= 4)); // 6
console.log((x %= 4)); // 2
console.log((x **= 3)); // 8

Operadores de comparación

Los operadores de comparación devuelven un Boolean indicando si la comparación es verdadera o falsa.

const a = 7, b = 2, c = "7";

console.log(a > b);   // true
console.log(a < b);   // false
console.log(a >= b);  // true
console.log(a <= b);  // false

// Operadores de igualdad y desigualdad
console.log(a == c);  // true
console.log(a != c);  // false

// Operadores de igualdad y desigualdad estrictos
console.log(a === c); // false
console.log(a !== c); // true

BUENAS PRÁCTICAS

Utiliza los operadores de igualdad estricta (===) y desigualdad estricta (!==) siempre que sea posible. Evitan comparaciones ambiguas y hacen que el comportamiento del código sea más predecible.

Operadores lógicos

Los operadores lógicos permiten combinar o invertir expresiones lógicas. Aunque habitualmente se utilizan con valores de tipo Boolean, en JavaScript pueden aplicarse a cualquier valor, interpretándolo como truthy o falsy, como veremos más adelante en este apartado.

// El operador ! invierte el valor lógico del operando.
console.log(!true); // false
console.log(!false); // true

// El operador && solo devuelve true si ambos operandos son true.
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
console.log(true && true && true); // true
console.log(true && true && false); // false

// El operador || solo devuelve true si al menos uno de los operandos es true.
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false
console.log(false || false || true); // true
console.log(false || false || false); // false

PRECEDENCIA DE OPERADORES LÓGICOS

Cuando una expresión contiene varios operadores lógicos y no se utilizan paréntesis, JavaScript evalúa primero el operador && y después el operador ||.

console.log(true || false && false);   // true
console.log((true || false) && false); // false

Valores truthy y falsy

En JavaScript cualquier valor puede interpretarse como verdadero (truthy) o falso (falsy) cuando se utiliza en un contexto lógico, como una condición o un operador lógico.

Valores falsy

Existen únicamente los siguientes valores falsy:

• false
• 0
• -0
• 0n
• NaN
• ""
• null
• undefined

Todos los demás valores son truthy.

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false

console.log(Boolean(1)); // true
console.log(Boolean("Hello")); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true
console.log(Boolean("0")); // true
console.log(Boolean("false")); // true

Comportamiento de && y ||

Los operadores && y || utilizan la conversión implícita a valores truthy y falsy para evaluar las expresiones.

El operador && devuelve el primer operando si este es un valor falsy; en caso contrario, devuelve el segundo.

console.log(5 && 10); // 10
console.log(0 && 10); // 0
console.log("" && "Hello"); // ""

El operador || devuelve el primer operando si este es un valor truthy; en caso contrario, devuelve el segundo.

console.log(5 || 10); // 5
console.log(0 || 10); // 10
console.log("" || "Anonymous"); // Anonymous

EVALUACIÓN DE CORTOCIRCUITO

El comportamiento de && y || se basa en la evaluación de cortocircuito (short-circuit evaluation). JavaScript deja de evaluar una expresión cuando el resultado ya puede determinarse, evitando evaluar operandos innecesarios.

function first() {
  console.log("first()");
  return false;
}

function second() {
  console.log("second()");
  return true;
}

console.log(first() && second());
// first()
// false

console.log(first() || second());
// first()
// second()
// true

En la primera expresión, second() no llega a ejecutarse porque el primer operando de && ya determina el resultado de la expresión. En la segunda expresión, como el primer operando devuelve un valor falsy, es necesario evaluar el segundo para determinar el resultado final.

Operador de fusión nula (??)

El operador de fusión nula (Nullish coalescing operator) devuelve el operando derecho únicamente cuando el operando izquierdo es null o undefined. En cualquier otro caso, devuelve el valor del operando izquierdo.

const username = null;

console.log(username ?? "Anonymous"); // Anonymous

const username = "Alice";

console.log(username ?? "Anonymous"); // Alice

Este operador resulta especialmente útil para proporcionar valores por defecto cuando únicamente se desea sustituir los valores null y undefined.

console.log(0 ?? 10); // 0
console.log(false ?? true); // false
console.log("" ?? "Anonymous"); // ""
console.log(null ?? "Anonymous"); // Anonymous
console.log(undefined ?? "Anonymous"); // Anonymous

Diferencia entre || y ??

Ambos operadores permiten proporcionar un valor alternativo, pero su comportamiento es diferente.

El operador lógico OR (||) devuelve el operando derecho cuando el izquierdo es un valor falsy.

console.log(0 || 100); // 100
console.log("" || "Anon"); // Anon
console.log(false || true); // true

El operador de fusión nula (??) únicamente devuelve el operando derecho cuando el izquierdo es null o undefined.

console.log(0 ?? 100); // 0
console.log("" ?? "Anon"); // ""
console.log(false ?? true); // false
console.log(null ?? "Anon"); // Anon

La principal diferencia es que || considera que cualquier valor falsy equivale a "no hay valor", mientras que ?? únicamente sustituye los valores null y undefined.

BUENAS PRÁCTICAS

Utiliza ?? cuando quieras proporcionar un valor por defecto sin reemplazar valores válidos como 0, false o "".

Utiliza || cuando cualquier valor falsy deba considerarse equivalente a "no hay valor".

Operador condicional (?:)

El operador condicional (Conditional (ternary) operator) evalúa una condición y devuelve uno de dos valores según el resultado. Constituye una alternativa más concisa a una estructura if...else sencilla.

const age = 20;

const message = age >= 18 ? "Adult" : "Minor";

console.log(message); // Adult

El operador tiene la siguiente sintaxis:

condition ? expressionIfTrue : expressionIfFalse;

Si la condición es verdadera, se evalúa y devuelve expressionIfTrue; en caso contrario, se evalúa y devuelve expressionIfFalse.

BUENAS PRÁCTICAS

Utiliza el operador ternario únicamente cuando la condición sea sencilla y mejore la legibilidad del código. Para condiciones complejas o anidadas, resulta más claro utilizar una estructura if...else.

Operadores de acceso

Operador de acceso a propiedades (.)

El operador punto (.) permite acceder a las propiedades de un objeto utilizando directamente el nombre de la propiedad.

const person = {
  name: "Alice",
  age: 30,
};

console.log(person.name); // Alice
console.log(person.age); // 30

Operador de acceso mediante corchetes ([])

Los corchetes ([]) permiten acceder a una propiedad utilizando una expresión. Resultan especialmente útiles cuando el nombre de la propiedad se encuentra almacenado en una variable o se calcula dinámicamente.

const person = {
  name: "Alice",
  age: 30,
};

const property = "age";

console.log(person[property]); // 30

También pueden utilizarse con un valor literal.

console.log(person["name"]); // Alice

Operador de encadenamiento opcional (?.)

El operador de encadenamiento opcional (Optional chaining operator) permite acceder de forma segura a una propiedad o llamar a un método cuando no se tiene la certeza de que el objeto exista. Si el objeto es null o undefined, la expresión devuelve undefined en lugar de producir un error.

const person = {
  name: "Alice",
  address: {
    city: "Valencia",
  },
};

console.log(person.address?.city); // Valencia
console.log(person.profile?.name); // undefined

Sin el operador ?., el segundo acceso produciría una excepción porque profile no existe.

EVOLUCIÓN DEL LENGUAJE

Antes de la incorporación del operador de encadenamiento opcional (?.), era habitual utilizar el operador lógico && para acceder de forma segura a propiedades de un objeto.

const user = {
  name: "Alice",
};

console.log(user && user.name); // Alice

const guest = null;
console.log(guest && guest.name); // null

Este patrón aprovechaba la evaluación de cortocircuito: si el primer operando era un valor falsy, JavaScript devolvía ese valor sin evaluar el segundo, evitando así un error al intentar acceder a una propiedad de null o undefined.

Sin esta comprobación previa, el acceso directo a la propiedad provocaría una excepción:

const guest = null;

console.log(guest.name);
// TypeError: Cannot read properties of null (reading 'name')

Actualmente, este mismo código puede escribirse de forma más sencilla y legible mediante el operador de encadenamiento opcional:

const guest = null;

console.log(guest?.name); // undefined

Operador typeof

El operador typeof devuelve una cadena indicando el tipo de un valor.

console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof null); // "object"

El resultado obtenido para null constituye una particularidad histórica de JavaScript que se mantiene por motivos de compatibilidad.

Precedencia de operadores

Cuando una expresión contiene varios operadores, JavaScript los evalúa siguiendo un orden de prioridad. Los operadores con mayor precedencia se evalúan antes que los de menor precedencia.

Por ejemplo, en la siguiente expresión la multiplicación se realiza antes que la suma:

console.log(5 + 3 * 2); // 11

Si se desea modificar el orden de evaluación, pueden utilizarse paréntesis:

console.log((5 + 3) * 2); // 16

Tabla de precedencia

La siguiente tabla resume la precedencia de los operadores más utilizados en JavaScript, ordenados de mayor a menor prioridad.

Prioridad	Operadores	Descripción
1	()	Agrupación mediante paréntesis
2	. ?. [] ()	Acceso a propiedades, acceso opcional, acceso por índice y llamada a funciones
3	new	Creación de objetos
4	++ -- ! + - typeof	Operadores unarios
5	**	Potencia
6	* / %	Multiplicación, división y resto
7	+ -	Suma y resta
8	< <= > >= instanceof in	Operadores relacionales
9	== != === !==	Operadores de igualdad
10	&&	AND lógico
11	|| ??	OR lógico y fusión nula
12	?:	Operador condicional (ternario)
13	= += -= *= /= %= **= &&= ||= ??=	Operadores de asignación

BUENAS PRÁCTICAS

Aunque conozcas las reglas de precedencia, utiliza paréntesis siempre que una expresión combine varios operadores. El código será más fácil de leer, mantener y depurar.