Saltar al contenido principal

Estructuras de control: Condicionales IF

Hasta ahora hemos aprendido a almacenar información en variables, trabajar con distintos tipos de datos y realizar operaciones mediante operadores.

Sin embargo, todos los programas que hemos visto hasta ahora tienen algo en común: siempre ejecutan las instrucciones en el mismo orden.

console.log("Paso 1");
console.log("Paso 2");
console.log("Paso 3");

En este caso siempre se mostrarán los tres mensajes.

Pero la mayoría de los programas necesitan tomar decisiones.

Por ejemplo:

  • Si el usuario introduce una contraseña correcta, podrá acceder a la aplicación.
  • Si un alumno obtiene una nota igual o superior a 5, aprobará la asignatura.
  • Si una tienda supera un importe determinado, ofrecerá envío gratuito.
  • Si la batería del móvil está por debajo del 20 %, aparecerá un aviso.

Todas estas situaciones tienen algo en común:

Si ocurre una condición, entonces se realiza una acción.

Las estructuras de control nos permiten modificar el flujo normal de ejecución del programa para adaptarlo a distintas situaciones.

En este tema aprenderemos a utilizar las principales estructuras condicionales de JavaScript.

Contenido

  • ¿Qué son las estructuras de control?
  • Condiciones
  • La estructura if
  • La estructura else
  • La estructura else if
  • Errores frecuentes
  • Buenas prácticas

¿Qué es una condición?

Una condición es una expresión cuyo resultado solo puede ser uno de estos dos valores:

  • true
  • false

Por ejemplo:

5 > 3

Resultado:

true

O bien:

10 < 4

Resultado:

false

Las condiciones suelen construirse utilizando operadores de comparación.

edad >= 18

nota >= 5

precio < 50

usuario === "admin"

Cada una de estas expresiones devuelve un valor booleano (true o false).

Ese resultado será el que determine qué camino seguirá el programa.

Un ejemplo de la vida real​

Imagina que quieres entrar en un cine.

La decisión podría representarse así:

¿Tienes entrada?

      │
   ┌──┴──┐
  Sí     No
  │       │
Entrar  No entrar

Un programa funciona exactamente igual.

Primero comprueba una condición y, dependiendo del resultado, ejecuta unas instrucciones u otras.

La estructura if

La estructura if es la forma más sencilla de tomar decisiones en JavaScript.

Su funcionamiento puede resumirse así:

Si una condición es verdadera, ejecuta un bloque de código.

Si la condición es falsa, simplemente continúa con el resto del programa.

Sintaxis​

if (condición) {

    // Código que se ejecuta
    // SOLO SI LA CONDICIÓN ES VERDADERA

}

Observa que:

  • La condición siempre va entre paréntesis.
  • El código que depende del if va entre llaves. Este código solo se ejecutará si se cumple la condición del if.

Diagrama de funcionamiento​

          if
           │
   ¿Condición?
      │
  ┌───┴────┐
 Sí         No
 │           │
Ejecuta   Continúa
el código el programa e ignora el código de dentro

Primer ejemplo

Queremos comprobar si una persona es mayor de edad.

let edad = 20;

if (edad >= 18) {
    console.log("Eres mayor de edad.");
}

Resultado:

Eres mayor de edad.

Como la condición es verdadera (20 >= 18), JavaScript ejecuta el bloque del if.

Si cambiamos la edad:

let edad = 15;

if (edad >= 18) {
    console.log("Eres mayor de edad.");
}

No aparecerá ningún mensaje.

¿Por qué?

Porque la condición vale false.

Ejemplo 2

Comprobar si una nota está aprobada.

let nota = 8;

if (nota >= 5) {
    console.log("Has aprobado.");
}

Resultado:

Has aprobado.

Ejemplo 3

Mostrar un aviso cuando quede poca batería.

let bateria = 18;

if (bateria < 20) {
    console.log("Batería baja.");
}

Resultado:

Batería baja.

Ejemplo 4

Comprobar una contraseña.

let password = "javascript";

if (password === "javascript") {
    console.log("Acceso permitido.");
}

¿Qué ocurre si la condición es falsa?

Simplemente no sucede nada.

let edad = 15;

if (edad >= 18) {
    console.log("Puedes conducir.");
}

Sin embargo hay que tener en cuenta que el resto de instrucciones más abajo que estén fuera del if se seguirán ejecutando igualmente.

let edad = 15;

if (edad >= 18) {
    console.log("Puedes conducir.");
}

console.log("Fin del programa.");

Resultado:

Fin del programa.

El programa continúa normalmente.

let edad = 20;

if (edad >= 18) {
    console.log("Puedes conducir.");
}

console.log("Fin del programa.");

Resultado:

Puedes conducir.
Fin del programa.

La estructura else

En muchas ocasiones queremos ejecutar una acción cuando la condición es verdadera y otra distinta cuando es falsa.

Para ello utilizamos else.

Sintaxis​

if (condición) {

    // Si la condición es verdadera
    // código A

} else {

    // Si la condición es falsa
    // código B

}

Diagrama​

         if
          │
   ¿Condición?
    ┌────┴────┐
   Sí         No
   │           │
Código A   Código B

Ejemplo 1

let edad = 16;

if (edad >= 18) {

    console.log("Eres mayor de edad.");

} else {

    console.log("Eres menor de edad.");

}

Resultado:

Eres menor de edad.

Ejemplo 2

let nota = 4;

if (nota >= 5) {

    console.log("Aprobado");

} else {

    console.log("Suspenso");

}

Resultado:

Suspenso

Ejemplo 3

let stock = 0;

