Tutorial JavaScript: Operadores

Introducción a los operadores

Los operadores son símbolos especiales que nos permiten realizar operaciones sobre valores y variables. Son las herramientas básicas para manipular datos en JavaScript, como sumar números, comparar valores o combinar condiciones.

Piensa en los operadores como acciones: nos permiten transformar datos o tomar decisiones basadas en ellos. Los operadores toman "operandos" (los valores sobre los que actúan) y producen resultados.

Al igual que vimos con los tipos de datos y las variables en lecciones anteriores, los operadores te permitirán crear programas más dinámicos e interactivos.

Los operadores en JavaScript se clasifican en varios grupos principales:

• Operadores aritméticos (para matemáticas)
• Operadores de asignación (para guardar valores)
• Operadores de comparación (para comparar valores)
• Operadores lógicos (para combinar condiciones)
• Operadores especiales (para tareas específicas)

Operadores aritméticos y de asignación

Los operadores aritméticos permiten realizar operaciones matemáticas básicas sobre valores numéricos. Los operadores más comunes en JavaScript son:

• Suma (+): Añade dos operandos. 
• Resta (-): Resta el segundo operando del primero.
• Multiplicación (*): Multiplica dos operandos. 
• División (/): Divide el primer operando por el segundo. 
• Módulo (%): Es especialmente útil para determinar si un número es divisible por otro (el resto será 0) o para mantener un número dentro de un rango (como en ciclos).
• Potenciación (**): Eleva el primer operando a la potencia del segundo.

Algunos ejemplos de uso: 

// Suma (+)
let suma = 5 + 3;  // 8

// Resta (-)
let resta = 10 - 4;  // 6

// Multiplicación (*)
let multiplicacion = 6 * 3;  // 18

// División (/)
let division = 15 / 3;  // 5

// Módulo (%) - devuelve el resto de una división
let resto = 10 % 3;  // 1 (porque 10 ÷ 3 = 3 con resto 1)

// Verificar si un número es par
let esPar = 8 % 2 === 0;  // true, porque 8 es divisible por 2

Los operadores de asignación se utilizan para asignar valores a variables. El operador de asignación básica es el símbolo igual (=), pero también existen operadores de asignación combinados con operadores aritméticos:

• Asignación simple (=): Asigna un valor a una variable. 
• Asignación suma (+=): Suma el valor del operando derecho al valor de la variable y asigna el resultado a la variable. 
• Asignación resta (-=): Resta el valor del operando derecho al valor de la variable. 
• Asignación multiplicación (*=): Multiplica el valor de la variable por el operando derecho.
• Asignación división (/=): Divide el valor de la variable por el operando derecho.
• Asignación módulo (%=): Calcula el módulo del valor de la variable con el operando derecho. 
• Asignación potenciación (**=): Eleva el valor de la variable a la potencia del operando derecho.

Algunos ejemplos de uso: 

// Asignación con suma (+=)
let puntos = 10;
puntos += 5;  // Equivale a: puntos = puntos + 5; (ahora puntos es 15)

// Asignación con resta (-=)
let vidas = 3;
vidas -= 1;  // Equivale a: vidas = vidas - 1; (ahora vidas es 2)

// Asignación con multiplicación (*=)
let factor = 4;
factor *= 2;  // Equivale a: factor = factor * 2; (ahora factor es 8)

// Asignación con división (/=)
let ratio = 20;
ratio /= 4;  // Equivale a: ratio = ratio / 4; (ahora ratio es 5)

// Asignación con módulo (%=)
let ciclo = 10;
ciclo %= 3;  // Equivale a: ciclo = ciclo % 3; (ahora ciclo es 1)

// Asignación con potenciación (**=)
let base = 3;
base **= 2;  // Equivale a: base = base ** 2; (ahora base es 9)

También es importante conocer los operadores de incremento y decremento, que modifican el valor de una variable en uno:

• Incremento (++): Aumenta el valor de la variable en uno. Puede ser prefijo (++x) o sufijo (x++).
• Decremento (--): Disminuye el valor de la variable en uno. También puede ser prefijo o sufijo.

La diferencia entre el uso prefijo y sufijo radica en el momento en que se aplica el incremento o decremento:

