JavaScript

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ícate

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. 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 a x = x + 5;
  • Asignación resta (**-=**): Resta el valor del operando derecho al valor de la variable. Ejemplo: x -= 3; equivale a x = x - 3;
  • Asignación multiplicación (***=**): Multiplica el valor de la variable por el operando derecho. Ejemplo: x *= 2; equivale a x = x * 2;
  • Asignación división (**/=**): Divide el valor de la variable por el operando derecho. Ejemplo: x /= 4; equivale a x = x / 4;
  • Asignación módulo (**%=**): Calcula el módulo del valor de la variable con el operando derecho. Ejemplo: x %= 3; equivale a x = x % 3;
  • Asignación potenciación (****=**): Eleva el valor de la variable a la potencia del operando derecho. Ejemplo: x **= 2; equivale a x = 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:

  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.

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

CONSTRUYE TU CARRERA EN IA Y PROGRAMACIÓN SOFTWARE

Accede a +1000 lecciones y cursos con certificado. Mejora tu portfolio con certificados de superación para tu CV.

30 % DE DESCUENTO

Plan mensual

19.00 /mes

13.30 € /mes

Precio normal mensual: 19 €
63 % DE DESCUENTO

Plan anual

10.00 /mes

7.00 € /mes

Ahorras 144 € al año
Precio normal anual: 120 €
Aprende JavaScript online

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

JavaScript
Puzzle

Polimorfismo

JavaScript
Test

Array

JavaScript
Código

Transformación con map()

JavaScript
Test

Gestor de tareas con JavaScript

JavaScript
Proyecto

Manipulación DOM

JavaScript
Test

Funciones

JavaScript
Test

Funciones flecha

JavaScript
Código

Async / Await

JavaScript
Código

Creación y uso de variables

JavaScript
Test

Excepciones

JavaScript
Puzzle

Promises

JavaScript
Código

Funciones cierre (closure)

JavaScript
Test

Herencia

JavaScript
Puzzle

Herencia

JavaScript
Test

Estructuras de control

JavaScript
Código

Selección de elementos DOM

JavaScript
Test

Modificación de elementos DOM

JavaScript
Test

Filtrado con filter() y find()

JavaScript
Test

Funciones cierre (closure)

JavaScript
Puzzle

Funciones

JavaScript
Puzzle

Mapas con Map

JavaScript
Test

Reducción con reduce()

JavaScript
Test

Callbacks

JavaScript
Puzzle

Manipulación DOM

JavaScript
Puzzle

Promises

JavaScript
Test

Async / Await

JavaScript
Test

Eventos del DOM

JavaScript
Puzzle

Async / Await

JavaScript
Puzzle

Promises

JavaScript
Puzzle

Filtrado con filter() y find()

JavaScript
Código

Callbacks

JavaScript
Test

Creación de clases y objetos Restaurante

JavaScript
Código

Reducción con reduce()

JavaScript
Código

Filtrado con filter() y find()

JavaScript
Puzzle

Reducción con reduce()

JavaScript
Puzzle

Conjuntos con Set

JavaScript
Puzzle

Herencia de clases

JavaScript
Código

Eventos del DOM

JavaScript
Test

Clases y objetos

JavaScript
Puzzle

Modificación de elementos DOM

JavaScript
Puzzle

Mapas con Map

JavaScript
Puzzle

Introducción a JavaScript

JavaScript
Test

Funciones

JavaScript
Código

Tipos de datos

JavaScript
Test

Clases y objetos

JavaScript
Test

Array

JavaScript
Test

Conjuntos con Set

JavaScript
Test

Array

JavaScript
Puzzle

Encapsulación

JavaScript
Puzzle

Clases y objetos

JavaScript
Código

Uso de operadores

JavaScript
Puzzle

Uso de operadores

JavaScript
Test

Estructuras de control

JavaScript
Test

Excepciones

JavaScript
Test

Transformación con map()

JavaScript
Puzzle

Funciones flecha

JavaScript
Test

Selección de elementos DOM

JavaScript
Puzzle

Encapsulación

JavaScript
Test

Mapas con Map

JavaScript
Código

Creación y uso de variables

JavaScript
Puzzle

Polimorfismo

JavaScript
Puzzle

Tipos de datos

JavaScript
Puzzle

Estructuras de control

JavaScript
Puzzle

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.

Accede GRATIS a JavaScript y certifícate

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

  1. Comprender los distintos tipos de operadores en JavaScript y su utilidad.
  2. Aprender a utilizar los operadores aritméticos para realizar cálculos matemáticos.
  3. Saber cómo emplear los operadores de asignación para asignar valores a variables.
  4. Conocer cómo utilizar los operadores de comparación para evaluar condiciones.
  5. Entender el funcionamiento de los operadores lógicos para combinar condiciones.
  6. Aprender a utilizar los operadores condicionales (ternarios) para asignaciones condicionales.
  7. Familiarizarse con los operadores de cadena para trabajar con texto.
  8. Conocer los operadores bitwise y su utilidad en operaciones a nivel de bits.