Explora la ramificación condicional en JavaScript

Introducción

En este laboratorio, los participantes profundizarán en el mundo de la ramificación condicional en JavaScript, explorando diversas técnicas para tomar decisiones y controlar el flujo del programa. El laboratorio aborda conceptos esenciales como las instrucciones if de una sola rama, la lógica if...else, las instrucciones de múltiples condiciones y las instrucciones switch, brindando experiencia práctica con diferentes estructuras condicionales.

A través de ejercicios de codificación prácticos, los aprendices adquirirán destreza en la implementación de la lógica condicional, la comparación de diferentes técnicas de ramificación y la comprensión de cómo elegir el enfoque más adecuado para determinados escenarios de programación. Al trabajar a través de ejemplos paso a paso que involucran la verificación de edad, la evaluación de calificaciones y el manejo de casos, los participantes desarrollarán una base sólida en las capacidades de programación condicional de JavaScript.

Comprender la instrucción if de una sola rama

En este paso, aprenderás sobre la básica instrucción if de una sola rama en JavaScript, que te permite ejecutar código de manera condicional basada en una condición específica.

Primero, creemos un archivo de JavaScript para explorar la instrucción if de una sola rama. Abra el WebIDE y cree un nuevo archivo llamado conditional-basics.js en el directorio ~/project.

// Cree un ejemplo simple de verificación de edad
let age = 18;

// Instrucción if de una sola rama
if (age >= 18) {
  console.log("You are eligible to vote!");
}

En este ejemplo, la instrucción if verifica si la age es mayor o igual a 18. Si la condición es verdadera, el bloque de código dentro de las llaves {} se ejecutará.

Ejecutemos el script para ver la salida:

node ~/project/conditional-basics.js

Salida de ejemplo:

You are eligible to vote!

Ahora, probemos otro ejemplo para demostrar cómo funciona la instrucción if cuando la condición es falsa:

// Modifique el archivo anterior
let temperature = 15;

if (temperature < 10) {
  console.log("It's cold outside. Wear a jacket!");
}

En este caso, como la temperatura es 15 (lo cual no es menor que 10), nada se imprimirá cuando se ejecute el script.

Implementar la lógica condicional if...else

En este paso, aprenderás sobre la lógica condicional if...else en JavaScript, que te permite ejecutar diferentes bloques de código dependiendo de si una condición es verdadera o falsa.

Abra el WebIDE y cree un nuevo archivo llamado conditional-else.js en el directorio ~/project. Crearemos un ejemplo simple que demuestre cómo funciona if...else:

// Cree un ejemplo simple de evaluación de calificaciones
let score = 75;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

En este ejemplo, la instrucción if...else verifica si la score es mayor o igual a 60. Si la condición es verdadera, imprime un mensaje de aprobado. De lo contrario, imprime un mensaje de reprobado.

Ejecutemos el script para ver la salida:

node ~/project/conditional-else.js

Salida de ejemplo:

Congratulations! You passed the exam.

Ahora, modifiquemos el script para demostrar la parte else cambiando la puntuación:

// Modifique el archivo anterior
let score = 45;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

Cuando ejecute este script, verá una salida diferente:

Salida de ejemplo:

Sorry, you did not pass the exam.

Cree otro ejemplo para mostrar cómo se puede usar if...else con diferentes tipos de condiciones:

// Agregue otro ejemplo al archivo
let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella with you.");
} else {
  console.log("Enjoy the sunny day!");
}

Este ejemplo muestra cómo if...else puede funcionar con condiciones booleanas también.

Crear instrucciones if...else if...else de múltiples condiciones

En este paso, aprenderás cómo usar múltiples condiciones con las instrucciones if...else if...else en JavaScript para manejar escenarios de toma de decisiones más complejos.

Abra el WebIDE y cree un nuevo archivo llamado multi-condition.js en el directorio ~/project:

// Cree un ejemplo de clasificación de calificaciones
let score = 85;

if (score >= 90) {
  console.log("Excelente! Has obtenido una calificación A.");
} else if (score >= 80) {
  console.log("Buen trabajo! Has obtenido una calificación B.");
} else if (score >= 70) {
  console.log("Buen desempeño! Has obtenido una calificación C.");
} else if (score >= 60) {
  console.log("Has aprobado. Has obtenido una calificación D.");
} else {
  console.log("Lo siento, has suspendido el examen.");
}

En este ejemplo, la instrucción if...else if...else comprueba múltiples condiciones secuencialmente. La primera condición que se evalúe como verdadera tendrá su bloque de código ejecutado, y las condiciones restantes se omitirán.

Ejecutemos el script para ver la salida:

node ~/project/multi-condition.js

Salida de ejemplo:

Buen trabajo! Has obtenido una calificación B.

Ahora, modifiquemos la puntuación para ver cómo funcionan diferentes condiciones:

// Pruebe diferentes escenarios de puntuación
let score = 55;

if (score >= 90) {
  console.log("Excelente! Has obtenido una calificación A.");
} else if (score >= 80) {
  console.log("Buen trabajo! Has obtenido una calificación B.");
} else if (score >= 70) {
  console.log("Buen desempeño! Has obtenido una calificación C.");
} else if (score >= 60) {
  console.log("Has aprobado. Has obtenido una calificación D.");
} else {
  console.log("Lo siento, has suspendido el examen.");
}

Cuando ejecute este script, verá una salida diferente:

Salida de ejemplo:

Lo siento, has suspendido el examen.

Cree otro ejemplo para demostrar la lógica de múltiples condiciones con un escenario diferente:

// Ejemplo de condición climática
let temperature = 25;

