Curso gratuito de JavaScript. Regístrate para hacer un seguimiento de tu progreso →

JavaScript: Estructura Switch

Muchos lenguajes, además de la estructura condicional if, incluyen el switch. Es una versión especializada del if, diseñada para situaciones particulares. Por ejemplo, tiene sentido utilizarlo cuando hay una cadena de if else con comprobaciones de igualdad. Por ejemplo:

if (status === 'processing') {
  // Hacer algo
} else if (status === 'paid') {
  // Hacer algo más
} else if (status === 'new') {
  // Hacer algo diferente
} else {
  // Hacer algo más
}

Esta comprobación compuesta tiene una característica distintiva: cada rama aquí es una comprobación del valor de la variable status. El switch permite escribir este código de forma más concisa y expresiva:

switch (status) {
  case 'processing': // status === processing
    // Hacer algo
    break;
  case 'paid': // status === paid
    // Hacer algo más
    break;
  case 'new': // status === new
    // Hacer algo diferente
    break;
  default: // else
    // Hacer algo más
}

El switch es una estructura bastante compleja en términos de la cantidad de elementos que la componen:

  • Una descripción externa que incluye la palabra clave switch. La variable cuyos valores seleccionará el switch para determinar el comportamiento. Y llaves para las opciones de selección.
  • Las construcciones case y default, dentro de las cuales se describe el comportamiento para diferentes valores de la variable considerada. Cada case corresponde a un if en el ejemplo anterior. default es una situación especial que corresponde a la rama else en las estructuras condicionales. No es obligatorio especificar default (pero el linter siempre lo recomienda).
  • break se utiliza para evitar la "caída". Si no se especifica, después de ejecutar el case correspondiente, la ejecución pasará al siguiente case, y así sucesivamente hasta el siguiente break más cercano o hasta el final del switch.

Las llaves en el switch no definen un bloque de código como en otros lugares. Dentro de él, sólo se permite la sintaxis que se muestra arriba. Es decir, se pueden usar case o default. Pero dentro de cada case (y default) la situación es diferente. Aquí se puede ejecutar cualquier código arbitrario:

switch (count) {
  case 1:
    // Hacer algo útil
    break;
  case 2:
    // Hacer algo útil
    break;
  default:
    // Hacer algo
}

A veces, el resultado obtenido dentro de un case es el final de la ejecución de la función que contiene el switch. En este caso, es necesario devolverlo de alguna manera al exterior. Hay dos formas de resolver este problema.

La primera es crear una variable antes del switch, asignarle un valor en los case y luego, al final, devolver el valor de esa variable al exterior.

(count) => {
  // Declarar una variable
  let result;

  // Asignar un valor
  switch (count) {
    case 1:
      result = 'one';
      break;
    case 2:
      result = 'two';
      break;
    default:
      result = null;
  }

  // Devolver el valor
  return result;
};

La segunda forma es más simple y corta. En lugar de crear una variable, el case permite hacer un retorno normal de la función dentro de él. Y como después de return no se ejecuta ningún código, podemos prescindir del break:

(count) => {
  switch (count) {
    case 1:
      return 'one';
    case 2:
      return 'two';
    default:
      return null;
  }
};

https://replit.com/@hexlet/js-basics-switch

Aunque el switch se encuentra en el código, técnicamente siempre se puede prescindir de él. El beneficio clave de su uso es que expresa mejor la intención del programador cuando se necesitan comprobar valores específicos de una variable. Aunque el código físicamente se vuelve un poco más largo, es más fácil de leer en comparación con los bloques else if.

Tarea

Implementa la función getNumberExplanation(), que recibe un número como entrada y devuelve una explicación para ese número. Si no hay una explicación para el número, se devuelve just a number. Solo hay explicaciones para los siguientes números:

  • 666 - devil number
  • 42 - answer for everything
  • 7 - prime number

Ejemplos de llamadas a la función:

getNumberExplanation(8);   // just a number
getNumberExplanation(666); // devil number
getNumberExplanation(42);  // answer for everything
getNumberExplanation(7);   // prime number
¿El ejercicio no pasa la prueba, qué debo hacer? 😶

Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.

Mi código funciona en mi entorno, pero no aquí 🤨

Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.

Mi código es diferente a la solución del profesor 🤔

Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.

En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.

Leí la lección, pero no entendí nada 🙄

Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.

Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.

Consejos útiles


¿Encontraste un error? ¿Quieres añadir algo? Las solicitudes de extracción son bienvenidas. https://codica.la/errores
Si te encuentras con dificultades y no sabes qué hacer, pregunta en nuestra gran y amigable comunidad