JavaScript: If, switch

Desde esta entrada comenzaremos a ver las estructuras de control con las q disponemos en JS para realizar nuestras aplicaciones, en este caso veremos las estructuras condicionales o de selección, IF y SWITCH

Estructura IF

Esta estructura condicional nos permite elegir q acción realizar dependiendo del valor de verdad de la condición evaluada, es decir, si se cumple la condición se realizará una acción en particular, si no se cumple la condición se realizará otra acción en su lugar. Veamos un ejemplo para aclarar las cosas

Código:

if (condicion){
                      accion_1;
}else{
                     accion_2;
}

Explicación:

Lo q observamos es la forma básica de la estructura IF, esta esta formada por el nombre de la estructura "if" seguida de la condición q se evalúa "condicion" se abren llaves, y entre las primeras llaves se encuentra la accion q se realizará de cumplirse la condición, luego de la llave va la palabra "else" q podriamos decir q significa "si no" y nuevamente entre llaves colocaremos la acción dos, q es la q se cumplirá si la condición falla.
En palabras simples podríamos decir q:

SI (se cumple la condicion){
                          realiza esta accion;
}SINO{
                         realiza esta otra accion;
}

La condición a evaluar pueden ser varias cosas, lo más común es evaluar el contenido de una variable, por ejemplo decir q "variable = = 2" esto puede cumplirse o no, y de esto dependerá q acción se realiza. Pero no solo se puede evaluar el contenido de na variable, podremos evaluar el resultado o retorno de una función, el estado de un elemento de nuestro sitio u otras cosas más...

Observación:
Debemos aclarar q el bloque "else" no es obligatorio, asi un if q no posea esto será válido.
También se pueden colocar varias estructuras  una dentro de otra, esto se llamaría en este caso "if anidados"

if ( condicion ){
                        accion_1;
}

Estructura sin bloque "else" es totalmente válida

if ( condicion_1 ){
            if ( condicion_2 ){
                        accion_1;
            }
}else{
             if ( condicion_3){
                        accion_2;
             }else{
                        accion_3;
             }
}

"if anidados" como vemos el segundo bloque "if" hace de accion y este tendrá otra condición para evaluar, las estructuras pueden hacerse tan complejas como se quiera

Observación:
Es importante hacer notar lo valioso q es la tabulación para distinguir los distintos niveles dentro de una estructura, sobre todo en estructuras anidadas, donde puede dificultarse la lectura y comprensión del código y no les cuento buscar un error, vean la diferencia


IDENTADO

if ( condicion_1 ){
            if ( condicion_2 ){
                        accion_1;
            }
}else{
             if ( condicion_3){
                        accion_2;
             }else{
                        accion_3;
             }
}

NO IDENTADO

if ( condicion_1 ){
if ( condicion_2 ){
accion_1;}
}else{
if ( condicion_3){
accion_2;}else{
accion_3;
}
}
Se puede ver claramente q es mucho más difícil interpretar un código no identado

Estructura SWITCH

Esta estructura de selección permite decidir q acción realizar entre varias de ellas de acuerdo a la condición a evaluar, se diferencia básicamente de la anterior, en q pueden ser más de dos acciones involucradas en una sola estructura, y q la condición no se evalúa por su valor de verdad o sea si es verdadera o falsa si no por el estado de esta, o sea dependiendo de los valores q la condición puede tomar. Como siempre un ejemplo vale más q mil palabras ajaj

switch ( condicion ){
                                 case valor_1:
                                                       accion_1;
                                                       break;

                                 case valor_2:
                                                      accion_2;
                                                      break;

                                 default:
                                                      accion_default;
                                                      break;
}

Bien como en el caso anterior primero colocamos el nombre de la estructura, y luego la condición, pero OJO en este caso no se coloca una proposición a evaluar si no solo el elemento a evaluar, o sea para ser más claro, no colocamos como en el if "variable == valor" por dar un ejemplo, si no solo colocaremos la variable a evaluar "variable".
Entre llaves se encuentra el bloque de acciones, q acción realizar, esto se decidirá dependiendo del valor q tome la variable de la condición, en el caso de q la variable tenga el valor_1 se realizará la acción_1, en el caso de q tenga el valor_2, realizará la accion_2 y en el caso de q sea cualquier otro valor realizará accion_default

Observaciones:
Se pueden colocar tantos casos como se quieran, cada "case" va acompañado de un valor q puede tomar nuestra variable.
A diferencia de la estructura q vimos anteriormente, esta para entrar a la acción a realizar usa ":" y recién decimos q hacer.
Toda sentencia debe finalizar con ";"
La palabra "break" sirve para indicar q hasta ese lugar llega ese caso en particular, si no colocaramos "break" se continuaría ejecutando las acciones q se encuentran en los casos posteriores. Esto aunq puede parecer una molestia, puede llegar a ser muy útil si queremos realizar la misma acción con varios valores distintos de nuestra variable.
En "default" ingresarán todos los casos q no concuerden con ninguno de los anteriores.

Estos son las estructuras de selección o de condición (aunque me gusta más la primer definición) q tenemos disponibles en JavaScript, como les dije anteriormente no se preocupen si todavía no ven código o algún ejemplo concreto, vamos a tener tiempo suficiente para realizar varios ejemplos, por ahora es importante q vayan asimilando la teoría para evitar errores de sintaxis en el futuro y sobre todo para q comprendan como funcionan estas estructuras, eso es lo más importante ya q son las herramientas con las q contamos para resolver los distintos problemas q se nos presenten...
Nos vemos en la próxima entrega, será el turno de las estructuras iterativas....