let a = 5;
let b = ++a; // a es 6, b es 6

let c = 5;
let d = c++; // c es 6, d es 5

En el primer caso, con ++a, el valor de a se incrementa antes de asignarlo a b. En el segundo caso, con c++, el valor original de c se asigna a d y luego c se incrementa.

Al utilizar estos operadores aritméticos y de asignación, es posible escribir código más conciso y eficiente. Es fundamental comprender su funcionamiento para manipular datos numéricos de manera efectiva en JavaScript.

Operadores de comparación

Los operadores de comparación en JavaScript se utilizan para comparar dos valores y devolver un resultado booleano (true o false). Estos operadores son esenciales para controlar el flujo de ejecución en funciones condicionales y estructuras de control. A continuación, se presentan los principales operadores de comparación:

• Igualdad débil (==): Compara si dos valores son iguales después de convertirlos al mismo tipo. 
• Igualdad estricta (===): Comprueba si dos valores son iguales y del mismo tipo, sin realizar conversión de tipos. 
• Desigualdad débil (!=): Verifica si dos valores no son iguales, considerando conversión de tipos. 
• Desigualdad estricta (!==): Determina si dos valores no son iguales o no son del mismo tipo, sin conversión de tipos. 
• Mayor que (>): Evalúa si el operando izquierdo es mayor que el derecho. 
• Mayor o igual que (>=): Comprueba si el operando izquierdo es mayor o igual que el derecho. 
• Menor que (<): Determina si el operando izquierdo es menor que el derecho. 
• Menor o igual que (<=): Verifica si el operando izquierdo es menor o igual que el derecho.

Es fundamental entender la diferencia entre igualdad débil e igualdad estricta. El operador == realiza coerción de tipos, lo que significa que JavaScript convertirá los operandos a un tipo común antes de compararlos. Esto puede llevar a resultados inesperados:

0 == false;      // true
'' == false;     // true
null == undefined; // true

Por el contrario, el operador === no realiza conversión de tipos y solo devuelve true si ambos operandos son del mismo tipo y valor. Es una buena práctica utilizar siempre la igualdad estricta para evitar comportamientos impredecibles:

0 === false;      // false
'' === false;     // false
null === undefined; // false

Al comparar objetos o arrays, los operadores de igualdad comparan referencias y no valores. Dos objetos son iguales solo si apuntan al mismo espacio en memoria:

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Alice' };

obj1 === obj2; // false

Aunque obj1 y obj2 tienen propiedades idénticas, son objetos distintos en memoria, por lo que la comparación devuelve false. Para comparar el contenido de objetos, es necesario realizar una comparación profunda de sus propiedades.

Consejo práctico: Es recomendable usar siempre operadores estrictos (=== y !==) para evitar errores inesperados por conversión automática de tipos.

Los operadores de comparación se emplean comúnmente en estructuras condicionales como if, else if y switch:

const score = 85;

if (score >= 90) {
  console.log('Excellent');
} else if (score >= 75) {
  console.log('Good');
} else {
  console.log('Needs Improvement');
}

En este ejemplo, se utilizan operadores como mayor o igual que para determinar la calificación. Los operadores de comparación son esenciales para implementar lógica condicional y realizar validaciones en el código.

También es posible utilizar estos operadores en expresiones lógicas más complejas, combinándolos con operadores lógicos como && (AND) y || (OR):

const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log('You can drive.');
} else {
  console.log('You cannot drive.');
}

Aquí, la condición verifica que ambas comparaciones sean verdaderas para permitir conducir. Entender cómo funcionan los operadores de comparación es clave para escribir código preciso y evitar errores lógicos en programas JavaScript.

Operadores lógicos

Los operadores lógicos en JavaScript permiten combinar condiciones y obtener valores booleanos como resultado. Estos operadores son fundamentales para controlar el flujo de ejecución en el código. Los principales operadores lógicos son:

• AND lógico (&&)
• OR lógico (||)
• NOT lógico (!)

AND lógico (&&)

El operador AND lógico (&&) devuelve true si ambos operandos son verdaderos. Se utiliza para verificar que múltiples condiciones se cumplan simultáneamente.

