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 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.