Operadores en JavaScript

En JavaScript, un operador es un símbolo especial utilizado para realizar operaciones sobre algún valor o una variable

Es necesario conocer la diferencia entre operador y operando. El operador son los símbolos que realizan la acción (+,-,*,/) entre otros. Los operandos son los valores o variables que van a ser ejecutadas por el operador (1, 2, x , y).

JavaScript cuenta con operadores binarios y unitarios, además un operador ternario también llamado operador condicional.

El operador binario requiere dos o más operando, ya sean variables o valores.

x * y; // Operandos x,y Operador (*)x + y + z; // Operandos x,y,z Operador (+)

Los operadores unitarios solo requieren un operando, ya sea antes o después del operador.

contador++; // Operando 'contador' Operador (++)contador--; // Operando 'contador' Operador (--)!existe; // Operando 'existe' Operador (!)typeof texto; // Operando 'texto' Operador (typeOf)

El operador ternario es el único que utiliza tres operandos, un if/else abreviado

condition ? val1 : val2;

Si la condición es true retorna el primer valor val1 de lo contrario, retorna el segundo valor val2

const edad = 18;const mensaje = edad >= 18 ? 'Eres mayor de edad' : 'Eres menor de edad';console.log(mensaje); // Resultado: "Eres mayor de edad"const numero = 7;const esPar = numero % 2 === 0 ? 'Es par' : 'Es impar';console.log(esPar); // Resultado: "Es impar"

Los operadores en JavaScript son clasificados en tipos, aquí te dejo los más usados 👇

• 🔹 Operadores aritméticos
• 🔹 Operadores de asignación
• 🔹 Operadores de comparación
• 🔹 Operadores lógicos
• 🔹 Operadores de Cadena
• 🔹 Operadores unitarios
• 🔹 Operadores relacionales

Operadores aritméticos

Los operadores aritméticos se utilizan para realizar operaciones matemáticas básicas.

• (+) Suma
• (-) Resta
• (*) Multiplicación
• (/) División
• (**) Exponencial
• (++) Incremento: Agrega uno al valor del operando
• (--) Decremento: disminuye uno al valor del operando
• (%) Módulo: devuelve el residuo entre dividir dos operandos

const x = 5;const y = 10;console.log(x + y); // Output: 15console.log(x - y); // Output: -5console.log(x * y); // Output: 50console.log(x / y); // Output: 0.5console.log(x % y); // Output: 5console.log(2 ** 3); // Output: 8let d = 3;let f = 3;console.log(d++); //Output: 3 Explicación: devuelve 3 y el valor de 'd' se establece en 4console.log(++f); //Output: 4 Explicación: Establece 'f' en 4 y devuelve 4let g = 3;let h = 3;console.log(g--); //Output: 3 Explicación: devuelve 3 y el valor de 'g' se establece en 2console.log(--h); //Output: 4 Explicación: El valor se asigna a 'h' y devuelve 3

Operadores de asignación

Los operadores de asignación se utilizan para asignar valores a variables. El operador de asignación simple es el igual (=) y los compuestos son abreviación de operaciones como las siguientes.

• (+=) Suma y asignación
• (-=) Resta y asignación
• (*=) Multiplicación y asignación
• (/=) División y asignación
• (%=) Módulo y asignación
• (**=) Exponencial y asignación

// Nota: Para cada ejemplo x = 10, y = 5 let x = 10;let y = 5;x = y; // Equivalente a x = y;console.log(x); // Output: 5x += y; // Equivalente a x = x + y;console.log(x); // Output: 15x -= y; // Equivalente a x = x - y;console.log(x); // Output: 5x *= y; // Equivalente a x = x * y;console.log(x); // Output: 50x /= y; // Equivalente a x = x / y;console.log(x); // Output: 2x %= y; // Equivalente a x = x % y;console.log(x); // Output: 0let a = 2;let b = 3;a **= b; // Equivalente a x = x ** y;console.log(a); // Output: 8

