Como se chega dun estamento condicional a un operador ternario?

Escrito por

Como se chega dun estamento condicional a un operador ternario?

Chegar dun estamento condicional (usando if-else) a un operador ternario consiste en simplificar a lóxica para que sexa máis compacta, pero mantendo a súa funcionalidade. A operación ternaria é unha expresión que resolve nun único paso a decisión baseada nunha condición.

Aquí tes un exemplo para explicar como se fai a conversión:

1. Estamento condicional tradicional (if-else)

let message;
if (isUserLoggedIn) {
  message = "Benvido Usuario!";
} else {
  message = "Por favor, Inicia Sesión";
}

Neste caso:

  • Compróbase a condición isUserLoggedIn.
  • Dependendo do valor (true ou false), asínase unha cadea á variable message.

2. Conversión a unha expresión ternaria

A estrutura xeral dunha expresión ternaria é:

condition ? valueIfTrue : valueIfFalse;

Transformamos o exemplo anterior:

const message = isUserLoggedIn ? "Benvido Usuario!" : "Por favor, Inicia Sesión";

Diferenzas clave

Estamento condicional Función ternaria
Multilínea e máis verbo. Máis curto e compacto.
Pode executar múltiples operacións no if ou no else. Deseñado para retornar un valor único.
Máis lexible para lóxicas complexas. Ideal para decisións sinxelas.

Cando usar unha ou outra?

  • Usar if-else:
    Cando necesitas realizar operacións máis complexas, como manipular múltiples variables ou executar accións adicionais dentro dos bloques if ou else.

  • Usar unha función ternaria:
    Cando só precisas decidir entre dúas opcións e queres asignar ou devolver un valor baseado nunha condición simple.

Exemplo en JSX

No contexto de React, unha función ternaria adoita usarse no renderizado condicional. Aquí tes un exemplo:
Con if-else:

if (isUserLoggedIn) {
  return <h1>Benvido Usuario!</h1>;
} else {
  return <h1>Por favor, Inicia Sesión</h1>;
}

Con función ternaria:

<h1>{isUserLoggedIn ? "Benvido Usuario!" : "Por favor, Inicia Sesión"}</h1>

Ambos funcionan igual, pero a versión ternaria é máis limpa e compacta no código JSX.

Etiquetas: , , ,