Curso IT Fundamentos JavaScript 040_Operadores

Los operadores de JavaScript se utilizan para realizar operaciones matemáticas, comparaciones, operaciones lógicas y otras operaciones, y devuelven resultados.

Operadores aritméticos

• +: Suma
• -: Resta
• *: Multiplicación
• /: División
• %: Módulo (resto)
• **: Exponenciación

Ejemplo:

1
let a = 5;
2
let b = 2;
3

4
console.log(a + b);  // Salida 7
5
console.log(a - b);  // Salida 3
6
console.log(a * b);  // Salida 10
7
console.log(a / b);  // Salida 2.5
8
console.log(a % b);  // Salida 1
9
console.log(a**b);  // Salida 25

Operadores de asignación

• =: Asignación
• +=: Asignación de suma
• -=: Asignación de resta
• *=: Asignación de multiplicación
• /=: Asignación de división
• %=: Asignación de módulo
• **=: Asignación de exponenciación
• ??=: Asignación nullish, la asignación solo ocurre cuando el valor de la variable es null o undefined

Ejemplo:

1
let x = 5;
2
x += 2;  // x = x + 2; Salida 7
3
x -= 2;  // x = x - 2; Salida 3
4
x *= 2;  // x = x * 2; Salida 10
5
x /= 2;  // x = x / 2; Salida 2.5
6
x %= 2;  // x = x % 2; Salida 1
7
x **= 2;  // x = x ** 2; Salida 25
8
x ??= 2;  // Salida 5, asigna 2 cuando x es null o undefined
9
console.log(x);

Operadores de comparación

• ==: Igualdad (el tipo de valor se convierte automáticamente)
• ===: Igualdad estricta (valor y tipo son iguales)
• !=: Desigualdad
• !==: Desigualdad estricta
• >: Mayor que
• <: Menor que
• >=: Mayor o igual que
• <=: Menor o igual que

Cuando se encuentran valores no numéricos, primero se convierten a valores numéricos y luego se comparan. Cuando se encuentran cadenas, se compara el código Unicode de los caracteres posición por posición.

Ejemplo:

1
let a = 5;
2
let b = '5';
3
let c = 10;
4

5
console.log(a == b);   // Salida true, valores son iguales
6
console.log(a === b);  // Salida false, tipos no son iguales
7
console.log(a != b);   // Salida false, valores son iguales
8
console.log(a !== b);  // Salida true, tipos no son iguales
9
console.log(a > c);  // Salida false, 5 < 10
10
console.log(a < c);  // Salida true, 5 < 10
11
console.log(a >= c);  // Salida false, 5 <= 10
12
console.log(a <= c);  // Salida true, 5 <= 10

Operadores lógicos

Los operadores lógicos, al procesar operandos, los convierten en valores booleanos y devuelven el valor original de ese operando.

&&: AND lógico

Se utiliza para verificar si todas las condiciones son true simultáneamente. Si todas las condiciones son true, el resultado de toda la expresión es true; de lo contrario, el resultado es false. La operación AND busca el primer false de izquierda a derecha. Si encuentra false, detiene el cálculo y devuelve el valor original de ese operando (evaluación de cortocircuito). Si finalmente no hay false, devuelve el último true.

||: OR lógico

Se utiliza para verificar si al menos una condición es true. Si al menos una condición es true, el resultado de toda la expresión es true; si todas las condiciones son false, el resultado es false. La operación OR busca el primer true de izquierda a derecha. Si encuentra true, detiene el cálculo y devuelve el valor original de ese operando (evaluación de cortocircuito). Si finalmente no hay true, devuelve el último false.

!: NOT lógico

Se utiliza para negar un valor booleano. Si un valor es true, usar el operador NOT lógico lo niega a false; si un valor es false, lo niega a true. El NOT lógico también se puede usar para convertir valores no booleanos en valores booleanos. Convierte cualquier valor que no sea null, undefined, 0, NaN, "" (cadena vacía) a true, mientras que estos valores mismos se convierten a false.

Ejemplo:

1
let a = true;
2
let b = false;
3
let c = "hello";
4
let d = null;
5

6
console.log(a && b);  // Salida false
7
console.log(c && d);  // Salida null
8
console.log(a || b);  // Salida true
9
console.log(c || d);  // Salida hello
10
console.log(!a);      // Salida false
11
console.log(!d);      // Salida true

Operador ternario