Operadores de comparación

Los operadores de comparación toman dos operandos y retornar un valor booleano ya sea true o false, dependiendo del operador. Estos son utilizados en condicionales y ciclos.

• (==) Igualdad: Compara valores sin importar la diferencia de su tipo de dato 2 == '2' va a ser true.

const a = 5;const b = 2;const c = 'hello';console.log(a == 5); // Output: trueconsole.log(b == '2'); // Output: trueconsole.log(c == 'Hello'); // Output:false

• (===) Igualdad estricta: Diferencia de los tipos de datos 2 == '2' va a ser false dado que está comparando un Number con un String

console.log(5 === 5); // Output: trueconsole.log(5 === '5'); // Output: falseconsole.log(5 === Number('5')); // Output: trueconsole.log(5 === 6); // Output: falseconsole.log('hello' === 'hello'); // Output:true

• (!=) Desigualdad: Devuelve true si los operandos no son iguales, no diferencia entre tipos de datos.

console.log(3 != 5); // Output: trueconsole.log(3 != 3); // Output: falseconsole.log(3 != '3'); // Output: falseconsole.log('hello' != 'Hello'); // Output:true

Explicación console.log('hello' != 'Hello') las primeras letras son transformadas a Unicode 'H' y 'h'. Estos caracteres no tienen el mismo código por ende no son igual lo cual retorna true.

• (!==) Desigualdad estricta: Devuelve true si los operandos no son iguales, diferencia de tipos de datos

console.log(3 !== '3'); // Output: trueconsole.log(3 !== 3); // Output: falseconsole.log(3 !== '3'); // Output: trueconsole.log('hello' !== 'Hello'); // Output:true

• (>) Mayor que: Devuelve true si el primer operando es mayor al segundo

console.log(5 > 2); // Output: trueconsole.log(2 > 5); // Output: falseconsole.log(5 > '2'); // Output: trueconsole.log('hello' > 'Hello'); // Output:true

Explicación: console.log('hello' > 'Hello') las primeras letras son transformadas a Unicode 'h' > 'H' y el código de 'h' es mayor al de 'H' por esta razón el output es true

• (<) Menor que: Devuelve true si el primer operando es menor al segundo

console.log(2 < 5); // Output: trueconsole.log(5 < 2); // Output: falseconsole.log(2 < '5'); // Output: trueconsole.log('Hello' < 'hello'); // Output:true

• (>=) Mayor o igual que: Devuelve true si el primer operando es mayor o igual al segundo

console.log(5 >= 2); // Output: trueconsole.log(2 >= 5); // Output: falseconsole.log(5 >= '2'); // Output: trueconsole.log('hello' >= 'Hello'); // Output:true

• (<=) Nenor o igual que: Devuelve true si el primer operando es menor o igual al segundo

console.log(2 <= 5); // Output: trueconsole.log(5 <= 2); // Output: falseconsole.log(2 <= '5'); // Output: trueconsole.log('Hello' <= 'hello'); // Output:true

Operadores lógicos

Los operadores lógicos se utilizan para combinar expresiones booleanas ya sean condiciones o variables

• &&: Es la representación del Y lógico, obliga a que dos o más condiciones tengan un valor verdadero para que retorne un true, de lo contrario retorna false
• ||: Es la representación del O lógico, Si al menos una condición de dos o más condiciones es verdadera, retornará un true, de lo contrario retorna false
• !: El NO lógico, niega el valor de una expresión booleana, si es verdadero retorna false y si es falso retorna true

console.log(true && true); // Output: trueconsole.log(true && false); // Output: falseconsole.log(false && true); // Output: falseconsole.log(false && false); // Output: falseconsole.log(true || true); // Output: trueconsole.log(true || false); // Output: trueconsole.log(false || true); // Output: trueconsole.log(false || false); // Output: falseconsole.log(!true); // Output: falseconsole.log(!false); // Output: trueconst x = 5;const y = 3;const z = 3;console.log(x === y && x === z); // Output: falseconsole.log(x === y || y === z); // Output: trueconsole.log(!(x === y)); // Output: true

