Tutorial de Javascript y las mejoras desde ES6 (ES2015) hasta ES10 (ES2019) – Parte 2 (Operadores)
Operadores en Javascript
En esta nueva entrada veremos los tipos de operadores que ofrece Javascript.
A continuación un listado de operadores que podemos usar:
- De asignación
- De comparación
- Aritméticos
- Bit a bit
- Lógicos
- De cadena de caracteres
- Condicional (ternario)
- Unarios
- Relacionales
Operadores de asignación
Con este tipo de operadores, se asigna al operando de la izquierda el valor del operando de la derecha.
Nombre | Abreviado | Significado |
Operador de asignación | x = y | x = y |
Asignación de adición | x += y | x = x + y |
Asignación de sustracción | x -= y | x = x – y |
Asignación de multiplicación | x *= y | x = x * y |
Asignación de división | x /= y | x = x / y |
Asignación de resto | x %= y | x = x % y |
Asignación de exponenciación | x **= y | x = x ** y |
Asignación desplazamiento a la izquierda | x <<= y | x = x << y |
Asignación desplazamiento a la derecha | x >>= y | x = x >> y |
Asignación AND binaria | x &= y | x = x & y |
Asginación OR binaria | x |= y | x = x | y |
A continuación, algunos ejemplos de uso:
Asignación
const x = 20; const y = 10; const w = x; const z = y;
Asignación de adición
let x = 1; let y1 = true; let y2 = false; let z = 'Hello'; x += 2; // 3 y1 += 1; // 2 y2 += 1; // 1 z += 3; // Hello3
Asignación de sustracción
let x = 10; x -= 2; // 8 x -= 'Hola'; // NaN (Not a Number)
Asignación de multiplicación
let x = 5; x *= 10; // 50 x *= 'Hola'; // NaN (Not a Number)
Asignación de división
let x = 10; x /= 2; // 5 x /= 'Hola'; // NaN (Not a Number) x /= 0; // Infinity
Asignación de resto
let x = 7; x %= 2; // 1 x %= 'Hola'; // NaN (Not a Number) x %= 0; // NaN (Not a Number)
Asignación de exponenciación
let x = 5; x **= 5; // 3125 x **= 0; // NaN (Not a Number)
Asignación de desplazamiento a la izquierda
Esta operación desplaza una cantidad específica de bits a la izquierda y asigna el resultado
const n1 = 8; n1.toString(2); // "1000", representación binaria const n2 = n1 << 1; n2; // 16; n2.toString(2); // "10000", representación binaria
En el ejemplo anterior el número 8 en binario es ‘1000‘, como desplazamos un bit (n1 << 1) a la izquierda, automáticamente el número cambia, pero por qué el número 16?.
Explicación rápida: 8 bit son 1 byte, con esos 8 bit formamos los valores de 0 a 255, ya que cada posición en esos bit tiene un valor.
Peso del bit (valor) | 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 |
Estado del bit | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Ese valor sera el que obtendremos cuando el estado de su bit este a 1.
En el ejemplo anterior el número 8 corresponde a 1000, ya que si sumamos los pesos de los bits donde su estado esté a 1, obtendremos su valor.
Peso del bit (valor) | 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 |
8 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 |
8 << 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 |
Asignación de desplazamiento a la derecha
Esta operación desplaza una cantidad específica de bits a la derecha y asigna el resultado
cosnt xx = 8; xx.toString(2); // "1000" cosnt yy = xx >> 1; yy; // 4 yy.toString(2); // "100"
Peso del bit (valor) | 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 |
8 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 |
8 >> 1 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 |
Asignación AND
Esta operación realiza la lógica binaria AND y asigna el resultado
let x = 8; let y = 2; x.toString(2); // "1000" y.toString(2); // "10" x &= y; // 0 let z = x & y; z.toString(2); // "0"
Para entender este resultado debemos saber como funciona la lógica binaria de AND.
En esta operación binaria si cualquiera de los valores a evaluar es falso el resultado de toda la operación sera falso.
Tabla de la verdad | ||
a | b | s |
0 (false) | 0 (false) | 0 (false) |
0 (false) | 1 (true) | 0 (false) |
1 (true) | 0 (false) | 0 (false) |
1 (true) | 1 (true) | 1 (true) |
Si realizamos la operación de 8 (1000) y 2 (10), tendríamos lo siguiente:
Asignación OR
Esta operación realiza una operación OR y asigna el resultado.
let x = 8; // "1000" let y = 3: // "0011" let z = x | y; // "1011" console.log(z); // 11
Para entender este resultado debemos saber como funciona la lógica binaria de OR.
En esta operación binaria si cualquiera de los valores a evaluar es verdadero el resultado de toda la operación sera verdadero.
Tabla de la verdad | ||
a | b | s |
0 (false) | 0 (false) | 0 (false) |
0 (false) | 1 (true) | 1 (true) |
1 (true) | 0 (false) | 1 (true) |
1 (true) | 1 (true) | 1 (true) |
Operadores de comparación
En este tipo de operaciones comparamos los operandos y devolvemos un valor lógico (true o false).
Para realizar la comparación podemos usar cualquier tipo de dato, ya sean textos, números, lógicos u objetos.
En la mayoría de los casos cuando comparemos los operandos, si estos fuesen distintos, Javascript realizara una conversión numérica para realizar la comparación.
Si no quisiéramos que Javascript hiciese esa conversión deberíamos usar operadores === o !==, de esta forma realizara una comparación estricta comparando ademas que sean del mismo tipo.
Igualdad
Devuelve true si ambos operandos son iguales
const a = 1; 1 == a; // true "1" == a; // true
Desigualdad
Devuelve true si ambos operandos son distintos
const a = 1; 2 != a; // true "2" != a; // true
Iguales (estricto)
Devuelve true si ambos operandos son iguales
const a = 1; 1 === a; // true "1" === a; // false (No son del mismo tipo, no esta realizando la conversión automática)
Desiguales (estricto)
Devuelve true si ambos operandos son distintos
var z = 1; "1" !== z; // true "1" != z; // false
Mayor que (>)
Devuelve true si el operador de la izquierda es mayor que el operador de la derecha
"100" > 10; // true 100 > 10; // true
Menor que (<)
Devuelve true si el operador de la izquierda es menor que el operador de la derecha
"10" < 100; // true 10 < 100; // true
Mayor o igual que (>=)
Devuelve true si el operador de la izquierda es mayor o igual que el operador de la derecha
"100" >= 10; // true 100 >= 10; // true
Menor o igual que (<=)
Devuelve true si el operador de la izquierda es menor o igual que el operador de la derecha
"10" <= 100; // true 10 <= 100; // true
Operadores de aritméticos
Los operadores aritméticos se usan para obtener un valor único usando los valores numéricos de sus operandos.
Javascript ofrece una gran variedad de operadores aritméticos, tal y como se muestra en la siguiente tabla:
Operador | Descripción | Ejemplo |
Suma (+) | Obtenemos la suma de un número(s) y/o texto(s) | 5 + 5 = 10; 2 + true = 3; 2 + ‘text’ = ‘2text’; false + ‘text’ = ‘falsetext’; |
Resta (-) | Obtenemos la resta de un número o varios numeros | 10 + 2 = 12; -10 + 2 = -8; ‘Hola’ – 10 = NaN; |
División (/) | Obtenemos el cociente de dividir el operando izquierdo (dividendo) entre el operando derecho (divisor) | 4 / 2 = 2; 2 / 4 = 0.5; 1.5 / 3 = 0.5; 2 / 0 = Infinity; ‘Hola’ / 1 = NaN |
Multiplicación (*) | Obtenemos el producto de la multiplicación de los operandos | 5 * 2 = 10; -10 * 5 = -50; 2.5 * 2 = 5; ‘Hola’ * 10 = NaN |
Resto (%) | Obtenemos el resto de la división de dos operandos | 20 % 6 = 2; 20 % ‘a’ = NaN |
Incremento (++) | Aumenta en una unidad el operando | x = 10; ‘++x‘ aumenta ‘x‘ y devuelve 11; ‘x++‘: devuelve 10 y aumenta a 11 |
Decremento (–) | Disminuye en una unidad el operando | x = 10; ‘–x‘ disminuye ‘x‘ y devuelve 9; ‘x–‘: devuelve 10 y disminuye a 9 |
Unario positivo (+) | Intenta convertir a número el operando | +true = 1; +»10″ = 10; |
Unario negativo (-) | Intenta convertir a número el operando y devuelve su forma negativa | -true = -1; -«10» = -10 |
Exponenciación (**) | Calcula la potencia de la base al valor del exponente | 2 ** 2 = 4; 10 ** -3 = 0.001 |
Operadores bit a bit
Este tipo de operadores tratan a sus operandos como un valor binario de 32 bits (representación binaria de ‘0’ y ‘1’).
Aunque su operación se realiza de forma binaria el resultado es un valor numérico.
En la siguiente tabla podemos ver algunos de los operadores bit a bit que tenemos en Javascript:
Operador | Descripción | Ejemplo |
AND (&) | Devuelve un 1 (true) si ambos bit tienen valor 1 (true) | a = 2 (10), b = 3 (11); a (10) & b (11) = 2 (10) |
OR (|) | Devuelve un 1 (true) si alguno de los bit tiene un valor a 1 (true) | a = 2 (10), b = 3 (11); a (10) | b (11) = 3 (11) |
XOR (^) | Devuelve un 1 (true) si los operadores son diferentes. Si son iguales devuelve 0 (false) | a = 2 (10), b = 3 (11); a (10) ^ b (11) = 1 (01) |
NOT (~) | Devuelve el valor invertido. La operación NOT sobre cualquier número x devuelve -(x+1) | a = -8 (-1000), ~a => 7 (0111); a = 8 (1000), ~a => -9(-1001) |
Desplaza Izq. (<<) | Desplaza b posiciones a la izquierda (binario) | a = 8 (1000), a << 1 => 16 (10000) |
Desplaza Dch. (>>) | Desplaza b posiciones a la derecha (binario) | a = 8 (1000), a >> 1 => 4 (0100) |
Operadores lógicos
Los operadores lógicos usan valores booleanos y devuelven un valor booleano.
Cuando usamos los operadores ‘&&’ y ‘||’ realmente nos esta devolviendo el valor de uno de los operandos, así que podrían devolvernos un valor no booleano.
Operador | Descripción | Ejemplo |
AND (&&) | Devuelve la expresion_1 si puede ser convertido a false si no devuelve la expresion_2 | true && true = true; false && true = false; ‘texto’ && false = false; |
OR (||) | Devuelve la expresion_1 si puede ser convertido a true si no devuelve la expresion_2 | true || true = true; false || true = true; ‘text’ || false = ‘texto’; |
NOT (!) | Devuelve false si su operando puede ser convertido a true, en caso contrario devuelve true | !true = false; !‘texto’ = false; !» = true; |
Como las expresiones lógicas son evaluadas de izquierda a derecha, estas se evalúan de manera mínima usando las siguientes reglas:
- false && xxx: mínimamente evaluada a false
- true || xxx: mínimamente evaluada a true
Con las anteriores reglas nos aseguramos que la evaluación es correcta, obteniendo de esta forma que el operador xxx no sea evaluado.
Operadores de cadena de caracteres
Gracias al operador de concatenación (+) podemos unir varias cadenas de caracteres, devolviendo todo en una única cadena.
const saludo = 'Hola buenos días, '; const nombre = 'Jose'; const texto = saludo + nombre; console.log(texto); // "Hola buenos días, Jose"
Operadores condicional (ternario)
Este operador es el único que necesita tres operandos, asignando uno de los valores en base a su condición.
La sintaxis es muy sencilla:
- condicion ? valor_1 : valor_2;
Si la condicion se cumple nos devuelve el valor_1, en caso contrario nos devuelve el valor_2
let valor = true; const resultadoOK = valor ? 'OK' : 'FAIL'; console.log(resultadoOK); // OK valor = false; const resultadoFAIL = valor ? 'OK' : 'FAIL'; console.log(resultadoFAIL); // FAIL
Operadores unarios
Es una operación que solo necesita un operando.
A continuación un listado con los operadores unarios que ofrece Javascript:
Operador | Operación | Ejemplo |
delete | Elimina una propiedad de un objeto | const obj = { a: 1, b: 2 }; delete obj.a; console.log(obj); // { b: 2 } |
void | Evalúa la expresión dada y luego devuelve undefined | void 0, void (0) o undefined // Obtener el valor primitivo undefined. |
typeof | Determina el tipo de un objeto | typeof «»; // string typeof false; // boolean |
+ | Convierte su operando a tipo número | let data = 2; +data // 2, data = true; +data // 1, data = false; +data // 0 |
– | Convierte su operando a tipo número y luego lo niega | let data = 10; -data; // -10, data = «10»; -data // -10 |
~ | Operador NOT a nivel de bit: -(x + 1) | const a = 2; // 00000010, ~a => -(2 +1) = -3; // 11111100 |
! | Operador NOT lógico | !true, !100, !»a» // false |
Operadores relacionales
Este tipo de operador compara sus operandos y devuelve un valor boleano a true si la comparación es verdadera.
- in
- valor in objeto: Para este caso valor es una propiedad o un índice de un array, y el objeto es el nombre del objeto.
const obj = {a: 1, b: 2} const array = ['a', 'b']; 0 in obj; // false 'a' in obj; // true, 0 in arr; // true, 'a' in arr; // false 'length' in obj; // false 'length' in arr; // true
- instanceof
- objeto instanceof tipoObjeto: Para este caso el objeto es el que deseamos comparar y tipoObjeto es un tipo de objeto (Array, Date, etc..)
const texto = new String(); texto instanceof String; // true texto instanceof Object; // true texto instanceof Date; // false texto instanceof Number; // false texto instanceof Boolean; // false
Con esto hemos visto los diferentes tipo de operadores que ofrece Javascript y las diferentes formas de utilizarlos.
Para el siguiente módulo veremos que mecanismos ofrece Javascript para controlar el flujo de nuestro código mediante condiciones y bucles.