El condicional if else de JavaScript
Capítulo 16: El condicional if else
¿Qué son los condicionales?
Estamos en un punto necesario para cualquier lenguaje de programación, los condicionales. Estos nos permiten crear programas capaces de tomar decisiones de todo tipo. Por ejemplo, si se pulsa el botón "x" haz esto, en cambio, si se pulsa el "y", haz esto otro.
El condicional if else
De los condicionales de JavaScript, if else
, será el que verás y utilizarás con más frecuencia.
Aquí tienes la sintaxis del condicional if else
:
// Pseudocódigo.
if (condición) { bloque de código si se cumple }
else { bloque de código si no se cumple }
Esto quiere decir que a partir de la condición que le especifiques, decidirá si se cumple o no. Si se cumple, ejecuta el bloque del if
, si no, el del else
, así de simple. Estas decisiones las toma mediante valores booleanos, por eso la importancia del capítulo anterior.
Palabra del lenguaje nº 31 encontrada.
if evalúa una expresión condicional. Si se cumple dicha condición se ejecuta, si no, da paso a otras estructuras o continúa la ejecución normal del flujo de ejecución.
Palabra del lenguaje nº 32 encontrada.
else está sujeto a la condición del if. Si se cumple dicha condición no se ejecuta dicho else. En cambio, si la condición del if es falsa, se ejecuta el código del else.
Antes de más teórica, veamos una pequeña práctica.
let numero1 = 75;
if (numero1 > 60){
alert("El número es mayor que 60.");
} else {
alert("El número es menor que 60.");
}
Es fundamental no equivocarse con el orden de los paréntesis, de las llaves y los puntos y coma, si no, puede no funcionar como toca o dar error directamente.
Se utiliza la palabra reservada if
. Entre paréntesis escribe la condición que quieras. Por ejemplo, dos valores con un operador de comparación. Abre la llave del if
, antes del cierre escribe todo el código que quieras. Separa cada línea de código con el punto y coma como has hecho hasta ahora en cualquier parte del código. Cierra la llave del if
.
El else
lo puedes escribir en la misma línea del cierre del if
o debajo. Se suele escribir en la misma para identificar a simple vista que este else
pertenece al if
. Escribe todas las líneas de código que quieras dentro del else
, igual que en el if
. Para finalizar, cierra el else
con una llave.
Si ejecuto esto, se puede ver que se ejecuta sólo el código del bloque if
, esto es porque numero1
es mayor que 60
.
En cambio, si numero1
es menor, se va a ejecutar el bloque de código dentro del else
.
let numero1 = 50;
if (numero1 > 60){
alert("El número es mayor que 60.");
} else {
alert("El número es menor que 60.");
}
¿Cómo toma JavaScript una decisión? Lo hace con lógica. Utiliza booleanos como he dicho. Cuando declaras el bloque del if
le dices a JavaScript, comprueba si el valor de numero1
es mayor que 60
. Si a esta pregunta el valor booleano le responde con un true
, quiere decir que se cumple su condición. JavaScript ahora sabe que numero1
es mayor que 60
y al llegar a esta conclusión, sabe que tiene que ejecutar todo el código que haya en su interior. El del else
, no le hace ni caso. Lo ignora por completo.
En cambio, si el valor booleano recibido es false
, sabe que no se cumple la condición del if
y por eso, ignora todo su código y ejecuta el del else
.
Y en las condiciones puedes utilizar todos los operadores de comparación que te he enseñado, a los que añadiremos alguno más a medida que el curso avance.
En resumen, un true
ejecuta el código del if
y un false
el de un else
, así de simple. Puedo demostrarlo con el siguiente ejemplo. He quitado la variable y lo único que hago es pasarle directamente un valor booleano a la condición. Si le doy valor de true
ejecuta el if
. Si le doy valor de false
ejecuta el del else
.
if (true){
alert("Verdadero");
} else {
alert("Falso");
}
if (false){
alert("Verdadero");
} else {
alert("Falso");
}
El condicional if sin else
El condicional if
se puede especificar sin la obligación de añadirle el bloque else
, esto si solo necesitas contemplar una posibilidad true. Lo puedes hacer así:
let numero1 = 50;
if (numero1 == 50){
alert("El número es igual a 50.");
}
Debes tener claro dos cosas importantes. La primera es que las salidas del código que estoy sacando en alert()
las puedes sacar donde quieras, por ejemplo, en la consola o en el documento html, todo funciona igual. La segunda cosa es que independientemente de que se ejecute algún bloque if
o else
, el código continuará ejecutándose debajo con normalidad.
let numero1 = 5463;
if (numero1 == 50){
alert("El número es igual a 50.");
}
alert("Me ejecuto si se cumple o no la condición del if porqué estoy fuera de su área de influencia.");
Ejercicios de JavaScript
- Pon un valor correcto para
numero1
para que se ejecute el bloque de códigoif
en el siguiente fragmento. Sustituye el interrogante por un valor. - Esta vez, haz lo mismo pero que se ejecute el código del
else
. - Haz que se ejecute el código del
if
realizando una multiplicación. Solo tienes que sustituir los dos interrogantes por valores. - Encuentra los fallos al siguiente código:
let numero1 = ?
if (numero1 >= 50){
alert("Ejercicio correcto.");
} else {
alert("Has fallado, sigue intentándolo.");
}
let numero1 = ?
if (numero1 == 50){
alert("Ejercicio correcto.");
} else {
alert("Has fallado, sigue intentándolo.");
}
let numero1 = ?
let numero2 = ?
let operacion = numero1 * numero2;
if (operacion <= 10){
alert("Ejercicio correcto.");
} else {
alert("Has fallado, sigue intentándolo.");
}
let numero1 = 17
if numero1 != 10 {
alert("Se ejecuta el if");
else {
alert("Has fallado, sigue intentándolo.");
}
La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.