Ejemplo:

const isMember = true;
const hasPaidFee = true;

if (isMember && hasPaidFee) {
  console.log('Access to the club granted');
} else {
  console.log('Access denied');
}

En este código, el acceso solo se concede si isMember y hasPaidFee son true. El operador && facilita la comprobación de múltiples condiciones necesarias.

El operador && también realiza evaluación de cortocircuito: si el primer operando es false, no evalúa el segundo, ya que el resultado será necesariamente false.

OR lógico (||)

El operador OR lógico (||) devuelve true si al menos uno de los operandos es verdadero. Es útil cuando solo se requiere que una de varias condiciones sea verdadera.

Ejemplo:

const hasCoupon = false;
const isFirstPurchase = true;

if (hasCoupon || isFirstPurchase) {
  console.log('Discount applied');
} else {
  console.log('No discount available');
}

Aquí, el descuento se aplica si hasCoupon o isFirstPurchase es true. El operador || permite ofrecer alternativas en las condiciones.

Al igual que &&, el operador || también realiza evaluación de cortocircuito: si el primer operando es true, no evalúa el segundo, ya que el resultado será true.

NOT lógico (!)

El operador NOT lógico (!) invierte el valor booleano de su operando. Convierte true en false y false en true.

Ejemplo:

const isAvailable = false;

if (!isAvailable) {
  console.log('Item is out of stock');
}

En este caso, el mensaje 'Item is out of stock' se mostrará porque !isAvailable es true. El operador ! es útil para verificar la negación de una condición.

También se puede utilizar ! para comprobar si un valor es falsy (valores que se evalúan como false en contextos booleanos), como 0, '', null, undefined o NaN.

Combinación de operadores lógicos

Es posible combinar varios operadores lógicos para crear condiciones más complejas.

Ejemplo:

const username = 'user123';
const password = 'pass123';
const isAdmin = false;

if ((username === 'user123' && password === 'pass123') || isAdmin) {
  console.log('Login successful');
} else {
  console.log('Login failed');
}

En este ejemplo, el inicio de sesión se permite si las credenciales son correctas o si el usuario es administrador.

Evaluación de cortocircuito

La evaluación de cortocircuito es una característica en la que el segundo operando de un operador lógico se evalúa solo si es necesario.

• Con &&, si el primer operando es falsy, el resultado es el primer operando y el segundo no se evalúa.
• Con ||, si el primer operando es truthy, el resultado es el primer operando y el segundo no se evalúa.

Ejemplo con &&:

function getUser() {
  console.log('Fetching user');
  return { name: 'Alice' };
}

const user = false && getUser(); // getUser() no se ejecuta
console.log(user); // false

Ejemplo con ||:

const fallbackValue = 'Default';
const input = '' || fallbackValue;
console.log(input); // 'Default'

Uso en asignaciones y expresiones

Los operadores lógicos pueden utilizarse para asignar valores de forma concisa.

Ejemplo:

const settings = userSettings || defaultSettings;

Aquí, settings tomará el valor de userSettings si es truthy; de lo contrario, usará defaultSettings.

Otro ejemplo con &&:

isLoggedIn && renderDashboard();

En este caso, renderDashboard() solo se ejecuta si isLoggedIn es true.

Doble negación (!!)

La doble aplicación del operador !, es decir, !!, se emplea para convertir un valor a su equivalente booleano.

Ejemplo:

const value = 'Hello World';
const isString = !!value;
console.log(isString); // true

Este método es útil para verificar la existencia o validez de un valor, convirtiendo valores falsy en false y valores truthy en true.

Precedencia y uso de paréntesis

Los operadores lógicos tienen una precedencia definida que afecta el orden de evaluación:

1. NOT lógico (!)
2. AND lógico (&&)
3. OR lógico (||)

Es importante utilizar paréntesis para garantizar el orden deseado y evitar confusiones.

Ejemplo:

const result = true || false && false;
console.log(result); // true

Sin paréntesis, false && false se evalúa primero, luego true || false, resultando en true. Usando paréntesis:

const result = (true || false) && false;
console.log(result); // false

Aquí, true || false se evalúa primero, resultando en true, y luego true && false, dando false.

