Estructuras de control de Selección (Condicionales)

Descubre las fascinantes Estructuras de Control de Selección en programación, herramientas clave que otorgan poder al manejar condicionales en tu código. Exploraremos beneficios, características y ejemplos detallados de cómo estas estructuras, como el «if», «else», «switch», y «case», son fundamentales para dirigir el flujo de tu código de manera efectiva. Acompáñanos en este viaje para comprender cómo estas estructuras condicionales se convierten en tu aliado principal en la creación de algoritmos dinámicos y funcionales.

Como dato obvio, sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Qué son las estructuras de control de selección condicionales?

Las estructuras de control de selección, también conocidas como condicionales, son herramientas que permiten que un programa tome decisiones basadas en ciertas condiciones y ejecute diferentes bloques de código según el resultado de esas condiciones. Los tipos más comunes de este tipo de estructuras son:

1. IF-ELSE (si-sino)
2. IF-ELSE IF-ELSE (si-sino si-sino)
3. SWITCH-CASE (Conmutador-Caso)

2. Principales características de estas estructuras.

Antes que nada, ten en cuenta que estas características son universales en la mayoría de los lenguajes de programación, aunque la sintaxis específica puede variar entre ellos. La elección de la estructura de control adecuada depende del problema que estás resolviendo y del lenguaje de programación que estás utilizando.

Algunas características para entender cómo funcionan estas estructuras:

1. Evaluación de Condiciones:
   • La función principal de las estructuras de control de selección es evaluar condiciones. Estas condiciones son expresiones que resultan en un valor booleano (verdadero o falso).
2. Toma de Decisiones:
   • Basándose en el resultado de la evaluación de la condición, el programa toma decisiones sobre qué bloque de código ejecutar. Si la condición es verdadera, se ejecuta un bloque de código específico; si es falsa, se ejecuta otro bloque o ninguno en el caso de algunas estructuras.
3. Anidamiento:
   • En muchos lenguajes de programación, es posible anidar estructuras de control de selección dentro de otras. Esto significa que puedes tener una estructura dentro de otra, lo que permite un mayor grado de complejidad en la lógica de programación.
4. Exclusividad Mutua (Mutual Exclusivity):
   • En estructuras como el «if-else if-else», las condiciones son evaluadas en orden y solo se ejecutará el bloque de código asociado a la primera condición verdadera. Esto asegura la exclusividad mutua de las condiciones.
5. Default o Else (Caso por Defecto o Sino):
   • Algunas estructuras, como el «switch-case» o el «else» en el «if-else», permiten especificar un bloque de código que se ejecutará si ninguna de las condiciones anteriores es verdadera.
6. Expresiones Ternarias:
   • Algunos lenguajes permiten la expresión ternaria, una forma concisa de escribir condicionales en una sola línea.
7. Operadores Lógicos:
   • Los operadores lógicos, como AND (&&), OR (||), y NOT (!), son comúnmente utilizados en condiciones para combinar múltiples expresiones booleanas.
8. Facilitan la Lectura y Mantenimiento del Código:
   • El uso apropiado de estructuras de control de selección pueden hacer que el código sea más legible y mantenible, ya que permite expresar la lógica de manera clara y ordenada.
9. Facilitan la Toma de Decisiones Complejas:
   • Las estructuras de control de selección son esenciales para abordar problemas que involucran decisiones múltiples y complejas en un programa.

3. Los tipos de estructuras condicionales más comunes.

Existen varias estructuras de control de selección o condicionales que se utilizan en programación. A continuación, se describen algunos de los tipos más comunes:

1. IF-ELSE (si-sino):
2. IF-ELSE IF-ELSE (si-sino si-sino):
3. SWITCH-CASE (Conmutador-Caso):

3.1. IF-ELSE (si-sino):

Esta instrucción o estructura condicional simple con cláusula «else» (o estructura condicional compuesta), permite ejecutar un bloque de código si una condición es verdadera y otro bloque de código si la condición es falsa (en el ejemplo más abajo se puede entender bien).

3.1.1. Usos comunes de condición «if-else» en el desarrollo web:

El uso de la estructura if-else es muy común en el desarrollo web. Aquí tienes algunos casos prácticos comunes:

1. Validación de formularios: Al validar formularios en el lado del cliente, puedes usar if-else para verificar si los campos están llenos correctamente antes de enviar la información al servidor.
2. Manejo de Errores en Solicitudes Asíncronas: Al hacer solicitudes asincrónicas a un servidor (por ejemplo, con AJAX), puedes usar if-else para manejar las respuestas del servidor y gestionar posibles errores.
3. Detección de Características del Navegador: Al desarrollar aplicaciones web que deben ser compatibles con varios navegadores, puedes utilizar if-else para detectar las características del navegador y aplicar código específico según sea necesario.
4. Selección de Temas o Modos de Visualización: Puedes utilizar if-else para permitir que los usuarios elijan entre diferentes temas o modos de visualización en tu aplicación web.
5. Autenticación de Usuario: En un sistema de autenticación, puedes usar if-else para verificar si un usuario ha iniciado sesión. Si el usuario ha iniciado sesión, se le muestra el contenido del sitio; de lo contrario, se le redirige a la página de inicio de sesión.

3.1.2. Ejemplo práctico usando condición if-else:

En el siguiente ejemplo implemento un condicional if else en JavaScript para mostrar un mensaje u otro dependiendo si la persona es mayor de edad o no.

Explicación del ejemplo:

• En este ejemplo usamos las etiquetas HTML de campo de entrada (input) donde permitimos al usuario ingresar un número, que representa una edad, y un botón HTML para verificar dicho número.
• Cuando el usuario hace clic en el botón, el valor ingresado se guarda en una variable de JavaScript.
• Luego, con una estructura if...else, comprobamos si ese valor es mayor o igual a 18:
  • Si el valor es mayor o igual a 18, se ejecuta el bloque del if y se muestra el mensaje:
    "Sos mayor de edad."
  • Si el valor es menor a 18, se ejecuta el bloque del else y se muestra el mensaje:
    "Sos menor de edad."

Ejemplo visual de la estructura IF-ELSE:

Aquí, incorporamos unas propiedades CSS para hacer visualmente mas atractivo el ejemplo!

3.2. IF-ELSE IF-ELSE (si-sino si-sino):

Esta instrucción o estructura condicional múltiple es utilizada cuando se necesita evaluar múltiples condiciones de manera secuencial y ejecutar el bloque de código correspondiente a la primera condición que resulta ser verdadera.

Cada condición es evaluada en orden, y tan pronto como se encuentra una que es verdadera, se ejecuta el bloque de código asociado y las demás condiciones no se evalúan.

Como podemos ver en la imagen, primero se evalúa la condición «if», si la misma es verdadera, se ejecuta el bloque de código correspondiente (condicional1). De lo contrario continua con el siguiente «else», y así hasta que se encuentre la condición verdadera.

A continuación ampliamos un poco mas si no se entendió del todo hasta aquí:

1. Evaluación Secuencial de «if-else if-else»:
   • Antes que nada, esta condición se evalúa en orden, comenzando desde la parte «if» hasta el primer «else» o hasta que se encuentre una condición verdadera. Una vez que una condición es verdadera, se ejecuta el bloque de código asociado y el resto de las condiciones no se evalúan.
2. Exclusividad Mutua:
   • Solo se ejecutará el bloque de código asociado a la primera condición verdadera encontrada. Esto significa que, aunque varias condiciones podrían ser verdaderas, solo se ejecutará el bloque de código correspondiente a la primera condición que cumple la condición.
3. Default o Else:
   • Puedes incluir una sección «else» al final para manejar el caso en que ninguna de las condiciones anteriores sea verdadera. Este bloque de código se ejecutará solo si ninguna de las condiciones anteriores se cumple.
4. Uso en Decisiones Múltiples:
   • La estructura «if-else if-else» es especialmente útil cuando tienes múltiples opciones o condiciones diferentes y deseas ejecutar el bloque de código correspondiente a la primera opción que cumple con ciertas condiciones.

3.2.1. Usos comunes de condición «if-else if-else» en el desarrollo web:

Ejemplos de cómo la estructura «if-else if-else» se utiliza comúnmente en el desarrollo web para tomar decisiones basadas en múltiples condiciones y adaptar el comportamiento de la aplicación de manera dinámica:

1. Enrutamiento de Páginas: Determinar qué página o componente cargar en una aplicación web basándose en la URL o en algún otro parámetro.
2. Manejo de Roles de Usuario: Asignar diferentes permisos y acceso a funciones específicas según el rol de usuario en una aplicación.
3. Adaptación a Diferentes Dispositivos: Ajustar la presentación o el comportamiento de una página web según el tipo de dispositivo (por ejemplo, escritorio, tableta, móvil).
4. Selección de Idioma: Cambiar dinámicamente el idioma de una aplicación web según la preferencia del usuario.
5. Manejo de Eventos: Determinar cómo manejar eventos específicos del usuario (clics, desplazamientos, etc.) según el contexto de la aplicación.
6. Personalización de Temas: Permitir que los usuarios elijan entre diferentes temas o estilos de diseño para personalizar la apariencia de la aplicación.
7. Manejo de Formularios: Validar y procesar diferentes secciones de un formulario web de manera específica según la información ingresada por el usuario.
8. Control de Versiones: Gestionar diferentes versiones o estados de una aplicación web y mostrar la interfaz correspondiente según la versión actual.
9. Manejo de Estados de Sesión: Ajustar la interfaz y el flujo de la aplicación según si un usuario ha iniciado sesión, está autenticado o es un visitante no autenticado.
10. Priorización de Contenido: Mostrar contenido prioritario o destacado según ciertas condiciones predefinidas, como la relevancia o la popularidad.

3.2.2. Ejemplo práctico usando condición «if-else if-else»:

Haremos un ejemplo para solucionar el aparte 3 del punto anterior; «adaptación a diferentes dispositivos».

Primero te muestro el posible código con la condición y luego te doy la expoliación:

Como podemos ver en la imagen, la evaluación se realiza de arriba hacia abajo y estas son sus condiciones:

• Si el ancho de la pantalla es mayor o igual a 1024, se ejecutará solo el bloque dentro del "if".
• Si el ancho de la pantalla está entre 768 y 1023 (inclusive), se ejecutará el bloque dentro del "else-if".
• Y si ninguna de estas condiciones se cumple, se ejecutará el bloque dentro del else.

Es importante notar que, en una estructura «if-else if-else», solo se ejecutará el bloque asociado a la primera condición verdadera encontrada, las demás se ignorarán.

ACLARACIÓN: Este código con dichas condición, se debe complementar con JavaScript y la estructura HTML y las reglas CSS de tu web para su funcionamiento. Además, ten en cuenta que en la práctica es común utilizar bibliotecas como Bootstrap o CSS frameworks que facilitan este tipo de adaptación. Este ejemplo se centra en la comprensión del concepto de la estructura de control condicional «if-else if-else».

3.3. SWITCH-CASE (Conmutador-Caso):

Esta es otra estructura de control de selección múltiple, la cual, es una construcción de control de flujo que se utiliza para evaluar múltiples condiciones en función del valor de una expresión. Es una alternativa mas legible y eficiente a «if-else if-else»

Sintaxis del switch:

Explicación:

1. Evaluación de la Expresión (switch):
   • Primero, se evalúa la expresión dentro de la declaración switch. Esta expresión es comúnmente una variable o una expresión que produce un valor.
2. Comparación con Casos (case):
   • Luego, el valor resultante de la expresión se compara con cada caso (case) dentro de la estructura switch. Si uno de los casos coincide exactamente con el valor de la expresión, se ejecuta el bloque de código asociado a ese caso.
3. Ejecución del Bloque de Código del Caso Correspondiente:
   • Si hay coincidencia, se ejecuta el bloque de código asociado al caso que coincide con la expresión. Después de ejecutar ese bloque de código, se sale de la estructura switch a menos que se encuentre una instrucción break, que interrumpe la ejecución y evita que se continúen evaluando otros casos.
4. Uso de break:
   • Es importante incluir la palabra clave break después de cada bloque de código del caso. Esto evita la ejecución accidental de los bloques de código de casos siguientes y asegura que se salga de la estructura switch después de ejecutar el bloque correspondiente.
