itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-1341 page-child parent-pageid-1315 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

002. Condicionales Javascript

En este capítulo todos los operadores relacionales y lógicos que vimos en el capítulo anterior van a tomar mayor relevancia.

Estructuras de control

Las estructuras de control son aquellos mecanismos que permite controlar el flujo de nuestra programación, de hecho todas las lineas de código que hemos escrito hasta ahora han sido estructuras secuenciales, porque se va ejecutando una linea después de la otra y así sucesivamente. Pero llegará un momento en el que vamos a tener que tomar ciertas acciones o no, dependiendo del resultado de evaluar una condición.

Dentro de las estructuras de control tenemos:

  • Estructuras secuenciales
  • Estructuras condicionales: dependiendo de la evaluación de una condición hacemos o no ciertas acciones.
  • Loops o estructuras repetitivas.

En este capítulo vamos a ver las estructuras condicionales, las más usadas.

if… else

Es una estructura de programación que nos permite tomar una decisión, y si la condición se cumple, ejecutar ciertas acciones.

Ejm

        let edad = 17;
        if(edad > 17) {
            console.log("Eres mayor de edad");
        } else {
            console.log("Eres menor de edad");
        }

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

if … else if … else

Podemos anidar varios if, veamos un ejm.

Ejm

        // Madrugada: 0 - 5 hrs
        // Buenos días: 6 - 11 hrs
        // Buenas tardes: 12 - 18 hrs
        // Buenas noches: 19 - 23 hrs

        let hora = 12;

        if (hora >= 0 && hora <= 5) {
            console.log("Es de madrugada");
        } else if (hora >= 6 && hora <= 11) {
            console.log("Buenos días");
        } else if (hora >= 12 && hora <= 18) {
            console.log("Buenas tardes");
        } else {
            console.log("Buenas noches");
        }

Operador ternario

Como su nombre dice, el operador ternario dispone de 3 partes:

  • Una condición que va entre paréntesis.
  • Un signo de interrogación en caso de que la condición sea verdadera.
  • Un signo de dos puntos (:) en el caso de que la condición sea falsa.

Su sintaxis sería la siguiente:

(condición) ? verdadero : falso

Digamos que es la simplificación de if… else en una sóla linea de código. Si necesitamos varias instrucciones de código en base a si la condición es verdadera o falsa hay que utilizar if… else.

Ejm

        // Operador ternario
        let edad = 18; 
        let eresMayor = (edad >= 18)
            ? "Eres mayor de edad" // Parte verdadera
            : "Eres menor de edad"; // Parte falsa

        console.log(eresMayor);

En la mayoría de los lenguajes de programación (PHP, Python…) existe este operador. Va a ser importante ya que en muchas librerías reactivas (Angular, Vue…) es muy frecuente encontrarse este tipo de operadores.

Estructura switch… case

La última estructura que vamos a ver es la estructura switch… case, que nos sirve cuando tengamos una situación en donde tengamos diferentes valores para una misma variable. Esta estructura se caracteriza por tener casos

Ejm

        let dia = 2;
        switch (dia) {
            case 0:
                console.log("Es domingo")
                break;
            case 1:
                console.log("Es lunes");
                break;
            case 2:
                console.log("Es martes");
                break;
            case 3:
                console.log("Es miércoles");
                break;
            case 4:
                console.log("Es jueves");
                break;
            case 5:
                console.log("Es viernes");
                break;
            case 6:
                console.log("Es sábado");
                break;
            default:
                console.log("El día no existe");
                break;
        }
    </script>
Scroll al inicio