Condicionales en la programación o codificación con Javascript

Dominar el uso de las condiciones es una de las 5 habilidades fundamentales de construir algoritmos:

1. Variables.
2. Condicionales.
3. Arrays(Arreglos).
4. Loops(Bucles).
5. Funciones.

Las condiciones son la única forma en que los desarrolladores tienen que decirle a la computadora cómo tomar decisiones en tiempo real, muy similar a cómo funcionan los cerebros.

Digamos que estamos construyendo un programa para ayudarnos a elegir qué vestir y odiamos el color azul, podemos decirle a la computadora que evite el azul usando una condición como esta:

If color is not blue, then... do something.
Else... do nothing or exit.

Y así es como escribiríamos esto en Javascript:

1if(color != 'blue'){
2    //Cualquier código aquí se ejecutará cuando el color sea diferente al azul.
3}
4else{
5    //solo ejecutará este código si el color es azul.
6}

Todo se trata sobre: ¿Qué preguntas hacer?

El ejemplo anterior era una condición simple, pero en la vida real elegir qué guardar implica una combinación de varias condiciones para tomar la decisión final, por ejemplo: veamos este algoritmo que indica si tienes gripe.

Si desea representar este algoritmo en Javascript, se verá más o menos así:

1let sientoQueMeAtropelloUnTren = true;
2let meAtropelloUnTren = false;
3
4if(sientoQueMeAtropelloUnTren  == true){
5  if(meAtropelloUnTren == true){
6    console.log("Tú no tienes gripe");
7  }
8  else{
9    console.log("Tú tienes gripe");
10  }
11}
12else{
13  console.log("Tú no tienes gripe");
14}

Básicamente, este algoritmo tiene dos variables a considerar: sientoQueMeAtropelloUnTren y meAtropelloUnTren.

Nuestro trabajo como desarrolladores es intentar preparar una estrategia y crear un algoritmo que resuelva un problema.

Operadores AND y OR

Otra forma de escribir el algoritmo es combinar preguntas en la misma condición utilizando los operadores AND y OR que en Javascript se representan con && para AND y || para OR:

1if(sientoQueMeAtropelloUnTren == falso || meAtropelloUnTren == verdadero){
2  console.log("Tú no tienes gripe");
3}
4else if(sientoQueMeAtropelloUnTren == true && meAtropelloUnTren == falso){
5  console.log("Tú tienes gripe")
6}
7else{
8  console.log("No tengo idea");
9}

Como puedes ver aquí, estamos usando else if juntos por primera vez, para una codificación más rápida. Otro truco que puedes usar para una codificación más rápida:

Original	Equivalente
en lugar de if(sientoQueMeAtropelloUnTren == verdadero)	escribes if(sientoQueMeAtropelloUnTren)
en lugar de if(sientoQueMeAtropelloUnTren == falso)	escribes if(!sientoQueMeAtropelloUnTren)

Operadores mayores que o menores que > y <

En el caso particular de que esté comparando números, también puede hacerlo si uno de los números comparados es mayor o menor que el otro:

1if(age < 16){
2  console.log("You cannot drive");
3}
4else if(age >= 16){
5  console.log("You can drive");
6}

Operador Ternario (condiciones en línea)

Otro gran truco para una codificación más rápida es usar ternarios que básicamente nos permiten codificar todo en una sola línea:

1const flu = (sientoQueMeAtropelloUnTren && !meAtropelloUnTren) ? true : false;

En este ejemplo, la variable flu solo será verdadera si sientoQueMeAtropelloUnTren == verdadero y sientoQueMeAtropelloUnTren == falso al mismo tiempo. Si esa pregunta no es cierta, entonces flu será falso.

Los ternarios se usan MUCHO en estos días porque te ahorran mucho tiempo, y también podremos usarlos más adelante en código jsx (React).

Renderizando Condicionales

Otro gran uso de las condiciones es generar HTML basado en ciertas condiciones. Por ejemplo, digamos que tenemos un bootstrap Alert que estamos a punto de presentar en el sitio web:

1let alertHTMLCode = "<div>Cuidado! Tú no puedes manejar</div>";

Si queremos que esta alerta se muestre solo si el usuario es menor de 16 años, podríamos hacer algo como:

1let age = 14;
2let alertHTMLCode = (age < 16) ? "<div>Cuidado! Tú no puedes manejar</div>" : "";

Ahora nuestra variable alertHTMLCode estará vacía si la edad del usuario es mayor de 16 años, si es menor, contendrá todo el HTML.