JavaScript
Tutorial JavaScript: Operadores
JavaScript operadores: tipos y ejemplos claros. Domina los diferentes tipos de operadores en JavaScript con ejemplos claros y detallados.
Aprende JavaScript y certifícateOperadores 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. Por ejemplo:let total = a + b;
- Resta (
**-**
): Resta el segundo operando del primero. Ejemplo:let difference = a - b;
- Multiplicación (
*****
): Multiplica dos operandos. Ejemplo:let product = a * b;
- División (
**/**
): Divide el primer operando por el segundo. Ejemplo:let quotient = a / b;
- Módulo (
**%**
): Devuelve el resto de la división entre dos operandos. Ejemplo:let remainder = a % b;
- Potenciación (
******
): Eleva el primer operando a la potencia del segundo. Ejemplo:let power = a ** b;
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. Por ejemplo:let x = 10;
- Asignación suma (
**+=**
): Suma el valor del operando derecho al valor de la variable y asigna el resultado a la variable. Ejemplo:x += 5;
equivale ax = x + 5;
- Asignación resta (
**-=**
): Resta el valor del operando derecho al valor de la variable. Ejemplo:x -= 3;
equivale ax = x - 3;
- Asignación multiplicación (
***=**
): Multiplica el valor de la variable por el operando derecho. Ejemplo:x *= 2;
equivale ax = x * 2;
- Asignación división (
**/=**
): Divide el valor de la variable por el operando derecho. Ejemplo:x /= 4;
equivale ax = x / 4;
- Asignación módulo (
**%=**
): Calcula el módulo del valor de la variable con el operando derecho. Ejemplo:x %= 3;
equivale ax = x % 3;
- Asignación potenciación (
****=**
): Eleva el valor de la variable a la potencia del operando derecho. Ejemplo:x **= 2;
equivale ax = x^2;
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.
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.
7 <= 7; // true
3 < 7; // true
5 >= 5; // true
10 > 5; // true
5 !== '5'; // true
5 != '5'; // false
5 === '5'; // false
5 == '5'; // true
let steps = 10;
steps--; // steps es ahora 9
let index = 0;
index++; // index es ahora 1
let base = 3;
base **= 2; // Ahora base es 9
let num = 10;
num %= 3; // Ahora num es 1
let ratio = 20;
ratio /= 4; // Ahora ratio es 5
let factor = 4;
factor *= 2; // Ahora factor es 8
let balance = 100;
balance -= 25; // Ahora balance es 75
let count = 5;
count += 3; // Ahora count es 8
Ejercicios de esta lección Operadores
Evalúa tus conocimientos de esta lección Operadores con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Funciones flecha
Polimorfismo
Array
Transformación con map()
Gestor de tareas con JavaScript
Manipulación DOM
Funciones
Funciones flecha
Async / Await
Creación y uso de variables
Excepciones
Promises
Funciones cierre (closure)
Herencia
Herencia
Estructuras de control
Selección de elementos DOM
Modificación de elementos DOM
Filtrado con filter() y find()
Funciones cierre (closure)
Funciones
Mapas con Map
Reducción con reduce()
Callbacks
Manipulación DOM
Promises
Async / Await
Eventos del DOM
Async / Await
Promises
Filtrado con filter() y find()
Callbacks
Creación de clases y objetos Restaurante
Reducción con reduce()
Filtrado con filter() y find()
Reducción con reduce()
Conjuntos con Set
Herencia de clases
Eventos del DOM
Clases y objetos
Modificación de elementos DOM
Mapas con Map
Introducción a JavaScript
Funciones
Tipos de datos
Clases y objetos
Array
Conjuntos con Set
Array
Encapsulación
Clases y objetos
Uso de operadores
Uso de operadores
Estructuras de control
Excepciones
Transformación con map()
Funciones flecha
Selección de elementos DOM
Encapsulación
Mapas con Map
Creación y uso de variables
Polimorfismo
Tipos de datos
Estructuras de control
Todas las lecciones de JavaScript
Accede a todas las lecciones de JavaScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Javascript
Introducción Y Entorno
Tipos De Datos
Sintaxis
Variables
Sintaxis
Operadores
Sintaxis
Estructuras De Control
Sintaxis
Funciones
Sintaxis
Funciones Cierre (Closure)
Sintaxis
Arrays Y Métodos
Estructuras De Datos
Conjuntos Con Set
Estructuras De Datos
Mapas Con Map
Estructuras De Datos
Funciones Flecha
Programación Funcional
Filtrado Con Filter() Y Find()
Programación Funcional
Transformación Con Map()
Programación Funcional
Reducción Con Reduce()
Programación Funcional
Clases Y Objetos
Programación Orientada A Objetos
Excepciones
Programación Orientada A Objetos
Encapsulación
Programación Orientada A Objetos
Herencia
Programación Orientada A Objetos
Polimorfismo
Programación Orientada A Objetos
Manipulación Dom
Dom
Selección De Elementos Dom
Dom
Modificación De Elementos Dom
Dom
Eventos Del Dom
Dom
Callbacks
Programación Asíncrona
Promises
Programación Asíncrona
Async / Await
Programación Asíncrona
Certificados de superación de JavaScript
Supera todos los ejercicios de programación del curso de JavaScript y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje 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.