Valores truthy y falsy

Los operadores lógicos no se limitan a valores booleanos; cualquier valor en JavaScript puede evaluarse en un contexto lógico:

• Falsy: false, 0, '', null, undefined, NaN
• Truthy: Cualquier valor que no sea falsy

Ejemplo:

const name = '';

if (name) {
  console.log('Name is set');
} else {
  console.log('Name is not set');
}

Como name es una cadena vacía (falsy), el mensaje 'Name is not set' se mostrará.

Comprender los operadores lógicos y su comportamiento es esencial para controlar el flujo y la lógica de las aplicaciones en JavaScript de manera efectiva.

Operadores especiales: ternario, typeof, instanceof

Los operadores especiales en JavaScript proporcionan funcionalidades adicionales para realizar comprobaciones y operaciones más concisas. Entre estos operadores se encuentran el operador ternario (? :), el operador typeof y el operador instanceof.

El operador ternario es una forma abreviada del if...else que permite escribir condiciones de manera más compacta. Su sintaxis es:

condición ? expresión_si_verdadero : expresión_si_falso;

Si la condición es verdadera, se evalúa y devuelve la expresión_si_verdadero; de lo contrario, se evalúa y devuelve la expresión_si_falso.

Ejemplo:

const age = 20;
const canVote = age >= 18 ? 'Sí puede votar' : 'No puede votar';
console.log(canVote); // 'Sí puede votar'

En este caso, la variable canVote obtendrá el valor 'Sí puede votar' si age es mayor o igual a 18; de lo contrario, obtendrá 'No puede votar'. El uso del operador ternario facilita la asignación condicional de valores y mejora la legibilidad en condiciones simples.

El operador typeof devuelve una cadena que indica el tipo de dato de un operando. Es útil para verificar el tipo de una variable en tiempo de ejecución y asegurar un manejo adecuado de los datos.

Ejemplos:

typeof 42; // 'number'
typeof 'Hello'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof { name: 'Alice' }; // 'object'
typeof [1, 2, 3]; // 'object' (los arrays son objetos)
typeof null; // 'object' (peculiaridad histórica)
typeof function() {}; // 'function'

Es importante tener en cuenta que typeof null devuelve 'object' debido a una peculiaridad en JavaScript. El operador typeof es especialmente útil para comprobar si una variable está definida o para validar el tipo de datos recibido en funciones.

Ejemplo de verificación de definición:

if (typeof myVariable !== 'undefined') {
  // myVariable está definida
}

El operador instanceof determina si un objeto es instancia de una función constructora o de una clase. Devuelve true si el objeto hereda en su cadena de prototipos la propiedad prototype de la función o clase especificada.

Ejemplos:

class Person {}
const person = new Person();

console.log(person instanceof Person); // true

const today = new Date();
console.log(today instanceof Date); // true

const numbers = [1, 2, 3];
console.log(numbers instanceof Array); // true
console.log(numbers instanceof Object); // true

En este ejemplo, se comprueba si los objetos creados son instancias de sus respectivas clases. Dado que en JavaScript los arrays y las funciones también son objetos, numbers instanceof Object devuelve true.

El operador instanceof también es útil para verificar herencias en clases:

class Animal {}
class Dog extends Animal {}
const lassie = new Dog();

console.log(lassie instanceof Dog); // true
console.log(lassie instanceof Animal); // true

En este caso, lassie es instancia de Dog y, por herencia, también de Animal. Esto permite validar la jerarquía de objetos y garantizar que ciertas propiedades o métodos estén disponibles.

Los operadores especiales aportan formas eficientes de realizar comprobaciones y asignaciones en JavaScript. El operador ternario es ideal para condiciones simples donde un if...else podría ser excesivo. El operador typeof es esencial para depuración y validación de tipos, aunque hay que ser consciente de sus limitaciones, como en el caso de null. Por último, el operador instanceof es clave en programación orientada a objetos para verificar el tipo de instancia y manejar correctamente la herencia y la polimorfía.

Es fundamental utilizar estos operadores de manera adecuada para escribir código más limpio y mantener buenas prácticas en el desarrollo con JavaScript.