if (stock > 0) {

    console.log("Producto disponible.");

} else {

    console.log("Producto agotado.");

}

Resultado:

Producto agotado.

Ejemplo 4

let llueve = false;

if (llueve) {

    console.log("Lleva paraguas.");

} else {

    console.log("No hace falta paraguas.");

}

Observa que no siempre es necesario escribir una comparación.

Como llueve ya contiene un valor booleano, podemos utilizar directamente la variable.

La estructura else if

Hasta ahora solo teníamos dos posibles caminos.

Pero muchas veces necesitamos tomar más de dos decisiones.

Por ejemplo:

  • Sobresaliente
  • Notable
  • Aprobado
  • Suspenso

Para ello utilizamos else if.

Sintaxis​

if (condición1) {
    // Codigo A
}
else if (condición2) {
    // Codigo B
}
else if (condición3) {
    // Codigo C
}
else {
    // Codigo D: se eejecuta si no se ha cumplido ninfuna de las condiciones anteriores. Es como "en cualquier otro caso..."
}

JavaScript evaluará las condiciones de arriba hacia abajo.

En cuanto encuentre una condición verdadera, dejará de comprobar las siguientes. Esto es muy importante, tener en cuenta que en el momento se cumpla una condición, ni siquiera se parará a mirar las siguientes, simpelemente las ignorará.

Por ejemplo:

let numero = 10;
if (numero > 5){
    console.log("Número mayor que 5");
}else if (numero % 2 === 0){
    console.log("Número par");
}else if(numero < 20){
    console.log("Número menor que 20");
}

Resultado:

Número mayor que 5

Como ves, el único mensaje que muestra es "Número mayor que 5", a pesar de que como puedes observar el resto de condiciones también son ciertas para el número 10. Esto ocurre por, como hemos dicho, que una vez se cumpla una condición, dejará de comprobar las siguientes.

Por tanto, en caso de que queramos comprobar condiciones independiente entre sí, en lugar de utilizar la estructura if else if else, simpelemente usaremos varios if independientes:

let numero = 10;
if (numero > 5){
    console.log("Número mayor que 5");
}i
if (numero % 2 === 0){
    console.log("Número par");
}
if(numero < 20){
    console.log("Número menor que 20");
}

Resultado:

Número mayor que 5
Número par
Número menor que 20

Al hacer uso solamente del if, las condiciones no están conectadas entre ellas y por tanto se evalúan todas de manera independiente.

Diagrama del else if​

¿Condición 1?
      │
 ┌────┴────┐
Sí         No
│           │
Fin    ¿Condición 2?
            │
       ┌────┴────┐
      Sí         No
      │           │
     Fin      ¿Condición 3?
                    |
                    ...

Puede haber tantos else if como posibilidades tenga nuestro programa.

Ejemplo 1

Clasificar una nota.

let nota = 8;

if (nota >= 9) {

    console.log("Sobresaliente");

}
else if (nota >= 7) {

    console.log("Notable");

}
else if (nota >= 5) {

    console.log("Aprobado");

}
else {

    console.log("Suspenso");

}

Resultado:

Notable

Ejemplo 2

Temperatura.

let temperatura = 32;

if (temperatura < 10) {

    console.log("Hace frío.");

}
else if (temperatura < 25) {

    console.log("Temperatura agradable.");

}
else {

    console.log("Hace calor.");

}

Ejemplo 3

Descuento en una tienda.

let compra = 120;

if (compra >= 200) {

    console.log("20% de descuento");

}
else if (compra >= 100) {

    console.log("10% de descuento");

}
else {

    console.log("Sin descuento");

}

Errores frecuentes

Confundir = con ===​

❌ Incorrecto

if (edad = 18)

Aquí no estamos comparando, sino asignando un valor.

✅ Correcto

if (edad === 18)

Escribir mal los bloques​

❌ Incorrecto

if (edad >= 18)
    console.log("Mayor");
    console.log("Puede conducir");

✅ Correcto

if (edad >= 18) {

    console.log("Mayor");
    console.log("Puede conducir");

}

Colocar un punto y coma después del if​

❌ Incorrecto

if (edad >= 18);
{
    console.log("Mayor");
}

Uso de operadores lógicos

En las condiciones del if también podemos hacer uso de los operadores && (and) y || (or). Funcionan tal cual hemos visto en el apartado de Operadores.

Por ejemplo:

let edad = 17;
let carnet = false;
if (edad >= 18 && carnet){
    console.log("Puedes conducir");
}

Buenas prácticas

✅ Escribe condiciones sencillas.

✅ Utiliza siempre llaves {} aunque solo exista una instrucción.

✅ Utiliza === en lugar de ==.

✅ Ordena las condiciones de la más específica a la más general cuando uses else if..

Resumen

En este apartado hemos aprendido a utilizar las principales estructuras condicionales de JavaScript.

  • if ejecuta un bloque cuando una condición es verdadera.
  • else permite ejecutar un bloque alternativo.
  • else if permite evaluar varias condiciones consecutivas.

Ejercicios if else if else

Ejercicio 1​

Crea un programa que dado un peso y una altura, calcule su índice IMC e indique su estado.

  • Peso inferior al normal Menos de 18.5
  • Normal 18.5 – 24.9
  • Peso superior al normal 25.0 – 29.9
  • Obesidad Más de 30.0

Ejercicio 2​

Crea un programa que dado un número del 1 al 7 indique el día de la semana correspondiente (1 = Lunes, 2 = Martes,...). Ten en cuenta la posibilidad de que el número introducido no esté en el rango correcto (por ejemplo no existe el día de la semana número 23).