• condition ? expr1 : expr2: Si la condición es verdadera, devuelve expr1, de lo contrario devuelve expr2.

Ejemplo:

1
let age = 18;
2
let status = (age >= 18) ? 'Adulto' : 'Menor de edad';
3
console.log(status);  // Salida 'Adulto'

Operador de fusión nula

El operador de fusión nula (Nullish Coalescing Operator) es un operador utilizado para manejar valores predeterminados, generalmente usado para asegurar que una variable tenga un valor no nulo (ni null ni undefined). La sintaxis de este operador es ??.

Al usar el operador de fusión nula, devuelve el primer operando definido (ni null ni undefined). Si el primer operando es null o undefined, devuelve el segundo operando.

Ejemplo:

1
let num1 = 0;
2
let num2 = 1;
3
let result = num1 ?? num2;
4
console.log(result);  // Salida 0, porque num no es null o undefined
5

6
let user;
7
console.log(user ?? "Anónimo"); // Salida Anónimo, porque user no está definido

Operadores bit a bit

• &: AND bit a bit
• |: OR bit a bit
• ^: XOR bit a bit
• ~: NOT bit a bit
• <<: Desplazamiento a la izquierda
• >>: Desplazamiento a la derecha
• >>>: Desplazamiento a la derecha sin signo

Ejemplo:

1
let a = 5;  // Binario: 0101
2
let b = 3;  // Binario: 0011
3

4
console.log(a & b);   // Salida 1 (AND bit a bit)
5
console.log(a | b);   // Salida 7 (OR bit a bit)
6
console.log(a ^ b);   // Salida 6 (XOR bit a bit)
7
console.log(~a);      // Salida -6 (NOT bit a bit)
8
console.log(a << 1);  // Salida 10 (Desplazamiento a la izquierda)
9
console.log(a >> 1);  // Salida 2 (Desplazamiento a la derecha)

Otros operadores

• typeof: Devuelve una cadena que indica el tipo del operando no evaluado.
• instanceof: Se utiliza para probar si un objeto es una instancia de un tipo específico.

Ejemplo:

1
let str = 'Hello';
2
console.log(typeof str);  // Salida 'string'
3

4
let arr = [1, 2, 3];
5
console.log(arr instanceof Array);  // Salida true

+ (Más)

En JavaScript, el signo más + tiene múltiples usos, incluyendo operaciones matemáticas, concatenación de cadenas y operaciones unarias.

Operación matemática

Ejemplo:

1
let a = 5;
2
let b = 3;
3
let result = a + b;
4
console.log(result);  // Salida 8

Si ambos son números, + se usa para realizar suma matemática.

Concatenación de cadenas

Ejemplo:

1
let str1 = 'Hello';
2
let str2 = ' World';
3
let result = str1 + str2;
4
console.log(result);  // Salida 'Hello World'

Si uno de los operandos es una cadena, + realizará concatenación de cadenas.

Operador más unario

Ejemplo:

1
let str = '42';
2
let num = +str;
3
console.log(num);  // Salida 42

Al usar + antes de un solo operando, puede convertir el operando en un número. Esta es la función del operador más unario.

Conversión de tipo

Ejemplo:

1
let num = 42;
2
let str = '10';
3
let result = num + str;  // Conversión de tipo implícita (coerción de tipo)
4
console.log(result);  // Salida '4210'

Si uno de los operandos es una cadena, + realizará conversión de tipo, convirtiendo los otros operandos en cadenas y luego realizando concatenación de cadenas.

Concatenación de arrays

Ejemplo:

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let result = arr1 + arr2;
4
console.log(result);  // Salida '1,2,34,5,6'

Cuando un operando es un array, + convertirá el array en una cadena y luego realizará concatenación de cadenas.

Casos especiales

Ejemplo:

1
let specialResult1 = '1' + 2 + 3;
2
console.log(specialResult1);  // Salida '123'
3

4
let specialResult2 =  2 + 3 + '1';
5
console.log(specialResult2);  // Salida '51'

specialResult1: Debido a que la cadena aparece en el extremo izquierdo de +, los números subsiguientes se concatenarán como cadenas. specialResult2: Debido a que la cadena aparece en el extremo derecho de +, los números anteriores primero se sumarán matemáticamente y luego se concatenarán.

- (Menos)

En JavaScript, el signo menos - es un operador utilizado para realizar resta matemática.

