El condicional if else - Curso de JavaScript de cero a máster - Capítulo 16


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, este será el que verás y utilizarás con más frecuencia.
Aquí tienes la sintaxis del condicional if else:

Código JavaScript

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 evalua una expresión condicional. Si se cumple dicha condición se ejecuta, si no, da paso a otras estucturas 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.

Código JavaScript

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 pertene 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.

Resultado en el navegador

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.

El condicional if de JavaScript

En cambio, si numero1 es menor, se va a ejecutar el bloque de código dentro del else.

Código JavaScript

let numero1 = 50;

if (numero1 > 60){
    alert("El número es mayor que 60.");
} else {
    alert("El número es menor que 60.");
}

Resultado en el navegador

El condicional if else de JavaScript

¿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.

Código JavaScript

if (true){
    alert("Verdadero");
} else {
    alert("Falso");
}

Resultado en el navegador

El condicional if else de JavaScript valor true

Código JavaScript

if (false){
alert("Verdadero");
} else {
alert("Falso");
}

Resultado en el navegador

El condicional if else de JavaScript valor false

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í:

Código JavaScript

let numero1 = 50;

if (numero1 == 50){
    alert("El número es igual a 50.");
}

Resultado en el navegador

El condicional if de JavaScript

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.");

Resultado en el navegador

El flujo de ejecución del condicional if de JavaScript

Ejercicios de JavaScript

  1. Pon un valor correcto para numero1 para que se ejecute el bloque de código if en el siguiente fragmento:

  2. let numero1 = ?
    
    if (numero1 >= 50){
        alert("Ejercicio correcto.");
    } else {
        alert("Has fallado, sigue intentándolo.");
    }

  3. Esta vez, haz lo mismo pero que se ejecute el código del else.

  4. let numero1 = ?
    
    if (numero1 == 50){
        alert("Ejercicio correcto.");
    } else {
        alert("Has fallado, sigue intentándolo.");
    }

  5. Obtén la solución correcta (if) realizando una multiplicación.

  6. let numero1 = ?
    let numero2 = ?
    
    let operacion = numero1 * numero2;
    
    if (operacion <= 10){
    	alert("Ejercicio correcto.");
    } else {
    	alert("Has fallado, sigue intentándolo.");
    }

  7. Encuentra los fallos al siguiente código:

  8. 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í: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


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.