5. Caso Predeterminado (default):
   • Si ninguno de los casos coincide con el valor de la expresión, se ejecuta el bloque de código dentro del caso predeterminado (default), si está presente. El caso predeterminado es opcional.
6. Salida de la Estructura switch:
   • Después de ejecutar el bloque de código de un caso (o del caso predeterminado), la ejecución sale de la estructura switch, y el programa continúa con el código siguiente al switch.

ACLARACIÓN: Es importante destacar que si no se incluye un break después de un caso, la ejecución continuará con los bloques de código de casos siguientes hasta que se encuentre un break o se salga de la estructura switch.

3.2. Usos comunes de condición «switch-case» en el desarrollo web:

1. Interacción con Elementos del DOM:
   • Evaluar el tipo o la clase de un elemento del DOM y realizar operaciones específicas en función de esas características.
2. Selección de Temas o Estilos:
   • Cambiar dinámicamente el tema o los estilos de una página web en función de las preferencias del usuario o del estado de la aplicación.
3. Manejo de Rutas en Enrutadores Front-end:
   • En sistemas de enrutamiento front-end, usar switch-case para manejar diferentes rutas y cargar el contenido correspondiente en la interfaz de usuario.
4. Manejo de Acciones del Usuario:
   • Interpretar acciones del usuario, como hacer clic en botones o seleccionar opciones en un menú, para realizar acciones específicas según la acción realizada.
5. Configuración Dinámica de Funcionalidades:
   • Configurar dinámicamente ciertas funcionalidades o características de una aplicación web en función de valores específicos.
6. Manejo de Códigos de Estado HTTP:
   • Interpretar códigos de estado HTTP devueltos por solicitudes al servidor y tomar acciones específicas en función de esos códigos.
7. Adaptación a Diferentes Dispositivos:
   • Evaluar características específicas del dispositivo, como el tipo de navegador o el tamaño de la pantalla, para adaptar el diseño y el comportamiento de la interfaz de usuario.
8. Selección de Formato de Fecha/Hora:
   • Cambiar el formato de visualización de fechas y horas en función de las preferencias del usuario o del contexto de la aplicación.
9. Manejo de Estados de la Aplicación:
   • Evaluar el estado actual de una aplicación y tomar decisiones en consecuencia, como mostrar o ocultar ciertas secciones de la interfaz de usuario.
10. Manejo de Eventos del Teclado:
    • Detectar y manejar eventos del teclado, como las teclas de flecha o las teclas de función, para realizar acciones específicas en una página web.

La elección de switch-case frente a otras estructuras de control depende del escenario específico y la legibilidad del código.

3.3. Ejemplo práctico usando condición «switch-case«:

Vamos a dar un ejemplo de la estructura switch con JavaScript, donde supongamos que tenemos una lista HTML, en la cual un usuario debe elegir un día de la semana.

Y en base al día que se elija, se ejecuta un case u otro del siguiente ejemplo. Tal como explicamos sobre el funcionamiento de este condicional SWITCH:

switch (dia) {
      case "lunes":
        resultado.textContent = "Empezamos la semana con energía 💪";
        break;
      case "martes":
        resultado.textContent = "Seguimos avanzando 🚶";
        break;
      case "miércoles":
        resultado.textContent = "¡Mitad de semana! 🐪";
        break;
      case "jueves":
        resultado.textContent = "Ya falta poco para el finde 🕓";
        break;
      case "viernes":
        resultado.textContent = "¡Viernes! Se siente la alegría 🎉";
        break;
      case "sábado":
        resultado.textContent = "Día de descanso o paseo 🏖️";
        break;
      case "domingo":
        resultado.textContent = "Domingo de relax antes de volver a empezar 😌";
        break;
      default:
        resultado.textContent = "Por favor seleccioná un día.";
    }
  }Lenguaje del código: JavaScript (javascript)

EJEMPLO VISUAL USANDO EL CONDICIONAL SWITCH:

En este ejemplo usamos un posicionamiento CSS para un mejor efecto visual

EN RESUMEN: este patrón es una forma efectiva de manejar múltiples acciones del usuario, ya que cada botón puede tener un comportamiento específico y la lógica se estructura de manera clara y legible utilizando la estructura switch-case.

PREGUNTAS FRECUENTES Y RESUMEN