Resta matemática

Ejemplo:

1
let a = 5;
2
let b = 3;
3
let result = a - b;
4
console.log(result);  // Salida 2

Si ambos son números, - se usa para realizar resta matemática.

Operador menos unario

Ejemplo:

1
let num = 42;
2
let result = -num;
3
console.log(result);  // Salida -42

Al usar - antes de un solo operando, puede realizar una resta unaria, convirtiendo el operando en su opuesto.

Conversión de tipo

Ejemplo:

1
let num1 = 42;
2
let str = '10';
3
let result = num1 - str;
4
console.log(result);  // Salida 32

Si uno de los operandos es una cadena, - realizará conversión de tipo, convirtiendo los otros operandos en números y luego realizando resta matemática.

Caso especial

Ejemplo:

1
let specialResult = '10' - 2;
2
console.log(specialResult);  // Salida 8

En este caso especial, dado que el contenido de la cadena puede convertirse exitosamente en un número, - realizará resta matemática.

=、==、=== (Asignación, igualdad no estricta, igualdad estricta)

En JavaScript, el signo igual = es un operador de asignación, mientras que == y === son operadores de comparación. La igualdad no estricta convierte ambos operandos al mismo tipo y luego realiza la comparación. En las comprobaciones condicionales, generalmente se usa === para comparaciones de igualdad estricta porque no realiza conversión de tipos.

Operador de asignación

= se usa para asignar el valor del lado derecho a la variable del lado izquierdo.

Ejemplo:

1
let x = 5;
2
let y = 'Hello';
3
console.log(x);  // Salida 5
4
console.log(y);  // Salida 'Hello'

En este ejemplo, = asigna el valor del lado derecho a las variables x e y del lado izquierdo.

Operadores de comparación

== y === se usan para comparar la igualdad de dos valores.

Ejemplo:

1
let a = 5;
2
let b = '5';
3

4
console.log(a == b);   // Salida true
5
console.log(a === b);  // Salida false

Al realizar comparaciones de igualdad con ==, se realiza conversión de tipo, null == undefined da como resultado true. Al realizar comparaciones de igualdad con ===, se requiere que tanto el valor como el tipo sean iguales, null === undefined da como resultado false. NaN no es igual a ningún valor, incluido NaN mismo.

++、-- (Incremento, Decremento)

En JavaScript, el incremento (++) y el decremento (--) son operadores utilizados para aumentar o disminuir el valor de una variable.

Operador de incremento (++)

Después del uso, hará que la variable original aumente inmediatamente en 1. Incremento prefijo devuelve el valor después del incremento (nuevo valor); Incremento sufijo devuelve el valor antes del incremento (valor antiguo);

Ejemplo de incremento prefijo:

1
let a = 5;
2
// Incremento prefijo, primero aumenta 1, luego usa el nuevo valor
3
let b = ++a;
4
console.log(b);  // Salida 6
5
console.log(a);  // Salida 6

En este ejemplo, a primero aumentó en 1, luego b obtuvo el nuevo valor de a (6).

Ejemplo de incremento sufijo:

1
let x = 5;
2
// Incremento sufijo, primero usa el valor actual, luego aumenta 1
3
let y = x++;
4
console.log(y);  // Salida 5
5
console.log(x);  // Salida 6

En este ejemplo, y primero obtuvo el valor actual de x (5), luego el valor de x aumentó en 1.

Operador de decremento (—)

Después del uso, hará que la variable original disminuya inmediatamente en 1. Decremento prefijo devuelve el valor después del decremento (nuevo valor); Decremento sufijo devuelve el valor antes del decremento (valor antiguo);

Ejemplo de decremento prefijo:

1
let p = 10;
2
// Decremento prefijo, primero disminuye 1, luego usa el nuevo valor
3
let q = --p;
4
console.log(q);  // Salida 9
5
console.log(p);  // Salida 9

En este ejemplo, p primero disminuyó en 1, luego q obtuvo el nuevo valor de p (9).

Ejemplo de decremento sufijo:

1
let m = 8;
2
// Decremento sufijo, primero usa el valor actual, luego disminuye 1
3
let n = m--;
4
console.log(n);  // Salida 8
5
console.log(m);  // Salida 7

En este ejemplo, n primero obtuvo el valor actual de m (8), luego el valor de m disminuyó en 1.

Precedencia de operadores:

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Operator_precedence