Operadores de Cadena

Los operadores de cadena se utilizan para unir cadenas de texto

• (+) Concatenación: Permite la unión de dos o más cadenas de texto, también podemos utilizar los template literals `` para concatenar cadenas de texto y variables

const nombre = 'Juan';const apellido = 'Perez';console.log(nombre + ' ' + apellido); // Output: Juan Perezconsole.log('Hola ' + nombre + ' ' + apellido); // Output: Hola Juan Perezconsole.log('Hola ' + nombre + ' ' + apellido + '\n' + 'Bienvenido');/* Output: Hola Juan PerezBienvenido*//* template literals */console.log(`${nombre} ${apellido}`); // Output: Juan Perezconsole.log(`Hola ${nombre} ${apellido}`); // Output: Hola Juan Perezconsole.log(`Hola ${nombre} ${apellido} \nBienvenido`);/* Output:Hola Juan PerezBienvenido*/

Operadores unarios

Los operadores unarios se utilizan para realizar una operación en un solo operando

• delete: Elimina una propiedad de un objeto
• typeof: Devuelve el tipo de dato de una variable
• void: Ejecuta un fragmento de código sin retornar ningún valor. Su retorno siempre será undefined

/* delete */const persona = {  nombre: 'Juan',  apellido: 'Perez',};console.log(persona); // Output: {nombre: "Juan", apellido: "Perez"}delete persona.apellido;console.log(persona); // Output: {nombre: "Juan"}console.log(typeof 5); // Output: numberconsole.log(typeof '5'); // Output: stringconsole.log(typeof true); // Output: boolean/* typeof */const myFun = new Function('5 + 2');const foo = ['Apple', 'Mango', 'Orange'];const today = new Date();console.log(typeof {}); // Output: objectconsole.log(typeof undefined); // Output: undefinedconsole.log(typeof null); // Output: object Explicación: null es un objeto en JavaScriptconsole.log(typeof myFun); // Output: functionconsole.log(typeof foo); // Output: object Explicación: los arreglos son objetos en JavaScriptconsole.log(typeof today); // Output: object Explicación: las fechas son objetos en JavaScript/* void */console.log(void 0); // Output: undefinedconsole.log(void 1); // Output: undefinedconsole.log(void 'hola'); // Output: undefinedconsole.log(void true); // Output: undefinedvoid function testFunction() {  console.log('funcion ejecutada');}; // Output: undefined e imprime en consola "funcion ejecutada"testFunction(); // ejecuta la función testFunction

Operadores relacionales

Los operadores relacionales comparan sus operandos y devuelven un valor Boolean

• instanceof: Determina si el objeto especificado (operando1) es del tipo de objeto especificado (operando 2) Sintaxis: operando1 instanceof operando2
• in: Determina si una propiedad pertenece a un objeto

/* instanceof */const persona = {  nombre: 'Juan',  apellido: 'Perez',};console.log(persona instanceof Object); // Output: trueconsole.log(persona instanceof Array); // Output: falseconsole.log(persona instanceof Date); // Output: falsevar now = new Date();console.log(now instanceof Date)  // Output: true/* in */const persona = {  nombre: 'Juan',  apellido: 'Perez',};if('nombre' in persona){  console.log('La propiedad nombre existe en el objeto persona');}console.log('nombre' in persona); // Output: trueconsole.log('apellido' in persona); // Output: trueconsole.log('edad' in persona); // Output: false

Si desarrollas con JavaScript siempre vas a utilizar los operadores en tu diario vivir, es mejor conocer su funcionamiento y como utilizarlos correctamente. Espero que este artículo te haya sido de ayuda, si tienes alguna duda o sugerencia no dudes en escribirme.