{"id":190,"date":"2023-05-14T18:09:49","date_gmt":"2023-05-14T21:09:49","guid":{"rendered":"https:\/\/danielsegovia.com\/plataforma\/?p=190"},"modified":"2023-06-30T16:36:04","modified_gmt":"2023-06-30T19:36:04","slug":"07-estructuras-de-control-de-flujo","status":"publish","type":"post","link":"https:\/\/danielsegovia.com\/plataforma\/07-estructuras-de-control-de-flujo\/","title":{"rendered":"07 – Estructuras de control de flujo"},"content":{"rendered":"\n

Cuando escribimos programas en JavaScript, a menudo necesitamos tomar decisiones y realizar diferentes acciones seg\u00fan las condiciones que se presenten en el programa. Para esto, utilizamos las estructuras de control de flujo, que nos permiten evaluar condiciones y ejecutar diferentes bloques de c\u00f3digo en funci\u00f3n de esas condiciones. En este post, veremos las estructuras de control de flujo \u00abif\/else\u00bb<\/strong> y \u00abswitch\u00bb<\/strong> en JavaScript.<\/p>\n\n\n\n

Estructura de control de flujo \u00abif\/else\u00bb<\/h2>\n\n\n\n

El \u00abif\/else\u00bb es la estructura de control de flujo m\u00e1s b\u00e1sica en JavaScript y se utiliza para evaluar una condici\u00f3n y ejecutar un bloque de c\u00f3digo si esa condici\u00f3n es verdadera. La sintaxis b\u00e1sica del \u00abif\/else\u00bb es la siguiente:<\/p>\n\n\n\n

if (condici\u00f3n) {\n  \/\/ c\u00f3digo que se ejecuta si la condici\u00f3n es verdadera\n} else {\n  \/\/ c\u00f3digo que se ejecuta si la condici\u00f3n es falsa\n}<\/code><\/pre>\n\n\n\n
Por ejemplo, supongamos que queremos escribir un programa que imprima \u00abBuenos d\u00edas!\u00bb si la variable horaDelDia es menor a 12 y \u00abBuenas tardes!\u00bb si es mayor o igual a 12. Podemos hacerlo utilizando un \u00abif\u00bb de la siguiente manera:<\/p>\n\n\n\n
let horaDelDia = 10;\n\nif (horaDelDia < 12) {\n  console.log(\"Buenos d\u00edas!\");\n} else {\n  console.log(\"Buenas tardes!\");\n}<\/code><\/pre>\n\n\n\n
En este caso, la condici\u00f3n dentro del \u00abif\u00bb es horaDelDia < 12<\/code>, que eval\u00faa si la variable horaDelDia<\/code> es menor a 12. Si la condici\u00f3n es verdadera, se imprime \u00abBuenos d\u00edas!\u00bb en la consola. Si la condici\u00f3n es falsa, se ejecuta el c\u00f3digo dentro del bloque \u00abelse\u00bb y se imprime \u00abBuenas tardes!\u00bb.<\/p>\n\n\n\n
Operador l\u00f3gico \u00abAND\u00bb<\/h3>\n\n\n\n
El operador l\u00f3gico \u00abAND\u00bb se utiliza para combinar dos o m\u00e1s condiciones en una sola expresi\u00f3n y verificar que todas las condiciones sean verdaderas. Aqu\u00ed est\u00e1 la sintaxis b\u00e1sica:<\/p>\n\n\n\n
if (condici\u00f3n1 && condici\u00f3n2) {\n  \/\/ c\u00f3digo que se ejecuta si ambas condiciones son verdaderas\n}<\/code><\/pre>\n\n\n\n
Por ejemplo, supongamos que queremos escribir un programa que imprima \u00abEs un d\u00eda soleado y c\u00e1lido\u00bb si tanto la variable clima<\/code> es \u00absoleado\u00bb como la variable temperatura<\/code> es mayor a 25 grados Celsius. Podemos hacerlo utilizando el operador \u00abAND\u00bb de la siguiente manera:<\/p>\n\n\n\n
let clima = \"soleado\";\nlet temperatura = 30;\n\nif (clima === \"soleado\" && temperatura > 25) {\n  console.log(\"Es un d\u00eda soleado y c\u00e1lido\");\n} else {\n  console.log(\"No es un d\u00eda soleado y c\u00e1lido\");\n}<\/code><\/pre>\n\n\n\n
En este caso, la condici\u00f3n dentro del \u00abif\u00bb es clima === \"soleado\" && temperatura > 25<\/code>, que eval\u00faa si la variable clima<\/code> es igual a \u00absoleado\u00bb y la variable temperatura<\/code> es mayor a 25. Si ambas condiciones son verdaderas, se imprime \u00abEs un d\u00eda soleado y c\u00e1lido\u00bb en la consola. Si una o ambas condiciones son falsas, se ejecuta el c\u00f3digo dentro del bloque \u00abelse\u00bb y se imprime \u00abNo es un d\u00eda soleado\u00bb<\/p>\n\n\n\n
Operador l\u00f3gico \u00abOR\u00bb<\/h3>\n\n\n\n
El operador l\u00f3gico \u00abOR\u00bb se utiliza para combinar dos o m\u00e1s condiciones en una sola expresi\u00f3n y verificar que al menos una de las condiciones sea verdadera. Aqu\u00ed est\u00e1 la sintaxis b\u00e1sica:<\/p>\n\n\n\n
if (condici\u00f3n1 || condici\u00f3n2) {\n  \/\/ c\u00f3digo que se ejecuta si al menos una de las condiciones es verdadera\n}<\/code><\/pre>\n\n\n\n
Por ejemplo, supongamos que queremos escribir un programa que imprima \u00abEs un d\u00eda de playa\u00bb si la variable clima<\/code> es \u00absoleado\u00bb o<\/strong> la variable temperatura<\/code> es mayor a 25 grados Celsius. Podemos hacerlo utilizando el operador \u00abOR\u00bb de la siguiente manera:<\/p>\n\n\n\n
let clima = \"soleado\";\nlet temperatura = 20;\n\nif (clima === \"soleado\" || temperatura > 25) {\n  console.log(\"Es un d\u00eda de playa\");\n} else {\n  console.log(\"No es un d\u00eda de playa\");\n}<\/code><\/pre>\n\n\n\n
En este caso, la condici\u00f3n dentro del \u00abif\u00bb es clima === \"soleado\" || temperatura > 25<\/code>, que eval\u00faa si la variable clima<\/code> es igual a \u00absoleado\u00bb o la variable temperatura<\/code> es mayor a 25. Si al menos una de las condiciones es verdadera, se imprime \u00abEs un d\u00eda de playa\u00bb en la consola. Si ambas condiciones son falsas, se ejecuta el c\u00f3digo dentro del bloque \u00abelse\u00bb y se imprime \u00abNo es un d\u00eda de playa\u00bb.<\/p>\n\n\n\n
if else if else if else<\/h3>\n\n\n\n
A veces nos encontramos en situaciones donde no podemos redudir todo a una sola expresi\u00f3n, inclusive si queremos simplificarla usando AND o OR, por est\u00e1 raz\u00f3n a veces nos vemos obligados a tener un if<\/strong> y dentro otro if<\/strong> o bien un if<\/strong> dentro de un else<\/strong>
Imagina la siguiente situaci\u00f3n, tenemos una aplicaci\u00f3n de compras online y queremos dar descuento, aqu\u00ed las reglas:<\/p>\n\n\n\n