Operadores en JavaScript

Operadores en JavaScript

En este artículo explicaremos los operadores en JavaScript.

YouTube Video

Operadores en JavaScript

Los operadores en JavaScript son símbolos o palabras clave que se utilizan para realizar cálculos o comparaciones en números y variables. Existen varios tipos de operadores, cada uno realiza diferentes operaciones. Aquí se resumen algunos de los operadores principales:.

Operadores Aritméticos

Los operadores aritméticos de JavaScript incluyen lo siguiente:.

Operador Descripción Ejemplo Resultado
+ Suma 5 + 2 7
- Resta 5 - 2 3
* Multiplicación 5 * 2 10
/ División 5 / 2 2.5
% Módulo (Resto) 5 % 2 1
++ Incremento (Aumentar en 1) let x = 5; x++ 6
-- Decremento (Disminuir en 1) let x = 5; x-- 4
 1let a = 10; // Initialize variable 'a' with the value 10
 2let b = 3;  // Initialize variable 'b' with the value 3
 3
 4// Perform and display arithmetic operations between 'a' and 'b'
 5console.log("Addition (a + b):      ", a + b); // 13
 6console.log("Subtraction (a - b):   ", a - b); // 7
 7console.log("Multiplication (a * b):", a * b); // 30
 8console.log("Division (a / b):      ", a / b); // 3.333...
 9console.log("Modulus (a % b):       ", a % b); // 1
10
11// Demonstrate post-increment operation on 'a'
12// Output the current value of 'a' (10), then increment
13console.log("Post-increment (a++):  ", a++);
14// Display the incremented value of 'a' (11)
15console.log("Value of 'a' after increment:", a);
16
17// Demonstrate pre-increment operation on 'a'
18// Increment 'a' first (12) then output
19console.log("Pre-increment (++a):   ", ++a);
20
21// Demonstrate post-decrement operation on 'a'
22// Output the current value of 'a' (12), then decrement
23console.log("Post-decrement (a--):  ", a--);
24// Display the decremented value of 'a' (11)
25console.log("Value of 'a' after decrement:", a);
26
27// Demonstrate pre-decrement operation on 'a'
28// Decrement 'a' first (10) then output
29console.log("Pre-decrement (--a):   ", --a);

Los operadores aritméticos realizan operaciones matemáticas básicas en números. Además de la suma y la resta, se pueden realizar operaciones como el módulo, incremento y decremento. Tenga en cuenta que el valor devuelto por el incremento o decremento varía dependiendo de si el operador está colocado antes o después del operando.

Operadores de Asignación

Los operadores de asignación de JavaScript incluyen lo siguiente:.

Operador Descripción Ejemplo Resultado
= Asignación x = 5 A x se le asigna el valor 5
+= Asignación de suma x += 5 x = x + 5
-= Asignación de resta x -= 5 x = x - 5
*= Asignación de multiplicación x *= 5 x = x * 5
/= Asignación de división x /= 5 x = x / 5
%= Asignación de módulo x %= 5 x = x % 5
 1let x = 10;
 2
 3x += 5;  // x = x + 5, so x becomes 15
 4console.log('After x += 5 : ', x);  // 15
 5
 6x -= 10;
 7console.log('After x -= 10 : ', x);  // 5
 8
 9x *= 3;
10console.log('After x *= 3 : ', x);  // 15
11
12x /= 3;
13console.log('After x /= 3 : ', x);  // 5
14
15x %= 2;
16console.log('After x %= 2 : ', x);  // 1

Los operadores de asignación se utilizan para asignar valores a las variables o actualizar los valores de las variables. Además de la asignación regular, hay operadores de asignación para operaciones aritméticas como la suma y el módulo.

Operadores de Comparación

Los operadores de comparación de JavaScript incluyen lo siguiente:.

Operador Descripción Ejemplo Resultado
== Igual 5 == "5" true
=== Estríctamente Igual (Tanto el tipo como el valor son iguales) 5 === "5" false
!= No Igual 5 != "5" false
!== Estríctamente No Igual 5 !== "5" true
> Mayor que 5 > 2 true
< Menor que 5 < 2 false
>= Mayor o igual que 5 >= 5 true
<= Menor o igual que 5 <= 4 false
 1console.log("5 == '5' evaluates to:", 5 == "5");   // true (because the values are equal)
 2console.log("5 === '5' evaluates to:", 5 === "5"); // false (because the types are different)
 3console.log("5 != '5' evaluates to:", 5 != "5");   // false
 4console.log("5 !== '5' evaluates to:", 5 !== "5"); // true
 5console.log("5 > 2 evaluates to:", 5 > 2);         // true
 6console.log("5 < 2 evaluates to:", 5 < 2);         // false
 7console.log("5 >= 5 evaluates to:", 5 >= 5);       // true
 8console.log("5 <= 4 evaluates to:", 5 <= 4);       // false
 9console.log("5 >= '5' evaluates to:", 5 >= "5");   // true
10console.log("5 <= '5' evaluates to:", 5 <= "5");   // true
  • Los operadores de comparación comparan valores y devuelven true o false.
  • El operador de igualdad (==) convierte automáticamente diferentes tipos si es necesario antes de realizar la comparación. El operador de igualdad estricta (===) no realiza ninguna conversión de tipo durante la comparación y devuelve true solo si ambos valores tienen el mismo tipo y el mismo valor. Usar el operador de igualdad estricta (===) ayuda a prevenir errores causados por conversiones de tipo no intencionadas, por lo que se recomienda usarlo de manera preferente.

Operadores Lógicos

Los operadores lógicos de JavaScript incluyen lo siguiente:.

