Operadores y Expresiones

Introducción a operadores y expresiones

En JavaScript, los operadores son símbolos especiales que realizan operaciones en operandos (valores o variables). Una expresión es cualquier combinación válida de valores, variables, operadores y llamadas a funciones que produce un resultado.

// Ejemplos de expresiones
5 + 3           // Expresión aritmética
x = 10          // Expresión de asignación
x > 5           // Expresión de comparación
x > 5 && y < 10 // Expresión lógica

Operadores aritméticos

Los operadores aritméticos realizan operaciones matemáticas con valores numéricos.

Operadores de incremento y decremento

Estos operadores merecen especial atención porque pueden usarse como prefijo o sufijo, con comportamientos diferentes:

let a = 5;
let b = 5;

// Prefijo: incrementa y luego devuelve el valor
console.log(++a);  // 6
console.log(a);    // 6

// Sufijo: devuelve el valor y luego incrementa
console.log(b++);  // 5
console.log(b);    // 6

Operadores de asignación

Los operadores de asignación asignan valores a variables.

let x = 10;
x += 5;  // x ahora es 15
x -= 3;  // x ahora es 12
x *= 2;  // x ahora es 24
x /= 4;  // x ahora es 6

Operadores de comparación

Los operadores de comparación comparan dos valores y devuelven un valor booleano (true o false).

Igualdad estricta vs no estricta

Es importante entender la diferencia entre == (igualdad) y === (igualdad estricta):

console.log(5 == "5");   // true (los valores son iguales después de la coerción)
console.log(5 === "5");  // false (los tipos son diferentes: number vs string)

console.log(0 == false); // true (ambos se consideran "falsy")
console.log(0 === false); // false (number vs boolean)

// Se recomienda usar === para evitar comportamientos inesperados

Operadores lógicos

Los operadores lógicos se utilizan para determinar la lógica entre variables o valores.

Evaluación de cortocircuito

Los operadores && y || utilizan evaluación de cortocircuito, lo que significa que el segundo operando solo se evalúa si es necesario:

// AND (&&): si el primer operando es falso, no evalúa el segundo
console.log(false && funcionQueNoSeEjecutara());  // false

// OR (||): si el primer operando es verdadero, no evalúa el segundo
console.log(true || funcionQueNoSeEjecutara());   // true

Uso común de OR para valores predeterminados

// Antes de ES6
function saludar(nombre) {
    nombre = nombre || "Invitado";
    return "Hola, " + nombre;
}

console.log(saludar("María"));  // "Hola, María"
console.log(saludar());         // "Hola, Invitado"

Operador de coalescencia nula (??)

Introducido en ES2020, devuelve el operando derecho cuando el operando izquierdo es null o undefined:

const valor = null ?? "valor predeterminado";
console.log(valor);  // "valor predeterminado"

const cero = 0 ?? "valor predeterminado";
console.log(cero);   // 0 (a diferencia de ||, 0 no se considera falsy aquí)

Operadores de cadenas

Operador de concatenación (+)

let nombre = "Juan";
let apellido = "Pérez";
let nombreCompleto = nombre + " " + apellido;  // "Juan Pérez"

Template literals (ES6)

No es un operador en sí, pero es una forma moderna de concatenar cadenas:

let nombre = "Juan";
let edad = 30;
let mensaje = `${nombre} tiene ${edad} años`;  // "Juan tiene 30 años"

Operador ternario (condicional)

El operador ternario es el único operador en JavaScript que toma tres operandos. Es una forma abreviada de escribir una instrucción if-else.

// Sintaxis: condición ? expresión_si_verdadero : expresión_si_falso

let edad = 20;
let mensaje = edad >= 18 ? "Eres mayor de edad" : "Eres menor de edad";
console.log(mensaje);  // "Eres mayor de edad"

Operador ternario anidado

Aunque es posible anidar operadores ternarios, esto puede reducir la legibilidad:

let edad = 15;
let mensaje = edad < 13 ? "Niño" : 
              edad < 18 ? "Adolescente" : 
              edad < 65 ? "Adulto" : "Adulto mayor";
console.log(mensaje);  // "Adolescente"

Operadores de tipo

typeof

Devuelve una cadena que indica el tipo de un operando:

console.log(typeof 42);           // "number"
console.log(typeof "hola");       // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (esto es considerado un error en JavaScript)
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"
console.log(typeof function(){}); // "function"

instanceof

Comprueba si un objeto es una instancia de una clase o constructor específico:

let arr = [1, 2, 3];
console.log(arr instanceof Array);  // true

let fecha = new Date();
console.log(fecha instanceof Date);  // true

Operadores bit a bit

Estos operadores tratan los operandos como conjuntos de 32 bits y realizan operaciones en la representación binaria:

Precedencia de operadores

La precedencia de operadores determina el orden en que se evalúan las operaciones en una expresión. Los operadores con mayor precedencia se evalúan primero.

Aquí hay un resumen simplificado (de mayor a menor precedencia):

1. Agrupación ( )
2. Acceso a miembros ., [], llamadas a funciones ()
3. new, incremento/decremento como sufijo ++, --
4. Incremento/decremento como prefijo ++, --, operadores unarios +, -, !, ~, typeof
5. Exponenciación **
6. Multiplicación, división, módulo *, /, %
7. Suma, resta +, -
8. Desplazamiento bit a bit <<, >>, >>>
9. Comparaciones <, <=, >, >=, instanceof
10. Igualdad ==, !=, ===, !==
11. AND bit a bit &
12. XOR bit a bit ^
13. OR bit a bit |
14. AND lógico &&
15. OR lógico ||
16. Operador condicional (ternario) ? :
17. Asignación =, +=, -=, etc.
18. Coma ,

Ejemplos de precedencia

// La multiplicación tiene mayor precedencia que la suma
console.log(3 + 4 * 5);       // 23 (no 35)

// Los paréntesis tienen la mayor precedencia
console.log((3 + 4) * 5);     // 35

// Operadores lógicos: && tiene mayor precedencia que ||
console.log(true || false && false);  // true
console.log(true || (false && false)); // true (igual que arriba)
console.log((true || false) && false); // false

Mejores prácticas

1. Usa paréntesis para clarificar la precedencia:

   // Mejor usar paréntesis para claridad, incluso si no son necesarios
   let resultado = (a + b) * c;
   

2. Prefiere === sobre ==:

   // Evita comparaciones no estrictas
   if (valor === null || valor === undefined) {
       // Código aquí
   }
   

3. Usa operadores de asignación compuestos:

   // En lugar de
   contador = contador + 1;
   
   // Usa
   contador += 1;
   // o
   contador++;
   

4. Evita operadores ternarios complejos:

   // En lugar de ternarios anidados
   let categoria = edad < 13 ? "Niño" : edad < 18 ? "Adolescente" : "Adulto";
   
   // Usa if-else para mayor claridad
   let categoria;
   if (edad < 13) {
       categoria = "Niño";
   } else if (edad < 18) {
       categoria = "Adolescente";
   } else {
       categoria = "Adulto";
   }