Javascript / IF

Bienvenidos sean a este post, hoy hablaremos sobre el condicional if el cuales nos permitira darle la posibilidad a nuestros programas de tomar decisiones en base a la informacion que tengamos en el mismo.

En el post anterior hemos visto un condicional muy basico como fue el operador condicional donde por medio de una expresion con operadores de comparacion determinabamos si el valor informado era verdadero o falso y en base a esa decision tomaba una accion u otra, en el caso de hoy veremos unas instrucciones que trabajan de la misma forma pero nos permitiran tener bloques mas complejos de instrucciones y por ende permitiendo tener mejores opciones de decision para nuestro programa, comencemos con el primero y mas basico.

IF

El condicional if es uno de los mas utilizados por todo lenguaje ya que nos permite evaluar si una expresion informada es verdadera o falsa, en el caso de if (como en todos los condicionales) si es verdadero ejecutara el bloque de instrucciones asociados a el, veamos su sintaxis:

if (expresion)
{
.... instrucciones ....
}

Otra sintaxis permitida es:
if (expresion)
      ... instruccion ...

La segunda sintaxis es mas utilizada cuando necesitas habilitar una sola instruccion, p.e. asignar un valor a una variable o mostrar una mensaje, pero cuando es mas de una instruccion se recomienda usar un bloque delimitado por las llaves ({}), veamos unos ejemplos practicos:

Sin llaves:
if (x == 20)
       texto="X vale 20";

Con llaves:
if (x < 20)
{
     texto="X es menor a 20";
     x += 10;
}

En el primer caso lo aplicamos porque solamente necesitamos asignar un mensaje a texto si x vale 20, tanto el lenguaje como nosotros sabremos interpretarlo, nuestro siguiente ejemplo chequea si x es menor a 20 y en caso de ser verdadero, asignara un mensaje a texto y luego incrementara a x en 10, como en el caso anterior al tener mas de una instruccion relacionada a la condicion es recomendable la utilizacion del bloque tanto para que el programa lo interprete correctamente como nosotros de forma visual, como una buena practica recomiendo usar siempre los bloques (por mas que sea una simple instruccion) porque al momento de depurarlo nos va a resultar mas practico, pasemos a nuestro siguiente condicional.

if … else

Si bien con if podemos hacer varias condiciones para evaluar todas nuestras posibilidades siempre habra una condicion que se escapara a nuestras posibilidades y para ello existe else, el cual en general se traduce como «de lo contrario», porque cuando hablamos de bloques if … else, debemos decir:

Si la condicion se cumple ejecute esto de lo contrario ejecute esto otro

Veamos su sintaxis:

if (expresion)
{
.... instrucciones ....
} else {
.... instrucciones ....
}

Como pueden ver es bastante simple pero muy efectiva, veamos un simple ejemplo en base al anterior:

if (x < 20)
{
      texto="x es menor a 20";
      x += 10;
} else {
      texto="x es mayor a 20";
      x -= 10;
}

Por ejemplo en el caso de if solo si x hubiese sido menor a 20 todo hubiera funcionado correctamente pero y si hubiera sido mayor a 20? no hubiera hecho nada, gracias a else podemos tomar otra decision, con otro mensaje y restando 10 a x, en este caso nuestro programa siempre hara algo mas alla de que se cumpla la condicion principal o no, otra ventaja de if es que podemos utilizarlos anidados, es decir utilizar un condicional dentro de otro condicional:

if (x<20)
{
     x += 10;
     if (x>10 && x<29)
     {
           document.write("X vale " + x);
     } else {
           document.write("X es menor a 10");
     }
} else {
     document.write("X es mayor a 20");
} 

Como pueden ver en este programa, si x es menor a 20 le incrementara en 10 despues verificaremos si x tiene un valor entre 10 y 29, si es verdadero mostrara en pantalla el valor de x de lo contrario dira que x es menor a 10, esto puede suceder si x tiene un valor menor a 0, p.e. -1, y si en este bloque else no nos mostraria nada, el bloque else restante nos informa que x es mayor que 20, esta anidacion podriamos hacerlo infinitas veces pero no es una practica recomendable porque no solamente puede generar un error sino quedara bastante ilegible a la hora de depurarlo pero descubriran con la practica que a veces necesitaran anidar estos condicionales, veamos otra opcion de condicional.

else if

Este condicional es ideal para tener otras posibilidades a la hora de evaluar un valor de una variable, porque si bien trabaja como un bloque else tendra una condicion a evaluar dando la posibilidad de poder encadenar varias condiciones para hacer mas evaluaciones, su sintaxis es:

if (expresion)
{
.... instrucciones ....
} else if (expresion1) {
.... instrucciones ....
} else if (expresion2) {
.... instrucciones ....
} else if (expresionN) {
.... instrucciones ....
} else {
.... instrucciones ....
}

Como pueden ver podemos hacerlo la cantidad de veces necesarias pero al igual que ocurre con los if anidados si se utiliza mucho puede generar algun error o simplemente quedar incomprensibles a la hora de depurar nuestro codigo, un ejemplo podria ser asi:

if (x == 0)
{
     document.write("X es igual a cero");
} else if (x>0 && x<10) {
     document.write("X esta entre uno y nueve");
} else if (x<=10 && x<=20) {
     document.write("X esta entre 10 y 20");
} else {
     document.write("X es mayor a 20");
}

Como pueden ver si se cumple la primera condicion nos devolvera el primer mensaje y omitira el resto, en caso de no cumplir con la primera condicion pasara a la segunda donde verificara si x esta entre 1 y 9 en caso de ser verdadero mostrara otro mensaje, en caso de ser falso pasara al siguiente condicional donde chequeara que x este entre 10 y 20 donde si es verdadero mostrara otro mensaje, en caso de ser falso pasara al bloque else donde mostrara un mensaje final, con todo esto ya hemos cubierto como trabaja los bloques if, else y else if para permitir una mejor interaccion en nuestro programa, veamos un ejemplo:

if.html

<html>
<script language="javascript">
<!--
document.title = "Ejemplo de IF";

var x = prompt("Ingresa un valor para X",20);

if (x == 0)
{
     document.write("X es igual a cero");
} else if (x>0 && x<10) {
     document.write("X esta entre uno y nueve");
} else if (x>=10 && x<=20) {
     document.write("X esta entre 10 y 20");
} else {
     document.write("X es mayor a 20");
}

//-->
</script>
</html>

En este programa pediremos un valor de x donde despues chequearemos los valores de la misma, tal como lo describimos anteriormente porque es exactamente el mismo ejemplo salvo que ahora solicitamos el ingreso de un valor para x, si lo probamos obtendremos estos resultados

Como pueden ver dependiendo del valor que ingresemos nos devolvera una respuesta diferente.

En resumen, hoy hemos visto una de las bases para poder proveer de cierta «inteligencia» a nuestros programas, hemos visto el bloque if, como el bloque else mejora nuestra experiencia y como el bloque else if nos permite tomar otras decisiones antes de salir con else, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.