Operador Descripción Ejemplo Resultado
&& Y (Verdadero si ambas condiciones son verdaderas) true && false false
|| O (Verdadero si alguna de las condiciones es verdadera) true || false true
! NO (Cambia verdadero a falso y falso a verdadero) !true false
1let a = true;
2let b = false;
3
4console.log("a && b evaluates to:", a && b);  // false
5console.log("a || b evaluates to:", a || b);  // true
6console.log("!a evaluates to:", !a);          // false

Los operadores lógicos se utilizan cuando hay múltiples condiciones, para evaluar combinaciones de condiciones.

Prioridad de los operadores lógicos

En JavaScript, los operadores lógicos se evalúan generalmente en el orden en que aparece NOT primero, seguido de AND, y finalmente OR.

NOT tiene la mayor precedencia

NOT es un operador unario y se evalúa con la mayor precedencia.

1console.log(!true || false);  // false
AND tiene precedencia sobre OR

AND tiene mayor precedencia que OR, por lo que se evalúa primero la parte de AND.

1console.log(true || false && false);  // true

De esta manera, la parte AND (&&) se evalúa primero, y su resultado se pasa a OR (||).

AND y OR realizan una evaluación de cortocircuito

AND y OR en JavaScript realizan una evaluación de cortocircuito. Si el resultado puede determinarse por el valor del lado izquierdo, no se evalúa la expresión del lado derecho.

1let a = false && console.log("This will not be printed");
2console.log(a);  // false
3
4let b = true || console.log("This will not be printed");
5console.log(b);  // true

En cualquier caso, console.log() no será ejecutado.

Establecer precedencia explícita

Al agrupar expresiones explícitamente con paréntesis, puedes evitar malentendidos sobre la precedencia.

1console.log(true || (false && false));  // true
Diferencias entre el lenguaje natural y la interpretación en programación

Al usar operadores lógicos, es importante ser consciente de las ambigüedades del lenguaje natural. Por ejemplo, al decir 'perro blanco o gato,' podría significar 'un perro blanco o un gato de cualquier color' o 'un perro blanco o un gato blanco.'. En código, se vería así:.

1if (isWhite && isDog || isCat) {
2    console.log(' "A white dog" or "a cat of any color" ');
3}
4
5if (isWhite && (isDog || isCat)) {
6    console.log(' "A white dog" or "a white cat" ');
7}
8
9console.log(true || (false && false));  // true

Dado que el lenguaje natural contiene ambigüedades como estas, se necesita cuidado al programar o diseñar.

Operador Ternario (Operador Condicional)

JavaScript incluye un operador ternario (operador condicional).

Operador Descripción Ejemplo Resultado
? : Si la condición es verdadera, se ejecuta el lado izquierdo; si es falsa, el lado derecho condición ? si verdadero : si falso Resultado basado en la condición
1let age = 20;
2let message = age >= 18 ? "Adult" : "Minor";
3console.log(message);  // "Adult"

Se escribe en la forma condition ? valor si es verdadero : valor si es falso.

Operadores a Nivel de Bits

Los operadores bit a bit de JavaScript incluyen los siguientes.

Operador Descripción Ejemplo Resultado
& AND 5 & 1 1
| OR 5 | 1 5
^ XOR 5 ^ 1 4
~ NOT ~5 -6
<< Desplazamiento a la izquierda 5 << 1 10
>> Desplazamiento a la derecha 5 >> 1 2
 1let x = 0x0F & 0x0C;
 2console.log("0x0F & 0x0C evaluates to:", x, "(0x0C, 12)");  // 0x0C (12)
 3
 4x = 0x04 | 0x02;
 5console.log("0x04 | 0x02 evaluates to:", x, "(0x06, 6)");  // 0x06 (6)
 6
 7x = 0x0F ^ 0x0C;
 8console.log("0x0F ^ 0x0C evaluates to:", x, "(0x03, 3)");  // 0x03 (3)
 9
10// The inverted number is represented as a negative value
11// because JavaScript numbers are stored as signed 32-bit integers.
12x = ~0x0C;
13console.log("~0x0C evaluates to:", x, "(-13, 0xF3)");  // 0xF3 (-13)
14
15x = 0x04 << 1;
16console.log("0x04 << 1 evaluates to:", x, "(0x08, 8)");    // 0x08 (8)
17x = 0x04 >> 1;
18console.log("0x04 >> 1 evaluates to:", x, "(0x02, 2)");    // 0x02 (2)

Los operadores de bits realizan cálculos en números a nivel de bits. Generalmente se utilizan para procesos de bajo nivel.

Operadores de Tipo

Los operadores de tipo de JavaScript incluyen los siguientes.

Operador Descripción Ejemplo Resultado
typeof Devuelve el tipo de una variable typeof 123 "number"
instanceof Verifica si un objeto pertenece a una clase específica arr instanceof Array true
1console.log(typeof "Hello");  // "string"
2console.log(typeof 42);       // "number"
3
4let arr = [1, 2, 3];
5console.log("arr instanceof Array : ", arr instanceof Array); // true

Los operadores de tipo se utilizan para comprobar el tipo de un valor o para convertirlo a un tipo específico.

El operador typeof devuelve el tipo de una variable.

El operador instanceof verifica si un objeto pertenece a una clase específica.

Resumen

  • Los operadores aritméticos realizan cálculos básicos.
  • Los operadores de asignación asignan o actualizan valores en las variables.
  • Los operadores de comparación comparan dos valores y devuelven true o false.
  • Los operadores lógicos evalúan combinaciones de condiciones.
  • Los operadores ternarios permiten escribir declaraciones condicionales en una forma más corta que if.
  • Los operadores de bits realizan cálculos a nivel de bits.
  • Los operadores de tipo te permiten verificar el tipo de un valor.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video