Condicional switch Javascript: ¿Cómo usar? Con ejemplos!

El condicional switch en JavaScript es una estructura que permite evaluar una expresión y ejecutar diferentes bloques de código según el valor obtenido. ¿Qué es y cómo funciona? A diferencia de if - else, el switch simplifica la gestión de múltiples casos. En este artículo descubrirás cómo usar este condicional con ejemplos prácticos y aprenderás para qué sirve en situaciones con varios resultados posibles.

1. ¿Que es el condicional switch en JavaScript?

La condicional switch en JavaScript es una estructura de control que se utiliza para tomar decisiones en función del valor de una expresión. A diferencia de la condicional if-else, que evalúa múltiples condiciones secuenciales, el switch evalúa una única expresión y ejecuta el bloque de código que corresponde al valor de esa expresión.👌

Imagina que la condicional switch es como una máquina que toma decisiones basadas en lo que le das. En lugar de tener que comprobar una cosa tras otra (como con if y else if), le das algo (como un número o una palabra), y ella elige qué hacer basándose en eso.

1.1. ¿Cómo funcionan este proceso exactamente?

1. Imagínate una caja de opciones. Tienes varias opciones y dependiendo de lo que pongas en la caja, se selecciona una de esas opciones.
2. Elige algo para comprobar. Le dices a la máquina (en este caso, la computadora) cuál es el «valor» o la «cosa» que quieres comprobar. Esto puede ser un número, un color, una palabra, lo que sea.
3. La máquina compara. La máquina compara ese valor con varias «opciones» que tú le das. Si encuentra una opción que coincide con lo que le diste, hace lo que le dijiste que haga para esa opción.
4. Si no encuentra coincidencia. Si no encuentra ninguna coincidencia con tus opciones, puedes decirle qué hacer en ese caso.

ENTONCES…

1.2. ¿Para qué sirve la sentencia switch en JavaScript?

1. Organización del código:
   • Permite organizar varias condiciones en bloques más legibles, en lugar de tener una secuencia larga de if-else if.
2. Comparación múltiple:
   • Facilita la comparación de una misma variable o expresión contra varios valores. Por ejemplo, se usa comúnmente para manejar valores en menús, opciones de usuario, respuestas de formularios, etc.
3. Mejor rendimiento en ciertos casos:
   • En situaciones con muchas comparaciones, el switch puede ser más eficiente que múltiples sentencias if-else, ya que el motor de JavaScript puede optimizar la evaluación interna del switch.

1.3. ¿Cómo seria un ejemplo real usando esta estructura switch?

Supongamos que tenemos un botón en una página web en donde el usuario puede elegir un día de la semana, y dependiendo de ese día, se mostrará un mensaje usando la estructura switch.

En este ejemplo, podemos entender como funciona la lógica de esta estructura switch, ya que dependiendo el día de la semana que se elija, se compara ese día con las diferentes opciones (case), y cuando se encuentra la coincidencia se muestra el mensaje relacionada a esa opción de coincidencia.

     switch(dia) {
        case 'lunes':
          mensaje = 'Empieza la semana, ánimo.';
          break;
        case 'martes':
          mensaje = 'Es martes, un paso más hacia el fin de semana.';
          break;
        case 'miercoles':
          mensaje = 'Miércoles, ¡ya estamos a mitad de semana!';
          break;
        case 'jueves':
          mensaje = 'Jueves, casi terminamos.';
          break;
        case 'viernes':
          mensaje = '¡Por fin viernes! A disfrutar.';
          break;
        case 'sabado':
          mensaje = 'Es sábado, relájate y disfruta.';
          break;
        case 'domingo':
          mensaje = 'Domingo, prepárate para la semana que viene.';
          break;
        default:
          mensaje = 'Día no válido';
      }Lenguaje del código: JavaScript (javascript)

Esta sería la estructura switch usada para este ejemplo. Y si por ejemplo, un usuario elije el día «Martes», este se compara con todos los case hasta encontrar la coincidencia, en este caso seria el segundo case y en la página se vería el mensaje ‘Es martes, un paso más hacia el fin de semana.’

2 ¿Cómo usar la condicional switch en JavaScript?

Para entender como usarlo, primero veamos su sintaxis.

SINTAXIS del switch:

switch (expresión) {
  case valor1:
    // Bloque de código a ejecutar si la expresión coincide con valor1
    break;
  case valor2:
    // Bloque de código a ejecutar si la expresión coincide con valor2
    break;
  // Puedes agregar más casos según sea necesario
  default:
    // Bloque de código a ejecutar si ninguno de los valores coincide
}Lenguaje del código: JavaScript (javascript)

Componentes clave:

1. switch (expresión):
   • Evalúa la expresión, que puede ser una variable, resultado de una función o cálculo.
2. case valor::
   • Cada case representa un valor con el que se compara la expresión evaluada. Si hay coincidencia, se ejecuta el código asociado a ese caso.
3. break;:
   • Detiene la ejecución de los siguientes case en el switch una vez que se ha ejecutado un caso. Es opcional, pero generalmente se usa para evitar que se ejecuten otros casos después del coincidente.
4. default::
   • Opcional. Este bloque se ejecuta si ningún caso coincide con la expresión. Actúa como un «catch-all» para manejar cualquier valor no previsto.

Bien, ahora veamos el PASO A PASO para crear la estructura de este condicional switch:

1. PASO 1: Elegir lo que quieres comparar:
2. PASO 2: Crear el bloque switch
3. PASO 3: Definir los casos (case)
4. PASO 4: Usar break
5. PASO 5: Opción default (opcional)

PASO 1: Elegir lo que quieres comparar:

La primera parte de la estructura switch es definir el valor que quieres comparar. Este valor puede ser una variable JavaScript o una expresión (en el punto 4 ampliamos sobre las diferentes expresiones que podemos usar en este paso) que produce un valor (por ejemplo, un número, un string, etc.).

let color = 'rojo';Lenguaje del código: JavaScript (javascript)

Aquí hemos definido una variable color con el valor 'rojo'. Ahora queremos ver qué hacer dependiendo de qué color tenemos.

PASO 2: Crear el bloque switch

Ahora, dentro del bloque switch, vamos a usar la palabra clave switch seguida de paréntesis, donde colocamos la variable o valor a comparar (en este caso, color):

switch(color) {
  // Aquí van las opciones (cases)
}Lenguaje del código: JavaScript (javascript)

Esto le dice a JavaScript: «Quiero comprobar el valor de color y ejecutar algo dependiendo de cuál sea».

PASO 3: Definir los casos (case)

Dentro del bloque switch, tienes que crear varios casos (case) que representen las posibles opciones que puede tener tu valor. Usas la palabra clave case seguida de un valor, y luego le indicas qué debe hacer si el valor de la variable coincide con ese caso.

switch(color) {
  case 'rojo':
    console.log('El color es rojo');
    break;
  
  case 'azul':
    console.log('El color es azul');
    break;
  
  case 'verde':
    console.log('El color es verde');
    break;
}Lenguaje del código: JavaScript (javascript)

Explicación:

1. case 'rojo'::
   • Si el valor de color (en el switch) es 'rojo', ejecutará el código dentro de este caso (en este caso, console.log imprimirá ('El color es rojo');).
2. case 'azul'::
   • Si el valor de color es 'azul', ejecutará lo que está dentro de este caso.
3. case 'verde'::
   • Si el valor de color es 'verde', ejecutará lo que está dentro de este caso.

PASO 4: Usar break

Después de cada caso, es importante usar la palabra clave break. Esto le dice a JavaScript que «se detenga» una vez que ha encontrado una coincidencia y ha ejecutado el código de ese caso.

Si no colocas break, JavaScript seguirá ejecutando los siguientes casos, incluso si ya encontró una coincidencia. Esto se llama «fall-through» (en el punto 5 explicamos en que casos usarlo) y generalmente no es lo que quieres.

switch(color) {
  case 'rojo':
    console.log('El color es rojo');
    break;  // Aquí se detiene si el color es rojo
  
  case 'azul':
    console.log('El color es azul');
    break;  // Aquí se detiene si el color es azul
  
  case 'verde':
    console.log('El color es verde');
    break;  // Aquí se detiene si el color es verde
}Lenguaje del código: JavaScript (javascript)

PASO 5: Opción default (opcional)

¿Qué pasa si el valor de la variable no coincide con ninguno de los casos que has definido?

Ahí entra el caso default. Este caso se ejecuta si ninguna de las opciones coincide con el valor de la variable.

switch(color) {
  case 'rojo':
    console.log('El color es rojo');
    break;
  
  case 'azul':
    console.log('El color es azul');
    break;
  
  case 'verde':
    console.log('El color es verde');
    break;

  default:
    console.log('No sé qué color es');
}Lenguaje del código: JavaScript (javascript)

• default:: Si color no es 'rojo', 'azul' ni 'verde', console.log() imprimirá: «No sé qué color es».

2.1. Resumen completo de estos pasos:

let color = 'rojo';

switch(color) {
  case 'rojo':
    console.log('El color es rojo');
    break;   // Si color es 'rojo', imprime y se detiene aquí

  case 'azul':
    console.log('El color es azul');
    break;   // Si color es 'azul', imprime y se detiene aquí

  case 'verde':
    console.log('El color es verde');
    break;   // Si color es 'verde', imprime y se detiene aquí

  default:
    console.log('No sé qué color es');  // Si color no coincide con ninguno, ejecuta esto
}Lenguaje del código: JavaScript (javascript)

Resumen paso a paso:

1. JavaScript revisa el valor de color.
2. Compara el valor de color con cada uno de los casos.
3. Si encuentra un caso que coincide (por ejemplo, si color es 'rojo'), ejecuta el código de ese caso.
4. break: Detiene la ejecución del switch después de ejecutar el caso correspondiente.
5. Si no hay coincidencias con ningún case, se ejecuta el código dentro del default (si existe).

3. Flujo del programa de un condicional switch e JavaScript.

Bien ahora veamos el flujo de un condicional switch, para lo cual tomaremos como referencia el ejemplo del punto 2.1.

PASO 1: Evaluar el valor del switch

El programa llega a la línea del switch y ve que el valor que tiene que evaluar es la variable color. En este caso, el valor de color es 'rojo'.

switch(color) {
  //...
}Lenguaje del código: JavaScript (javascript)

PASO 2: Comparar el valor de color con cada case

Ahora, JavaScript va comparando el valor de la variable color con cada uno de los casos:

1. Compara con el primer case:
   • Valor del color: 'rojo'
   • Primer case: 'rojo'
   • Resultado: ¡Coinciden! Entonces, ejecuta lo que está dentro del primer case.
2. Imprime «El color es rojo» en la consola, ya que encontró una coincidencia en el primer caso.

case 'rojo':
  console.log('El color es rojo');Lenguaje del código: JavaScript (javascript)

PASO 3: Ejecutar el break

Después de ejecutar el código del primer case, se encuentra con la palabra clave break. El break le indica a JavaScript que termine la evaluación del switch porque ya encontró y ejecutó el caso correspondiente.

• Resultado del break: El programa sale del bloque switch y no sigue evaluando los demás casos.

PASO 4: Terminar el switch

Como el break detiene la evaluación de los demás casos, el flujo del programa continúa con cualquier código que venga después del switch (si existe). No se evalúan los otros case ni el default.

4. El uso de expresiones en el condicional switch de JavaScript.

4.1. ¿Qué es una expresión?

En programación, una expresión es cualquier combinación de valores, variables, operadores y llamadas a funciones que se evalúa a un único valor. Este valor puede ser de cualquier tipo de dato (número, cadena, booleano, etc.).

En el contexto de un switch sería:

switch(expresión) {  //Desde aquí se llama a la expresión para su comparación
  //...
}Lenguaje del código: JavaScript (javascript)

4.2. ¿Cómo se usan las expresiones en switch?

1. Creamos una expresión.
2. Utilizamos la expresión en switch (entre paréntesis justo después de la palabra clave switch).
3. Comparación con casos.
4. Ejecución del código.
5. Si no se encuentra ninguna coincidencia, se ejecuta el código del caso default, si está definido.

4.3. ¿Que tipos de expresiones podemos crear y usar en un switch?

En un bloque switch, podemos usar diferentes tipos de expresiones para crear condiciones dinámicas, más allá de simplemente comparar valores fijos. Estas expresiones pueden ser tan simples como un valor directo o tan complejas como operaciones matemáticas o evaluaciones lógicas.

Aquí te detallo los tipos de expresiones que puedes crear y usar en un switch.

4.3.1. Expresiones aritméticas

Puedes usar expresiones con operadores aritméticas (sumas, restas, multiplicaciones, divisiones) como parte de la expresión que se evalúa en el switch. El resultado de la expresión será el valor que se comparará con los case.

Ejemplo:

let a = 5;
let b = 10;

switch (a + b) {  // Se evalúa 5 + 10, que es 15
  case 15:
    console.log('La suma es 15');
    break;
  case 20:
    console.log('La suma es 20');
    break;
  default:
    console.log('Resultado no reconocido');
}Lenguaje del código: JavaScript (javascript)

Explicación:

El código evalúa la expresión a + b, que es 5 + 10 = 15. Luego, el switch compara ese resultado con los valores de los casos.

1. Caso 15:
   • Coincide con el resultado de la suma, por lo que se ejecuta el bloque de código que imprime 'La suma es 15'.
2. Después del break, el switch termina y no evalúa los demás casos.

Resultado: Se imprime 'La suma es 15'.

4.3.2. Expresiones de comparación

Aunque no puedes hacer directamente comparaciones como >= o <= dentro del switch principal, sí puedes usar expresiones booleanas que devuelvan true o false en los case. Esto es útil para crear switch dinámicos que manejen rangos o múltiples condiciones.

Ejemplo con rango de edades:

let edad = 25;

switch (true) {  // Evalúa 'true', luego compara en los casos
  case (edad >= 18 && edad <= 29):
    console.log('Joven adulto');
    break;
  case (edad >= 30 && edad <= 60):
    console.log('Adulto');
    break;
  default:
    console.log('Edad no categorizada');
}Lenguaje del código: JavaScript (javascript)

En este caso, el switch evalúa la expresión true y luego compara los resultados de los casos, que son condiciones booleanas (que también sean true).

1. Caso 1 (edad >= 18 && edad <= 29):
   • Evalúa si edad está entre 18 y 29 (gracias al operador lógico AND). Como edad = 25, la condición es verdadera, por lo que se ejecuta este bloque y se imprime 'Joven adulto'.
2. Después del break, el switch termina y no evalúa los demás casos.

Resultado: Se imprime 'Joven adulto'.

4.3.3. Expresiones lógicas

Puedes utilizar operadores lógicos como && (AND), || (OR), o ! (NOT) dentro de los case. Esto permite construir condiciones más elaboradas.

Ejemplo con condiciones múltiples:

let temperatura = 30;

switch (true) {
  case (temperatura > 0 && temperatura <= 15):
    console.log('Hace frío');
    break;
  case (temperatura > 15 && temperatura <= 30):
    console.log('Hace templado');
    break;
  case (temperatura > 30):
    console.log('Hace calor');
    break;
  default:
    console.log('Temperatura desconocida');
}Lenguaje del código: JavaScript (javascript)

En este código, el switch evalúa la expresión true y compara con los casos que contienen condiciones booleanas.

1. Caso 1 (temperatura > 0 && temperatura <= 15):
   • Evalúa si la temperatura está entre 0 y 15, pero como la temperatura es 30, este caso es falso.
2. Caso 2 (temperatura > 15 && temperatura <= 30):
   • Evalúa si la temperatura está entre 15 y 30. Como temperatura = 30, la condición es verdadera, por lo que se ejecuta este bloque y se imprime 'Hace templado'.
3. Después del break, el switch termina y no evalúa los demás casos.

Resultado: Se imprime 'Hace templado'.

4.3.4. Funciones en la expresión

Puedes invocar una función de JS dentro del switch para que el valor que se evalúe sea el resultado de esa función. Esto permite una mayor flexibilidad, ya que puedes crear lógica personalizada y hacer que el switch maneje resultados más complejos.

Ejemplo con una función:

function obtenerPuntaje() {
  return 85;
}

switch (obtenerPuntaje()) {  // Evalúa el resultado de la función
  case 100:
    console.log('Puntaje perfecto');
    break;
  case 85:
    console.log('Puntaje excelente');
    break;
  default:
    console.log('Puntaje no reconocido');
}Lenguaje del código: JavaScript (javascript)

En este código, el switch evalúa el resultado de la función obtenerPuntaje(), que retorna 85.

1. Caso 100:
   • No coincide, ya que el puntaje es 85.
2. Caso 85:
   • Coincide con el valor retornado por la función, por lo que se ejecuta este bloque y se imprime 'Puntaje excelente'.
3. Después del break, el switch termina y no se evalúan más casos.

Resultado: Se imprime 'Puntaje excelente'.

4.3.5. Expresiones de acceso a propiedades

Puedes usar objetos de JS y acceder a sus propiedades para evaluar el valor en un switch. Esto es útil cuando trabajas con estructuras más complejas, como datos de usuarios o configuraciones.

Ejemplo con objetos:

let persona = {
  nombre: 'Juan',
  edad: 25
};

switch (persona.edad) {  // Evalúa la propiedad 'edad' del objeto
  case 18:
    console.log('Es mayor de edad');
    break;
  case 25:
    console.log('Tiene 25 años');
    break;
  default:
    console.log('Edad no reconocida');
}Lenguaje del código: JavaScript (javascript)

En este código, el switch evalúa la propiedad edad del objeto persona, que es 25.

1. Caso 18:
   • No coincide, porque la edad es 25.
2. Caso 25:
   • Coincide con el valor de persona.edad, por lo que se ejecuta este bloque y se imprime 'Tiene 25 años'.
3. Después del break, el switch termina y no evalúa más casos.

Resultado: Se imprime 'Tiene 25 años'.

4.3.6. Expresiones de concatenación de cadenas

También puedes concatenar cadenas dentro del switch, lo que permite construir valores de manera dinámica.

Ejemplo con concatenación de cadenas:

let nombre = 'Juan';
let apellido = 'Pérez';

switch (nombre + ' ' + apellido) {  // Concatenamos 'Juan Pérez'
  case 'Juan Pérez':
    console.log('Es Juan Pérez');
    break;
  case 'Ana Gómez':
    console.log('Es Ana Gómez');
    break;
  default:
    console.log('Nombre no reconocido');
}Lenguaje del código: JavaScript (javascript)

En este código, el switch evalúa la expresión nombre + ' ' + apellido, que resulta en 'Juan Pérez'.

1. Caso ‘Juan Pérez’:
   • Coincide con el valor concatenado, por lo que se ejecuta este bloque y se imprime 'Es Juan Pérez'.
2. Después del break, el switch termina y no evalúa más casos.

Resultado: Se imprime 'Es Juan Pérez'.

4.3.7. Expresiones condicionales ternarias

Aunque menos común, puedes usar operadores ternarios (condición ? valor1 : valor2) dentro de los case para simplificar las comparaciones.

Ejemplo con ternarios:

let puntuacion = 85;

switch (true) {
  case (puntuacion >= 90 ? true : false):
    console.log('Excelente');
    break;
  case (puntuacion >= 70 ? true : false):
    console.log('Bueno');
    break;
  default:
    console.log('Puntaje no reconocido');
}Lenguaje del código: JavaScript (javascript)

En este código, el switch evalúa la expresión true y compara los resultados de las condiciones booleanas, donde se usa el operador ternario para determinar si el valor de puntuacion cumple ciertas condiciones.

1. Caso 1 (puntuacion >= 90 ? true : false):
   • Evalúa si puntuacion es mayor o igual a 90. Como puntuacion = 85, esta condición es falsa y no se ejecuta.
2. Caso 2 (puntuacion >= 70 ? true : false):
   • Evalúa si puntuacion es mayor o igual a 70. Como puntuacion = 85, esta condición es verdadera, por lo que se ejecuta este bloque y se imprime 'Bueno'.
3. Después del break, el switch termina y no evalúa más casos.

Resultado: Se imprime 'Bueno'.

4.3.8. Expresiones de conversión de tipos

Puedes usar funciones de conversión de tipos como parseInt(), toString(), o Number() dentro del switch para convertir valores antes de compararlos.

Ejemplo con conversión de tipos:

let valor = '10';

switch (Number(valor)) {  // Convierte el string '10' a número
  case 10:
    console.log('Es un número 10');
    break;
  default:
    console.log('No es un número reconocido');
}Lenguaje del código: JavaScript (javascript)

En este código, el switch evalúa la expresión Number(valor), que convierte el valor de tipo cadena '10' en el número 10.

1. Caso 10:
   • Coincide con el valor convertido (ya que Number('10') da como resultado 10), por lo que se ejecuta este bloque y se imprime 'Es un número 10'.
2. Después del break, el switch termina y no evalúa el caso default.

Resultado: Se imprime 'Es un número 10'.

4.3.9. Resumen de tipos de expresiones:

• Aritméticas: Operaciones matemáticas como suma, resta, etc.
• De comparación: Comparaciones como >=, <=, combinadas con switch(true).
• Lógicas: Expresiones con operadores lógicos (&&, ||, !).
• Funciones: Resultados de funciones personalizadas.
• Acceso a propiedades: Usar propiedades de objetos como valor en la expresión.
• Concatenación de cadenas: Unir varias cadenas para generar un valor dinámico.
• Condicionales ternarias: Usar operadores ternarios para comparar valores.
• Conversión de tipos: Convertir tipos de datos para hacer comparaciones exactas.

Estas expresiones te permiten crear switch más potentes y dinámicos, facilitando la toma de decisiones más compleja en tu código JavaScript.

4.4. ¿Que parámetros usa JavaScript al realizar estas comparaciones entre switch y case?

Es importante recordar que switch usa la comparación estricta (===), lo que significa que tanto el tipo de dato como el valor deben coincidir exactamente con los valores de los case.

Esto implica que no se realizará coerción de tipos (es decir, no se convertirá automáticamente de un tipo de dato a otro).

Ejemplo de comparación estricta:

let numero = '5';

switch (numero) {
  case 5:
    console.log('Número 5 (como número)');
    break;
  case '5':
    console.log('Número 5 (como string)');
    break;
}Lenguaje del código: JavaScript (javascript)

En este caso, el switch distinguirá entre el número 5 y la cadena '5' debido a la comparación estricta. Por lo tanto, en este ejemplo console.log() imprimirá ‘Número 5 (como string)’

4.5. Ventajas de usar expresiones en el switch:

1. Flexibilidad: Al permitir expresiones complejas, puedes hacer que un switch sea más dinámico y adaptable a múltiples situaciones, sin necesidad de escribir muchas líneas de código repetitivas o condicionales.
2. Simplificación del código: En lugar de tener múltiples condicionales if...else, puedes concentrar la lógica de varias expresiones en un solo switch, manteniendo el código más organizado.
3. Facilita el mantenimiento: En grandes aplicaciones, utilizar un switch con expresiones puede facilitar la legibilidad y el mantenimiento del código, al reducir la complejidad cuando múltiples evaluaciones dependen de cálculos o resultados dinámicos.

5. Entendiendo el fall-through en el condicional switch de JavaScript.

5.1. ¿Que es el fall-through?

El fall-through en un switch ocurre cuando no se incluye un break al final de un bloque de un case, lo que permite que el flujo de ejecución continúe hacia el siguiente caso sin detenerse. Esto puede ser útil en situaciones donde quieres que varios casos compartan la misma lógica, es decir, que realicen la misma acción.

5.2. ¿Cuándo se puede usar el fall-through?

Se puede utilizar cuando varios valores que se están evaluando en un switch deben ejecutar el mismo bloque de código. En lugar de duplicar el mismo código en múltiples case, puedes agrupar varios valores sin el uso de break, de modo que, cuando alguno de esos casos coincida, todos ellos ejecuten el mismo código.

5.3. Ejemplo típico de uso de condicional switch con fall-through:

Imagina que estamos construyendo un programa que clasifica los días de la semana en días laborales y fines de semana. Podemos aprovechar el fall-through para agrupar todos los días laborales y ejecutar el mismo código.

let dia = 'martes';

switch (dia) {
  case 'lunes':
  case 'martes':
  case 'miércoles':
  case 'jueves':
  case 'viernes':
    console.log('Es un día laboral');
    break;
  case 'sábado':
  case 'domingo':
    console.log('Es fin de semana');
    break;
  default:
    console.log('Día no válido');
}Lenguaje del código: JavaScript (javascript)

Explicación de este ejemplo:

1. Agrupación de casos:
   • Los días laborales ('lunes', 'martes', 'miércoles', 'jueves', y 'viernes') no tienen break entre ellos. Esto significa que si alguno de esos días es el valor de la variable dia, se ejecutará el mismo bloque de código: console.log('Es un día laboral').
2. Ejecución continua:
   • Cuando el valor de dia es 'martes', el código comienza desde el case 'lunes':, no encuentra break, por lo que continúa evaluando el siguiente case, hasta llegar al bloque de código que imprime «Es un día laboral».
3. Separación de casos con lógica diferente:
   • Los días de fin de semana ('sábado' y 'domingo') comparten otro bloque de código, que imprime «Es fin de semana».

5.4. ¿Cuándo NO usar el fall-through?

El fall-through puede ser confuso si no está claramente documentado o si se usa en casos donde los bloques de código deberían ser distintos. Es crucial asegurarse de que este comportamiento sea intencional y que no se deba a un olvido de los break. Si no necesitas que los casos compartan lógica, siempre usa break para evitar ejecuciones no deseadas.

5.5. Mejores prácticas usando fall-through:

1. Comenta el código: Si decides usar el fall-through, asegúrate de agregar comentarios para clarificar que es intencional. Esto mejora la legibilidad y evita errores futuros.
2. Simplificación: Aprovechar el fall-through es una buena manera de evitar código duplicado cuando varios valores deben ejecutar la misma lógica.

6. Anidación en el condicional swtich JavaScript.

6.1. ¿Que es la anidación de switch?

La anidación de switch es una técnica que se utiliza en situaciones donde es necesario realizar múltiples comparaciones dentro de una misma estructura de flujo.

Se refiere a cuando un switch está contenido dentro de otro switch, lo que permite manejar condiciones más complejas o jerárquicas. Aunque esta técnica puede ser poderosa, también puede volverse confusa si no se implementa correctamente, por lo que es esencial mantener la claridad en el código.

6.2. ¿Cuándo se usa la anidación de switch?

La anidación de switch se usa cuando la lógica de la aplicación requiere más de una decisión basada en valores diferentes. Es útil cuando un primer switch evalúa una condición, y dependiendo del resultado, un segundo switch evalúa otra.

6.3. Ejemplo típico de uso de una anidación de switch:

Imagina que estamos desarrollando un sistema que clasifica a las personas según su género y su rango de edad. Primero evaluaremos el género y luego, dependiendo del resultado, evaluaremos la edad para categorizar a la persona.

let genero = 'masculino';
let edad = 25;

switch (genero) {
  case 'masculino':
    switch (true) {
      case edad < 18:
        console.log('Es un niño');
        break;
      case edad >= 18 && edad < 30:
        console.log('Es un hombre joven');
        break;
      case edad >= 30:
        console.log('Es un hombre adulto');
        break;
      default:
        console.log('Edad no válida');
    }
    break;

  case 'femenino':
    switch (true) {
      case edad < 18:
        console.log('Es una niña');
        break;
      case edad >= 18 && edad < 30:
        console.log('Es una mujer joven');
        break;
      case edad >= 30:
        console.log('Es una mujer adulta');
        break;
      default:
        console.log('Edad no válida');
    }
    break;

  default:
    console.log('Género no válido');
}
Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Primer switch (genero):
   • Se evalúa la variable genero. Si el valor es 'masculino', se ejecuta el bloque correspondiente, y dentro de él hay un segundo switch que evalúa la edad. Lo mismo sucede si el género es 'femenino'.
2. Segundo switch (edad):
   • Dependiendo del valor de la edad, se ejecutan diferentes bloques de código para determinar si es un niño, un hombre joven, una mujer adulta, etc. El segundo switch está anidado dentro del primero.
3. Uso de switch (true) en el segundo switch:
   • Para realizar comparaciones más complejas (como rangos de edad), se usa switch (true). Esto permite comparar expresiones lógicas, y cuando una de ellas es verdadera, se ejecuta el código correspondiente.

6.4. Consideraciones y mejores prácticas para la anidación de switch:

1. Mantén la claridad del código: Aunque anidar switch puede ser útil, es importante que el código sea legible. A medida que anides más estructuras, puedes perder la claridad, lo que dificulta el mantenimiento y la comprensión por parte de otros desarrolladores.
   • Usa comentarios para explicar qué está evaluando cada switch.
   • Asegúrate de utilizar nombres de variables claros para que el flujo lógico sea fácil de seguir.
2. Evita anidar demasiados switch: Si tienes muchos niveles de anidación (tres o más), podría ser una señal de que necesitas reorganizar tu lógica. Tal vez sea mejor usar funciones separadas o incluso un enfoque más modular con if...else en lugar de switch anidados.
3. Revisar la eficiencia: Cuando hay múltiples switch anidados, cada uno implica una nueva evaluación. Si el código se vuelve demasiado complejo, podrías estar agregando un coste adicional de rendimiento. Por lo tanto, asegúrate de que la anidación sea realmente necesaria y eficiente para tu caso.
4. Usar valores bien definidos: Para evitar confusiones, intenta mantener los valores que se comparan en los switch lo más simples posible. Si la evaluación es demasiado compleja, puedes considerar descomponer la lógica en funciones auxiliares.

6.5. Alternativa a la anidación switch excesiva:

En algunos casos, puedes evitar el uso excesivo de switch anidados utilizando otras técnicas como:

• Funciones: Extraer la lógica de los bloques anidados en funciones independientes.
• Objetos de mapeo: Usar un objeto para mapear valores y evitar la necesidad de anidar switch (dependiendo del caso).

6.6. Beneficios de usar funciones:

• Mejor legibilidad: Cada función maneja una parte específica de la lógica, lo que hace que el código sea más fácil de leer.
• Reutilización: Las funciones pueden ser reutilizadas en otros lugares, lo que promueve la modularidad del código.

7. Comparación y diferencias entre condicional switch y if...else.

El uso de switch y if...else en JavaScript es común para manejar decisiones basadas en condiciones, pero cada estructura tiene sus propios puntos fuertes y es más adecuada en determinadas situaciones. Para elegir correctamente entre ambas, es importante entender sus diferencias, cómo funcionan y los casos en los que una es más ventajosa que la otra.

Comparación básica entre condicional switch y if...else:

7.1. Condiciones:

1. if...else:
   • El condicional if else se utiliza para evaluar expresiones booleanas. Esto significa que puede manejar cualquier tipo de condición que resulte en un valor verdadero o falso, incluyendo comparaciones complejas, rangos, condiciones múltiples, etc.
2. switch:
   • Está diseñado para comparar una expresión con múltiples valores posibles. Es útil cuando se necesita verificar un valor contra un conjunto definido de posibilidades específicas (como constantes o resultados directos).

7.2. Legibilidad y escalabilidad:

1. if...else:
   • Si tienes solo una o dos condiciones que verificar, if...else puede ser más claro y conciso. Sin embargo, cuando comienzas a agregar más condiciones, especialmente si son comparaciones de igualdad con valores específicos, el código puede volverse largo y difícil de leer.
2. switch:
   • Cuando necesitas comparar una expresión con varios valores específicos, un switch es mucho más legible que una cadena larga de if...else. Además, el switch proporciona una estructura más organizada y fácil de seguir visualmente.

7.3. Evaluación de condiciones complejas:

1. if...else:
   • Brilla en casos donde necesitas evaluar condiciones complejas o basadas en comparaciones de rangos, operadores lógicos (&&, ||), o cualquier otro tipo de lógica.
2. switch:
   • Está limitado a comparaciones de igualdad estricta (===). No puede manejar rangos o comparaciones complejas, aunque se pueden usar trucos como switch (true) para evaluar expresiones lógicas (aunque esto reduce la legibilidad).

7.4. Rendimiento:

1. switch:
   • En algunos casos, puede ser más eficiente que if...else cuando se trata de múltiples comparaciones de igualdad. Esto se debe a que muchos motores de JavaScript implementan optimizaciones internas para switch que no siempre se aplican a largas cadenas de if...else.
2. if...else:
   • Para un número reducido de comparaciones, no habrá una diferencia significativa de rendimiento, pero cuando tienes muchas condiciones, el switch puede ser más eficiente en ciertos motores de JavaScript.

Nota: En la mayoría de las aplicaciones, la diferencia de rendimiento es mínima, pero en casos de código con muchas comparaciones o alta exigencia de rendimiento, el switch puede ser una opción mejor.

7.5. Flexibilidad:

1. if...else:
   • Es extremadamente flexible y te permite manejar cualquier tipo de condición, desde simples comparaciones hasta operaciones lógicas y cálculos complejos. Si necesitas evaluar más de una condición en una expresión, o si las condiciones son heterogéneas, if...else es la mejor opción.
2. switch:
   • Es más rígido en comparación con if...else porque solo maneja comparaciones de igualdad estricta. Sin embargo, esto lo hace más adecuado para casos donde solo necesitas comparar un valor contra un conjunto definido de opciones conocidas de antemano.

Conclusión de la comparación del switch y if...else.

• Usa switch cuando tengas un valor que quieras comparar contra varios valores específicos. Esto hará que el código sea más limpio y eficiente.
• Usa if...else cuando las condiciones sean más complejas, involucren rangos o comparaciones múltiples, o cuando necesites mayor flexibilidad en la lógica de comparación.

Ambas estructuras tienen su lugar en el desarrollo de JavaScript, y la elección correcta depende de la naturaleza de las condiciones que necesitas evaluar.

8. Mejores prácticas en el uso de la condicional switch en JavaScript

El uso eficiente de la condicional switch puede mejorar la legibilidad, rendimiento y mantenimiento de tu código. A continuación, se detallan algunas mejores prácticas que debes tener en cuenta al trabajar con esta estructura.

8.1. Simplifica casos repetidos

En situaciones donde varios casos necesitan ejecutar el mismo bloque de código, es una buena práctica agrupar los casos que comparten la misma lógica. Esto reduce la repetición de código y mejora la legibilidad.

8.1.1. Ejemplo sin agrupar casos repetidos:

let fruta = 'naranja';

switch (fruta) {
  case 'manzana':
    console.log('Es una fruta roja');
    break;
  case 'cereza':
    console.log('Es una fruta roja');
    break;
  case 'frutilla':
    console.log('Es una fruta roja');
    break;
  case 'naranja':
    console.log('Es una fruta naranja');
    break;
  default:
    console.log('Fruta desconocida');
}Lenguaje del código: JavaScript (javascript)

Este código es funcional, pero repetitivo. Los tres primeros casos (manzana, cereza y frutilla) ejecutan el mismo bloque de código. En lugar de escribir múltiples veces la misma acción, puedes agrupar los case que comparten la misma lógica.

8.1.2. Ejemplo agrupando casos repetidos:

let fruta = 'naranja';

switch (fruta) {
  case 'manzana':
  case 'cereza':
  case 'frutilla':
    console.log('Es una fruta roja');
    break;
  case 'naranja':
    console.log('Es una fruta naranja');
    break;
  default:
    console.log('Fruta desconocida');
}Lenguaje del código: JavaScript (javascript)

En este ejemplo, los casos que corresponden a frutas rojas están agrupados, lo que hace el código más limpio y fácil de mantener.

8.2. Usa el default como backup

El caso default actúa como una cobertura o plan de respaldo en caso de que ninguno de los casos especificados en el switch coincida con la expresión evaluada. Es una buena práctica incluir siempre un caso default para manejar condiciones inesperadas o valores no previstos.

Esto ayuda a garantizar que tu código pueda reaccionar de manera adecuada cuando se encuentre con una situación no cubierta por los casos definidos.

8.2.1. Ejemplo sin default:

let dia = 7;

switch (dia) {
  case 1:
    console.log('Lunes');
    break;
  case 2:
    console.log('Martes');
    break;
  case 3:
    console.log('Miércoles');
    break;
  // Falta el caso default
}Lenguaje del código: JavaScript (javascript)

Si el valor de dia no coincide con ninguno de los casos definidos (1, 2 o 3), no sucederá nada. Esto puede ser un problema, especialmente si el valor es inesperado.

8.2.2. Ejemplo con default:

let dia = 7;

switch (dia) {
  case 1:
    console.log('Lunes');
    break;
  case 2:
    console.log('Martes');
    break;
  default:
    console.log('Día desconocido');
}Lenguaje del código: JavaScript (javascript)

Aquí, el caso default captura cualquier valor que no sea 1 o 2, proporcionando un mensaje claro cuando el valor no se reconoce.

Nota: Aunque puede parecer opcional, el uso del default es altamente recomendable en la mayoría de los casos. Incluso si el valor es inesperado, el default puede ayudarte a diagnosticar el problema, mostrando un mensaje o tomando una acción por defecto.

8.3. Comenta tu código:

En estructuras switch complejas, con muchos casos y lógica extensa, el código puede volverse difícil de entender. El uso de comentarios claros ayuda a mantener la legibilidad y facilita el mantenimiento en el futuro, especialmente cuando otros desarrolladores (o incluso tú mismo en el futuro) revisen el código.

Por ejemplo, si tienes un switch que maneja diferentes acciones para un sistema de gestión de usuarios, puede ser útil incluir comentarios que expliquen lo que hace cada bloque de case.

8.3.1. Ejemplo de un switch comentado:

let accion = 'actualizar';

switch (accion) {
  // Maneja el caso de crear un nuevo usuario
  case 'crear':
    console.log('Creando un nuevo usuario...');
    break;
  
  // Maneja el caso de actualizar la información del usuario
  case 'actualizar':
    console.log('Actualizando los datos del usuario...');
    break;
  
  // Maneja el caso de eliminar un usuario
  case 'eliminar':
    console.log('Eliminando el usuario...');
    break;
  
  // Caso por defecto para cualquier acción no reconocida
  default:
    console.log('Acción no reconocida');
}Lenguaje del código: JavaScript (javascript)

Los comentarios facilitan la comprensión del código para otros desarrolladores o para ti mismo cuando lo vuelvas a revisar más adelante. También pueden ayudarte a evitar errores o malentendidos.

8.4. Evita la duplicación de código

Otra buena práctica es evitar la duplicación de código dentro de los case del switch. Si diferentes casos requieren realizar pasos similares, considera abstraer esas partes comunes en una función.

8.4.1. Ejemplo de duplicación de código:

let accion = 'crear';

switch (accion) {
  case 'crear':
    console.log('Procesando...');
    console.log('Creando un nuevo usuario...');
    break;
  
  case 'actualizar':
    console.log('Procesando...');
    console.log('Actualizando los datos del usuario...');
    break;
  
  case 'eliminar':
    console.log('Procesando...');
    console.log('Eliminando el usuario...');
    break;
  
  default:
    console.log('Acción no reconocida');
}Lenguaje del código: JavaScript (javascript)

En este caso, el mensaje «Procesando…» se repite en cada bloque. En lugar de duplicar ese código, es mejor moverlo fuera del switch o a una función.

8.4.2. Ejemplo con función para evitar duplicación:

function procesarAccion(accion) {
  console.log('Procesando...');
  
  switch (accion) {
    case 'crear':
      console.log('Creando un nuevo usuario...');
      break;
    
    case 'actualizar':
      console.log('Actualizando los datos del usuario...');
      break;
    
    case 'eliminar':
      console.log('Eliminando el usuario...');
      break;
    
    default:
      console.log('Acción no reconocida');
  }
}

procesarAccion('crear');Lenguaje del código: JavaScript (javascript)

Ahora, el código es más limpio y fácil de mantener. Si necesitas cambiar algo relacionado con el mensaje «Procesando…», solo tienes que hacerlo en un lugar.

8.5. Resumen de las mejores prácticas:

• Agrupa los casos repetidos para evitar duplicaciones innecesarias y mejorar la legibilidad.
• Incluye siempre un default para manejar casos imprevistos o valores desconocidos.
• Comenta tu código en estructuras switch más complejas para hacer el flujo más claro y entendible.
• Evita la duplicación de código, utilizando funciones para tareas repetitivas. Esto hará que tu código sea más fácil de mantener y mejorar.

Implementar estas prácticas hará que tus switch sean más eficientes, claros y fáciles de modificar en el futuro.

9. Ejemplos reales donde es común usar el condicional switch en JavaScript.

Aquí tienes algunos ejemplos comunes y reales donde se utilizan las estructuras switch en el desarrollo web. Estos ejemplos son situaciones que suelen encontrarse en proyectos web, y muestran cómo las estructuras switch pueden hacer que el código sea más limpio y eficiente en lugar de utilizar múltiples condiciones if...else.

9.1. Manejo de eventos de usuario

Un caso común en el desarrollo web es manejar diferentes eventos que el usuario pueda activar, como hacer clic en botones o seleccionar opciones en un formulario. Dependiendo del tipo de evento, puedes realizar diferentes acciones.

9.1.1. Ejemplo: Manejo de clics en botones

function manejarEvento(evento) {
  switch (evento) {
    case 'click':
      console.log('El usuario hizo clic en el botón.');
      break;
    case 'mouseover':
      console.log('El cursor pasó sobre el botón.');
      break;
    case 'dblclick':
      console.log('El usuario hizo doble clic en el botón.');
      break;
    default:
      console.log('Evento desconocido.');
  }
}

// Simulación de un evento de clic
manejarEvento('click'); // Salida: El usuario hizo clic en el botón.Lenguaje del código: JavaScript (javascript)

Esto es útil cuando tienes varios tipos de eventos que pueden dispararse desde un solo elemento de la interfaz.

9.2. Navegación por rutas (en un router)

Cuando construyes una aplicación con JavaScript (por ejemplo, una Single Page Application o SPA), a menudo manejas la navegación entre diferentes secciones o vistas de la aplicación. Un switch es muy útil para determinar qué vista mostrar basada en la ruta actual.

9.2.1. Ejemplo: Enrutamiento básico:

function navegar(ruta) {
  switch (ruta) {
    case '/inicio':
      console.log('Mostrar página de inicio');
      break;
    case '/perfil':
      console.log('Mostrar página de perfil');
      break;
    case '/configuracion':
      console.log('Mostrar página de configuración');
      break;
    default:
      console.log('404 - Página no encontrada');
  }
}

// Simulación de navegación
navegar('/perfil'); // Salida: Mostrar página de perfilLenguaje del código: JavaScript (javascript)

Esto es un ejemplo básico de cómo un switch puede ayudar en el enrutamiento de vistas según las URL.

9.3. Manejo de respuestas de una API.

Cuando trabajas con APIs, es común recibir diferentes códigos de estado HTTP (como 200 para éxito o 404 para «no encontrado»). El uso de un switch permite manejar estas respuestas de manera clara y estructurada.

9.3.1. Ejemplo: Manejo de códigos de estado HTTP:

function manejarRespuestaHttp(codigo) {
  switch (codigo) {
    case 200:
      console.log('Solicitud exitosa');
      break;
    case 201:
      console.log('Recurso creado');
      break;
    case 404:
      console.log('Recurso no encontrado');
      break;
    case 500:
      console.log('Error en el servidor');
      break;
    default:
      console.log('Código de estado desconocido');
  }
}

// Simulación de una respuesta HTTP
manejarRespuestaHttp(404); // Salida: Recurso no encontradoLenguaje del código: JavaScript (javascript)

Este patrón es muy útil en aplicaciones web que dependen de APIs externas para mostrar datos.

9.4. Determinar el tipo de usuario y sus permisos

En aplicaciones donde los usuarios tienen diferentes roles (administrador, usuario, invitado), puedes usar un switch para definir qué permisos o acciones están permitidos para cada tipo de usuario.

9.4.1. Ejemplo: Manejo de roles de usuario:

function verificarPermisos(rol) {
  switch (rol) {
    case 'admin':
      console.log('Acceso total: puede agregar, editar y eliminar datos.');
      break;
    case 'usuario':
      console.log('Acceso limitado: puede ver y editar datos.');
      break;
    case 'invitado':
      console.log('Acceso restringido: solo puede ver datos.');
      break;
    default:
      console.log('Rol desconocido, acceso denegado.');
  }
}

// Simulación de verificación de permisos
verificarPermisos('usuario'); // Salida: Acceso limitado: puede ver y editar datos.Lenguaje del código: JavaScript (javascript)

Este enfoque ayuda a mantener una estructura clara para la gestión de permisos de usuario.

9.5. Control de formato de fecha u hora

En muchas aplicaciones web, a veces es necesario mostrar la fecha en diferentes formatos o según la zona horaria del usuario. El uso de un switch puede ayudarte a elegir el formato correcto.

9.5.1. Ejemplo: Formateo de fecha según la región

function formatearFecha(region) {
  const fecha = new Date();
  
  switch (region) {
    case 'es-ES':
      console.log(fecha.toLocaleDateString('es-ES')); // Formato español: dd/mm/aaaa
      break;
    case 'en-US':
      console.log(fecha.toLocaleDateString('en-US')); // Formato estadounidense: mm/dd/aaaa
      break;
    case 'en-GB':
      console.log(fecha.toLocaleDateString('en-GB')); // Formato británico: dd/mm/aaaa
      break;
    default:
      console.log('Formato de región no soportado');
  }
}

// Simulación de formato de fecha
formatearFecha('es-ES'); // Salida: 03/10/2024Lenguaje del código: JavaScript (javascript)

Esto es útil cuando tienes una aplicación que se utiliza en diferentes países y debes manejar formatos de fecha localizados.

9.6. Validación de formularios

En formularios con múltiples tipos de campos (nombre, email, teléfono, etc.), puedes usar un switch para validar el tipo de campo y aplicar la lógica correspondiente a cada tipo.

9.6.1. Ejemplo: Validación de campos de un formulario

function validarCampo(tipo, valor) {
  switch (tipo) {
    case 'nombre':
      if (valor.length < 2) {
        console.log('El nombre es muy corto');
      } else {
        console.log('Nombre válido');
      }
      break;
    case 'email':
      const emailRegex = /\S+@\S+\.\S+/;
      if (!emailRegex.test(valor)) {
        console.log('Email no válido');
      } else {
        console.log('Email válido');
      }
      break;
    case 'telefono':
      const telefonoRegex = /^[0-9]{10}$/;
      if (!telefonoRegex.test(valor)) {
        console.log('Teléfono no válido');
      } else {
        console.log('Teléfono válido');
      }
      break;
    default:
      console.log('Campo no reconocido');
  }
}

// Simulación de validación de campos
validarCampo('email', '[email protected]'); // Salida: Email válidoLenguaje del código: JavaScript (javascript)

Aquí, dependiendo del tipo de campo, se ejecuta una lógica de validación distinta.

9.7. Calculadora básica

Otro uso común es la implementación de una calculadora básica que pueda realizar operaciones matemáticas según el operador ingresado.

9.7.1. Ejemplo completo creando una calculadora con switch:

Por ejemplo: Usando una estructura switch podemos crear la siguiente calculadora

Explicación de cómo funciona la calculadora usando la estructura switch:

En este ejemplo de calculadora, utilizamos la estructura switch en JavaScript para gestionar las operaciones aritméticas básicas: suma, resta, multiplicación y división.

A continuación, te explico cómo es que logramos crear esta calculadora y cómo interactúan los elementos de HTML, CSS y JavaScript:

NOTA: Sigue el punto 5 del siguiente artículo sobre como usar VSCode para crear una página web propia con dicha calculador a y visualizarla por ti mismo. Solo debes ir copiando y pegando los códigos que proporcionamos a continuación en donde corresponda. Espero te animes!!!!

1. HTML: La estructura visual de la calculadora

El código HTML define la estructura básica de la calculadora:

Si sigues la recomendación de la NOTA anterior, este es el HTML que deberías copiar y pegar dentro del <body>:

  <div class="calculadora">
    <h1>Calculadora Básica</h1>
    
    <div class="pantalla">
      <input type="text" id="resultado" readonly>
    </div>
    
    <div class="botones">
      <button class="btn-numero" onclick="agregarValor('7')">7</button>
      <button class="btn-numero" onclick="agregarValor('8')">8</button>
      <button class="btn-numero" onclick="agregarValor('9')">9</button>
      <button class="btn-operador" onclick="agregarOperador('+')">+</button>
      
      <button class="btn-numero" onclick="agregarValor('4')">4</button>
      <button class="btn-numero" onclick="agregarValor('5')">5</button>
      <button class="btn-numero" onclick="agregarValor('6')">6</button>
      <button class="btn-operador" onclick="agregarOperador('-')">-</button>
      
      <button class="btn-numero" onclick="agregarValor('1')">1</button>
      <button class="btn-numero" onclick="agregarValor('2')">2</button>
      <button class="btn-numero" onclick="agregarValor('3')">3</button>
      <button class="btn-operador" onclick="agregarOperador('*')">×</button>
      
      <button class="btn-numero" onclick="agregarValor('0')">0</button>
      <button class="btn-operador" onclick="agregarOperador('/')">÷</button>
      <button class="btn-operador" onclick="calcular()">=</button>
      <button class="btn-operador" onclick="limpiar()">C</button>
    </div>
  </div>Lenguaje del código: JavaScript (javascript)

• El input con el id="resultado" es donde se muestran los números ingresados y el resultado final.
• Los botones (<button>) son los que permiten ingresar los números, operadores aritméticos y realizar la operación o borrar los valores.
• Cada botón tiene un evento onclick que ejecuta una función de JavaScript cuando el usuario hace clic, como agregarValor(), agregarOperador() y calcular().

2. CSS: Estilizando la calculadora

El CSS proporciona el estilo y la disposición para que la calculadora sea visualmente atractiva. Se organiza en una cuadrícula para que los botones estén distribuidos uniformemente, y también se añade un estilo distintivo para los botones de operadores (+, -, *, /) con el color de fondo naranja.

Si sigues la recomendación de la NOTA anterior, este es el CSS que deberías copiar y pegar dentro del <style>:

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  margin: 0;
}

.calculadora {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #fff;
}

.pantalla {
  margin-bottom: 10px;
}

#resultado {
  width: 100%;
  padding: 10px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  text-align: right;
}

.botones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  padding: 20px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-numero {
  background-color: #f0f0f0;
}

.btn-operador {
  background-color: #ff9500;
  color: #fff;
}

button:hover {
  opacity: 0.8;
}Lenguaje del código: CSS (css)

3. JavaScript: Controlando la lógica de la calculadora

El corazón de la calculadora está en el archivo JavaScript, donde utilizamos variables para almacenar los valores ingresados y el operador seleccionado, y luego utilizamos switch para realizar las operaciones aritméticas.

Si sigues la recomendación de la NOTA anterior, este es el JS completo que deberías copiar y pegar dentro del <script>:

let operacionActual = '';
let operador = '';
let valor1 = '';
let valor2 = '';

function agregarValor(valor) {
  if (operador === '') {
    valor1 += valor;
    document.getElementById('resultado').value = valor1;
  } else {
    valor2 += valor;
    document.getElementById('resultado').value = valor2;
  }
}

function agregarOperador(op) {
  if (valor1 !== '') {
    operador = op;
    document.getElementById('resultado').value = '';
  }
}

function calcular() {
  let resultado = 0;
  
  switch (operador) {
    case '+':
      resultado = parseFloat(valor1) + parseFloat(valor2);
      break;
    case '-':
      resultado = parseFloat(valor1) - parseFloat(valor2);
      break;
    case '*':
      resultado = parseFloat(valor1) * parseFloat(valor2);
      break;
    case '/':
      resultado = parseFloat(valor1) / parseFloat(valor2);
      break;
    default:
      resultado = 'Error';
  }

  document.getElementById('resultado').value = resultado;
  reiniciar();
}

function limpiar() {
  document.getElementById('resultado').value = '';
  reiniciar();
}

function reiniciar() {
  operacionActual = '';
  operador = '';
  valor1 = '';
  valor2 = '';
}Lenguaje del código: JavaScript (javascript)

Explicación paso a paso del ejemplo de la calculador:

• Capturando los valores:
  • La función agregarValor(valor) se encarga de ir acumulando los números que ingresa el usuario. Si aún no se ha seleccionado un operador, los valores se almacenan en la variable valor1. Si ya se ha seleccionado un operador, los valores se almacenan en valor2.
• Seleccionando el operador:
  • La función agregarOperador(op) es activada cuando el usuario selecciona uno de los operadores aritméticos (+, -, *, /). Esta función establece la variable operador para definir qué operación se ejecutará cuando se haga clic en el botón =.
• Realizando la operación:
  • Cuando el usuario hace clic en el botón =, se ejecuta la función calcular(), la cual es la que contiene la estructura switch encargada de realizar la operación.
  • Aquí es donde entra la estructura switch:

switch (operador) {
    case '+':
        resultado = parseFloat(valor1) + parseFloat(valor2);
        break;
    case '-':
        resultado = parseFloat(valor1) - parseFloat(valor2);
        break;
    case '*':
        resultado = parseFloat(valor1) * parseFloat(valor2);
        break;
    case '/':
        resultado = parseFloat(valor1) / parseFloat(valor2);
        break;
    default:
        resultado = 'Error';
}Lenguaje del código: JavaScript (javascript)

• Dependiendo del operador almacenado (+, -, * o /), el bloque switch ejecuta la operación correspondiente entre valor1 y valor2.
• Si el operador es +, se suma; si es -, se resta, y así sucesivamente.
• El resultado de la operación se almacena en la variable resultado, que luego se muestra en el campo input (id="resultado") de la calculadora.
• Manejo de errores:
  • El bloque default en el switch asegura que si no se selecciona un operador válido, se muestre «Error» en la calculadora.

4. FUNCIONES ADICIONALES:

• Limpiar: La función limpiar() se encarga de borrar los valores almacenados y el contenido del input para que el usuario pueda realizar una nueva operación.
• Reiniciar después de calcular: Después de cada cálculo, la función reiniciar() limpia las variables para que se pueda comenzar una nueva operación.

5. ¿PORQUÉ USAMOS SWITCH EN LUGAR DE IF…ELSE?

Usamos la estructura switch en este caso porque es más clara y legible cuando se trata de comparar una única expresión (operador) con múltiples valores posibles. Si hubiéramos usado if...else, el código sería más largo y menos eficiente en términos de legibilidad, ya que tendríamos que escribir múltiples condiciones if (operador === '+'), else if (operador === '-'), y así sucesivamente.

RESUMEN DEL EJEMPLOS DE LA CACULADORA:

En resumen, la calculadora utiliza:

• HTML para crear la interfaz visual.
• CSS para estilizar los botones y la pantalla.
• JavaScript para manejar la lógica de la calculadora, donde la estructura switch se usa para comparar el operador seleccionado y realizar la operación aritmética correcta entre dos valores.

Este enfoque modular y claro hace que el switch sea perfecto para manejar múltiples opciones específicas (como operaciones aritméticas) de manera eficiente.

10. ¿Se usa comúnmente este condicional switch con Javascript en WordPress?

El uso de la estructura switch en JavaScript no es una práctica que se vea muy común en la creación básica de páginas web en WordPress, ya que WordPress está más enfocado en el manejo de contenido y su funcionalidad principal se basa en PHP.

Sin embargo, JavaScript se usa mucho en WordPress para agregar interactividad y mejorar la experiencia del usuario, especialmente con temas avanzados y plugins. Dependiendo del caso, puede ser necesario usar la estructura switch en JavaScript, pero no es algo que sea común en todos los desarrollos de WordPress.

10.1. Casos en los que sí puede usarse switch en JavaScript dentro de WordPress:

1. Interacción con el DOM (Document Object Model): Si estás creando funcionalidades personalizadas para tu sitio de WordPress que requieren interacción directa con elementos HTML, como menús dinámicos, sliders, o formularios, podrías usar un switch en JavaScript para gestionar distintas acciones o eventos.
   • Ejemplo: Si tienes un menú con diferentes opciones y quieres ejecutar una acción diferente dependiendo del botón que se pulse, podrías usar un switch para comparar el valor del botón seleccionado y ejecutar la acción correspondiente.

switch (opcionSeleccionada) {
    case 'inicio':
        mostrarInicio();
        break;
    case 'contacto':
        mostrarContacto();
        break;
    case 'servicios':
        mostrarServicios();
        break;
    default:
        mostrarDefault();
}Lenguaje del código: JavaScript (javascript)

2. Plugins de Formularios o de Interacción de Usuario: Si estás personalizando formularios o creando plugins que interactúan con el usuario, puedes usar switch en JavaScript para gestionar las respuestas o comportamientos del formulario. Esto es útil si, por ejemplo, según la opción que el usuario elija, el formulario tiene que mostrar campos adicionales o diferentes mensajes.
3. Carga de scripts condicionales: Dependiendo de la página o el tipo de contenido que se está mostrando en WordPress, puedes usar un switch en JavaScript para cargar ciertos scripts o comportamientos solo en casos específicos. Esto es más eficiente que cargar todos los scripts para todas las páginas.
4. Gestión de eventos del navegador: Al manejar eventos del navegador, como clics, desplazamientos o cambios en el tamaño de la ventana, puedes usar switch en JavaScript para gestionar múltiples casos con un código más limpio y organizado.

Ejemplo de uso común en WordPress:

Supongamos que en tu tema de WordPress quieres gestionar qué ocurre cuando el usuario selecciona una opción en un formulario de contacto, dependiendo del tipo de consulta que esté realizando. Podrías usar JavaScript con un switch para definir diferentes respuestas según el caso seleccionado:

document.getElementById('tipoConsulta').addEventListener('change', function() {
    let tipoConsulta = this.value;
    switch (tipoConsulta) {
        case 'soporte':
            mostrarFormularioSoporte();
            break;
        case 'ventas':
            mostrarFormularioVentas();
            break;
        case 'otros':
            mostrarFormularioOtros();
            break;
        default:
            mostrarFormularioDefault();
    }
});Lenguaje del código: JavaScript (javascript)

10.2. ¿Es común en todas las webs creadas con WordPress?

Para los usuarios que solo usan WordPress para crear sitios web de contenido o blogs sin personalizaciones profundas, el uso de switch en JavaScript es raro.

Pero para desarrolladores avanzados que crean temas o plugins personalizados, y que buscan añadir interactividad o lógica dinámica al frontend del sitio, el uso de switch en JavaScript puede ser bastante útil.

10.3. Conclusión sobre el uso de switch en el desarrollo web con WordPress:

Aunque el switch en JavaScript no es algo que se use en todas las páginas de WordPress, es útil en casos específicos como la personalización de temas, plugins o en la interacción con los usuarios.

No es obligatorio, pero es una herramienta potente cuando se necesita manejar múltiples opciones o casos de manera estructurada y eficiente dentro del desarrollo de un sitio web en WordPress.

11. Preguntas frecuentes y resumen sobre condicional switch en JS.