if (temperature > 30) {
  console.log("Hace mucho calor afuera.");
} else if (temperature > 20) {
  console.log("El clima es cálido y agradable.");
} else if (temperature > 10) {
  console.log("Hoy hace un poco de frío.");
} else {
  console.log("Hace frío afuera.");
}

Este ejemplo muestra cómo se puede usar if...else if...else para manejar múltiples condiciones con diferentes resultados.

Utilizar la instrucción switch para el manejo de múltiples casos

En este paso, aprenderás sobre la instrucción switch en JavaScript, que proporciona una forma alternativa de manejar múltiples condiciones para una variable única.

Abra el WebIDE y cree un nuevo archivo llamado switch-statement.js en el directorio ~/project:

// Cree un ejemplo de día de la semana usando la instrucción switch
let day = 3;

switch (day) {
  case 1:
    console.log("Lunes");
    break;
  case 2:
    console.log("Martes");
    break;
  case 3:
    console.log("Miércoles");
    break;
  case 4:
    console.log("Jueves");
    break;
  case 5:
    console.log("Viernes");
    break;
  case 6:
    console.log("Sábado");
    break;
  case 7:
    console.log("Domingo");
    break;
  default:
    console.log("Día inválido");
}

En este ejemplo, la instrucción switch comprueba el valor de day. Cada case representa un valor específico, y el bloque de código correspondiente se ejecuta cuando el valor coincide. La instrucción break evita que se siga ejecutando el siguiente caso.

Ejecutemos el script para ver la salida:

node ~/project/switch-statement.js

Salida de ejemplo:

Miércoles

Ahora, creemos otro ejemplo para demostrar el caso default:

// Clasificación de calificaciones usando la instrucción switch
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excelente rendimiento!");
    break;
  case "B":
    console.log("Buen trabajo!");
    break;
  case "C":
    console.log("Rendimiento satisfactorio.");
    break;
  case "D":
    console.log("Necesita mejorar.");
    break;
  default:
    console.log("Calificación inválida.");
}

Cuando ejecute este script, verá:

Salida de ejemplo:

Buen trabajo!

Demostremos cómo múltiples casos pueden compartir el mismo bloque de código:

// Detección de fin de semana usando la instrucción switch
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("Es fin de semana!");
    break;
  default:
    console.log("Es un día laboral.");
}

Este ejemplo muestra cómo se puede manejar múltiples casos con la misma acción.

Comparar y elegir entre las instrucciones if y switch

En este paso, aprenderás las principales diferencias entre las instrucciones if y las instrucciones switch, y entenderás cuándo utilizar cada enfoque.

Abra el WebIDE y cree un nuevo archivo llamado conditional-comparison.js en el directorio ~/project:

// Comparando if y switch para diferentes escenarios

// Escenario 1: Comprobación de igualdad simple
let fruit = "apple";

// Usando la instrucción if
if (fruit === "apple") {
  console.log("Instrucción if: Es una manzana.");
} else if (fruit === "banana") {
  console.log("Instrucción if: Es una banana.");
} else {
  console.log("Instrucción if: Fruta desconocida.");
}

// Usando la instrucción switch
switch (fruit) {
  case "apple":
    console.log("Instrucción switch: Es una manzana.");
    break;
  case "banana":
    console.log("Instrucción switch: Es una banana.");
    break;
  default:
    console.log("Instrucción switch: Fruta desconocida.");
}

// Escenario 2: Condiciones complejas
let score = 85;

// La instrucción if es mejor para condiciones complejas
if (score >= 90 && score <= 100) {
  console.log("Excelente calificación (A)");
} else if (score >= 80 && score < 90) {
  console.log("Buen calificación (B)");
} else if (score >= 70 && score < 80) {
  console.log("Calificación satisfactoria (C)");
} else {
  console.log("Necesita mejorar");
}

// El switch es menos adecuado para condiciones basadas en rangos o complejas

Ejecutemos el script para ver las salidas:

node ~/project/conditional-comparison.js

Salida de ejemplo:

Instrucción if: Es una manzana.
Instrucción switch: Es una manzana.
Buen calificación (B)

Diferencias clave a recordar:

Las instrucciones if son más flexibles y pueden manejar condiciones complejas
Las instrucciones switch son mejores para la coincidencia exacta de valores
if puede comparar diferentes tipos y utilizar operadores lógicos complejos
switch está limitado a comprobaciones de igualdad estricta

Cree un ejemplo final para ilustrar estos puntos:

// Elegir entre if y switch

function recommendConditional(input) {
  // Use switch para la coincidencia simple de valores exactos
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch para las comprobaciones de valores simples");
      break;

    // Use if para condiciones más complejas
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if para la comprobación de rangos y tipos");
      } else {
        console.log(
          "Las condiciones complejas son mejores con las instrucciones if"
        );
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

Resumen

En este laboratorio, los participantes exploraron técnicas de ramificación condicional en JavaScript, centrándose en diferentes tipos de instrucciones condicionales. El laboratorio comenzó con la comprensión de las instrucciones if de una sola rama, demostrando cómo ejecutar código basado en condiciones específicas, como la verificación de edad y las comprobaciones de temperatura. Los aprendices practicaron crear lógica condicional simple que permite que el código se ejecute solo cuando una condición especificada es verdadera.

Luego, el laboratorio avanzó a técnicas condicionales más avanzadas, incluyendo instrucciones if...else para manejar la ramificación bidireccional, instrucciones if...else if...else de múltiples condiciones para la toma de decisiones complejas y instrucciones switch para manejar múltiples casos. Los participantes aprendieron cómo comparar diferentes enfoques condicionales, comprendiendo la sintaxis y las aplicaciones prácticas de cada método en la programación de JavaScript.