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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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:
- NOT lógico (
!
) - AND lógico (
&&
) - 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.
Aprendizajes de esta lección
- Comprender los distintos tipos de operadores en JavaScript y su utilidad.
- Aprender a utilizar los operadores aritméticos para realizar cálculos matemáticos.
- Saber cómo emplear los operadores de asignación para asignar valores a variables.
- Conocer cómo utilizar los operadores de comparación para evaluar condiciones.
- Entender el funcionamiento de los operadores lógicos para combinar condiciones.
- Aprender a utilizar los operadores condicionales (ternarios) para asignaciones condicionales.
- Familiarizarse con los operadores de cadena para trabajar con texto.
- Conocer los operadores bitwise y su utilidad en operaciones a nivel de bits.
Completa JavaScript y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs