top of page

¿Cómo usar Operadores Cortocircuito en ReactJS? ✨ Hacks de JavaScript 🧑🏻‍💻

Updated: Apr 9

Estás probando los operadores cortocircuito en JavaScript y te sientes perdido? Relax, 👩🏻‍💻tenemos una intro breve en Reactjs, gratis y en español 📝👀 ¡Los detalles aquí!


Operadores Cortocircuito en JavaScript: Otro blog MeltStudio
Operadores Cortocircuito en JavaScript: Otro blog MeltStudio


Por ejemplo, al usar el operador lógico OR ( | | ): Este operador evalúa dos expresiones y devuelve la primera expresión si es verdadera, o la segunda expresión si es falsa. Pero, solo evaluará la segunda expresión si la primera expresión es falsa (Yo sé que suena confuso🥲, pero it's pretty simple, ya te explico)

En los blogs de Melt encuentra tips Dev en JavaScript y de paso te cuento ¿cómo funcionan? y ¿dónde puedes usarlos? 📝👀 ¡Los detalles en este blogpost!



SHORTCIRCUIT JAVASCRIPT

TALK DE LA SEMANA


¿De dónde viene el nombre corto circuito de los operadores JavaScript?
¿De dónde viene el nombre corto circuito de los operadores JavaScript?

En JavaScript, los operadores de cortocircuito && (AND lógico) y || (OR lógico) se llaman "de cortocircuito" porque pueden dejar de evaluar las expresiones tan pronto como sepa el resultado final.


Operador && (AND lógico) de JavaScript

  • Si la expresión de la izquierda es falsa, el resultado es falso y no evalúa la expresión de la derecha porque ya sabe que la expresión completa será falsa.

  • Si la expresión de la izquierda es verdadera, entonces evalúa la expresión de la derecha y devuelve su resultado.


Ejemplo:

Supongamos que queremos verificar si un usuario tiene permisos para realizar una acción.


function verificarPermisos(usuario) {
  //Verificar usuario lectura y escritura   
  const Approved = usuario && usuario.Lectura && usuario.Escritura;
  if (Approved) {
    console.log("El usuario tiene permisos.");
  } else {
    console.log("El usuario no tiene permisos necesarios.");
  }
}

Creamos una función que toma un objeto usuario y verifica si tiene tanto el permiso de lectura como el permiso de escritura.


También damos al user los permisos de lectura y escritura:

const usuarioConPermisos = { Lectura: true, Escritura: true };
const usuarioSinPermisoEscritura = { Lectura: true, Escritura: false };

Al llamar a la función de verificarPermisos y cumplirse todos los && tendríamos un mensaje positivo. En caso contrario, si al menos uno no se cumple, el mensaje será negativo:


verificarPermisos(usuarioConPermisos); 
// Salida: El usuario tiene permisos.

verificarPermisos(usuarioSinPermisoEscritura); 
// Salida: El usuario no tiene los permisos necesarios.

Operador || (OR lógico) de JavaScript

  • Si la expresión de la izquierda es verdadera, el resultado es verdadero y no evalúa la expresión de la derecha porque ya sabe que la expresión completa será verdadera.

  • Si la expresión de la izquierda es falsa, entonces evalúa la expresión de la derecha y devuelve su resultado.


Ejemplo:

Supongamos que queremos asignar un valor por defecto a una variable si esta es null o undefined.


function asignarValorPorDefecto(valor) {
  const valorAsignado = valor || "Este texto";
  console.log("El valor asignado es:", valorAsignado);
} 

// Caso 1: Asignar un valor existente 
asignarValorPorDefecto("Un Nuevo Valor"); 
// Salida: El valor asignado es: Un Nuevo Valor 

// Caso 2: Asignar un valor null 
asignarValorPorDefecto(null); 
// Salida: El valor asignado es: Este texto 

// Caso 3: Asignar un valor undefined 
asignarValorPorDefecto(undefined); 
// Salida: El valor asignado es: Este texto

En este ejercicio, la variable valorAsignado tomará el valor del parámetro valor si valor es true. Si valor es false (como null o undefined), se asignará le asignará la string "Este texto".


Operadores Cortocircuito en ReactJS

// Crear un objeto simple 
let persona = { nombre: "John", edad: 30, ciudad: "Ejemplópolis" };

// Acceder a las propiedades del objeto
console.log("Nombre:", persona.nombre); 
console.log("Edad:", persona.edad); 
console.log("Ciudad:", persona.ciudad); 

// Modificar una propiedad del objeto 
persona.edad = 31;

// Agregar una nueva propiedad al objeto 
persona.profesion = "Desarrollador";

// Mostrar el objeto actualizado
console.log("Objeto Persona:", persona);

En este ejemplo, creamos un objeto llamado persona con propiedades como nombre, edad y ciudad. Luego, mostramos cómo acceder y modificar esas propiedades.


Además, agregamos una nueva propiedad llamada profesión al objeto. La salida en la consola mostrará el objeto actualizado.



¿Dónde Practicar Algoritmos?

Este TOP 5, publicado también en nuestras redes sociales (que por cierto, ¡síguenos! sacamos tips de desarrollo todas las semanas) recopila las mejores plataformas 2023 para practicar algoritmos 🏻‍✨, con opción gratuita, path de estudios y algunas en español ¡dale click! 👌🏻


[Pronto] Conoce también Ideas para tu Portafolio Dev 💼 Proyectos Open-Source que son un súper boost en tu hoja de vida como developer🧑🏻‍💻 Además, practicarás temas actuales de programación y desarrollo... 😎


 

¡Gracias por leer!

meltstudio.co
meltstudio.co

📍 Conéctate con nosotros en instagram👇


Join our newsletter to receive information about latest technologies trends and job offers

Thanks for subscribing!

bottom of page