Switch

Clase 12 de 99 • 30 días de JavaScript

La estructura de control switch permite ejecutar diferentes bloques de código en función de un valor específico. Es una alternativa a la estructura if-else para casos en los que hay varios valores posibles para una variable y se desea ejecutar diferentes acciones en función de cada valor manteniendo legible el código.

La sintaxis básica de una estructura "switch" es la siguiente:

switch (variable) {
	case valor1:
	  // código a ejecutar si variable es igual a valor1
	  break;
	case valor2:
	  // código a ejecutar si variable es igual a valor2
	  break;
	default:
	  // código a ejecutar si variable no es igual a ninguno de los valores anteriores
}

La variable especificada en el "switch" se compara con cada uno de los casos especificados. Si se encuentra una coincidencia, se ejecutará el código dentro del bloque correspondiente. Es importante notar que se utiliza la palabra clave "break" al final de cada bloque de código para indicar que se debe salir del "switch" una vez que se ha ejecutado el código correspondiente. Si no se incluye "break", el código seguirá ejecutándose en los siguientes casos.

Por ejemplo, el siguiente código imprimirá un mensaje diferente en la consola dependiendo del valor de la variable "dia":

const dia = "lunes";
switch (dia) {
  case "lunes":
    console.log("Hoy es lunes");
    break;
  case "martes":
    console.log("Hoy es martes");
    break;
  case "miercoles":
    console.log("Hoy es miércoles");
    break;
  default:
    console.log("Hoy no es lunes, martes o miércoles");
}

En este ejemplo, la variable "dia" tiene un valor de "lunes", por lo que se ejecutará el código dentro del primer bloque y se imprimirá "Hoy es lunes" en la consola. Si la variable "dia" tuviera un valor diferente, como "martes" o "miercoles", se ejecutaría el código dentro del bloque correspondiente y se imprimiría el mensaje correspondiente en la consola. Si la variable "dia" tuviera un valor que no coincide con ninguno de los casos especificados, se ejecutaría el código dentro del bloque "default" y se imprimiría el mensaje "Hoy no es lunes, martes o miércoles" en la consola.

También es posible hacer diferentes validaciones dentro los casos del switch. Por ejemplo:

let numero = "12";
switch (true) {
  case numero > 100:
    console.log("El valor es mayor a 100");
    break;
  case numero % 2 === 0:
    console.log("El valor es multiplo de 2");
    break;
  default:
    console.log("El valor no cumple con ninguna de las características");
}

Todo esto y más lo puedes aprender en el Curso Básico de JavaScript

Comentarios

Luis Castro

student•

Aquí te dejo algunos datos curiosos sobre la estructura de control switch en JavaScript:

El uso de la instrucción break después de cada caso es importante, ya que evita que se ejecuten los casos siguientes una vez que se cumple una condición, o que la estructura no pare de ejecutarse. .
La estructura switch también puede incluir un caso predeterminado default que se ejecutará si no se cumple ninguna de las condiciones en los casos anteriores. .
A diferencia de las sentencias if-else, switch solo evalúa una vez la expresión que se pasa como parámetro, lo que lo hace más eficiente para evaluar una misma expresión en múltiples casos. .
En JavaScript, el valor evaluado en la estructura switch puede ser de cualquier tipo de datos, no solo números enteros como en otros lenguajes de programación. .
La estructura switch no es muy común en código moderno de JavaScript, ya que en muchos casos se puede utilizar una solución más limpia y legible usando objetos o matrices asociativas.

Ivan Tequia

student•

Gracias por la aclaración de default, fue muy oportuna!

Ricardo Samael Guzman Alejandro

student•

carreando el curso con tus aportes, gracias!!!

Nicolas Martinez

student•

bueno dejo mi aporte y duda al mismo tiempo. Cuando empecé en la carrera de ingeniería de sistemas un profesor nos dijo que no era buena práctica usar break y solo nos explicó que el código no debía ser cortado bruscamente mas no nos dio detalles, en todos los casos que he usado break sé que he podido usar un return u otra anotación para no usar break. quizás fuese un consejo antiguo si alguien pudiera aportar seria increíble, siempre me quedé con la duda y nunca pude usar break sin sentir que algo malo podría pasar en mi código.

José Fernando Fuentes Roa

student•

Hola Nicolás, para el caso del switch el uso de break es indispensable ya que no anidarlo dentro de los casos hará que la estructura de control no funcione como debería, puedes encontrar más información en la documentación. Ahora, el uso del break tanto en JavaScript o en otros lenguajes como Python, se realiza para terminar estructuras de control (ciclos for, while o switch, es lo que encontré en una breve revisión de Google). Yo personalmente no considero que sea malo usar break, sí lo necesito usar en mi código. Lo que si te recomiendo es que siempre revises en la documentación del lenguaje que estás utilizando cuando tengas dudas de sí es posible usar cierta funcionalidad o no. No sabes cuantos problemas se ahorra uno revisando documentación. Saludos y nunca pares de aprender 😎

Rubén Ernesto Aragón Gil

student•

Para los que tienen memoria de corto plazo y olvidan todo. .

El operador "%" se conoce como el operador de módulo o resto. Devuelve el resto de la división de dos números. Aquí tienes un ejemplo de cómo usarlo:

```javascript
// Ejemplo 1:
var resultado = 10 % 3;
console.log(resultado);  // Output: 1

// Ejemplo 2:
var num1 = 23;
var num2 = 7;
var resto = num1 % num2;
console.log(resto);  // Output: 2


En el primer ejemplo, se calcula el resto de la división de 10 por 3, que es igual a 1. En el segundo ejemplo, se calcula el resto de la división de 23 por 7, que es igual a 2.

El operador "%" también se puede utilizar con variables. Es importante tener en cuenta que el resultado siempre tendrá el mismo signo que el divisor. Por ejemplo, `-10 % 3` dará como resultado `-1`, ya que el divisor es positivo.

Espero que esto te ayude a entender cómo usar el operador "%" en JavaScript. Si tienes alguna otra pregunta, no dudes en preguntar.

Lautaro Olivero

student•

Hola a todos!, Tengo una duda con respecto al ultimo ejemplo. Lo que no logro entender es porque el paramento que recibe switch es 'true' y no el nombre de la variable, es decir, 'numero'. En el caso anterior de los días si funciona de esa manera y recibe la variable "día". Desde ya muchas gracias, los leo 👀

Leonardo de los angeles Espinoza Hernandez

student•

¡Buena observación! / Antes de darte la respuesta, déjame hacerte la siguiente pregunta ¿Cómo compararías si un número cumple cierta condición dentro de un caso del switch? / Ahora sí, aquí la explicación. Una de las grandes desventajas de switch es que solo te permite el evaluar el valor de una sola variable como lo viste en el primer ejemplo, si lo que quieres es evaluar a detalle condiciones más especiales o evaluar el contenido de 2 o más variables forzosamente deberás poner un true en el switch para que siempre entremos en ese bloque de código. Ejemplo, revisemos si 2 números son mayores que 5

function evaluateNumbers(num1, num2){
	// ponemos true porque solo acepta un valor el switch
	switch(true){
		// Y hacemos las evaluaciones correspondientes
		case num1 > 5 && num 2 > 5:
			return true
		default:
			return false
	}
}

En el caso del ejemplo de la lectura, no podemos simplemente poner el > 100 dentro del case, ya que no funcionaría

let numero = "12";
switch (numbero) {
  case > 100:
    console.log("El valor es mayor a 100");
    break;
  case % 2 === 0:
    console.log("El valor es multiplo de 2");
    break;
  default:
    console.log("El valor no cumple con ninguna de las características");
}

Lo anterior simplemente daría un error ya que no se sabe a que valor estamos tratando de aplicar esas condiciones / Espero haberme explicado mejor :D

Lhes Jamer Andrade Delgado

student•

Hola a todos,

En el segundo ejemplo, el de los números. Ejecuté el código y me arroja el resultado "El valor es multiplo de 2". Esperaba que se mostrará el mensaje del default ya que la comparación del case 2 se está realizando con === y no con ==.

Si alguien tiene el contexto mucho más claro, me gustaría una explicación al respecto.

Muchas gracias :)

Leonardo de los angeles Espinoza Hernandez

student•

¡Hola!

En esta pequeña lección hay un pequeño truco para ponerte a pensar, el numero es un 12 pero es un string! ¿Entonces porque se dispara la segunda condición en lugar de el mensaje default? / Por una sencilla razón, aunque es pasado como string, al momento de hacer la operación, el lenguaje (javascript) lo convierte a tipo numérico dependiendo el caso / Al ser la operación de módulo, pues es fácil para JS deducir que estamos tratando con un number por lo que hace la operación como si ese string fuera un number y nos termina regresando el siguiente mensaje en consola

console.log("El valor es multiplo de 2");

Sencillamente lo que sucede es lo siguiente

// Le pasamos a JS un número como string para hacer la operación
"12" % 2
// Al ser un string, esto no funciona
// Por lo que JS lo convierte a number
12 % 2
// y ahora las cosas funcionan
12 % 2 = 0
//Pero si pasamos un string que no puede ser parseado a number
"hola" % 2 
// Nos daría como error un NaN (not a number)
"hola" % 2  = NaN

/ Ahora bien, esto no pasa cuando queremos sumar. Si quisiéramos hacer algo como "12" + 2, el resultado sería el string "122" pero con las restas pasa lo mismo que con la operación de módulo se hace el cambio a tipo numerico "12" - 2 = 10 . / Esta es una de las ventajas/desventajas de JavaScript al ser debilmente tipado. / Espero mi comentario sea de ayuda 💪

Lhes Jamer Andrade Delgado

student•

Muchas gracias por la información, me queda mucho más claro el comportamiento de JS

Ricardo Alfonso Chavez Vilcapoma

student•

Para más información aquí la documentación de Switch

Carlos Andrade

student•

12/80 Switch La estructura de control switch permite ejecutar diferentes bloques de código en función de un valor específico.

switch (variable) {
	case valor1:
	  // código a ejecutar si variable es igual a valor1
	  break;
	case valor2:
	  // código a ejecutar si variable es igual a valor2
	  break;
	default:
	  // código a ejecutar si variable no es igual a ninguno de los valores anteriores
}

La variable especificada en el switch se compara con cada uno de los casos especificados. Si se encuentra una coincidencia, se ejecutará el código dentro del bloque correspondiente. Es importante notar que se utiliza la palabra clave break al final de cada bloque de código para indicar que se debe salir del switch una vez que se ha ejecutado el código correspondiente. Si no se incluye break, el código seguirá ejecutándose en los siguientes casos.

const dia = "lunes";
switch (dia) {
  case "lunes":
    console.log("Hoy es lunes");
    break;
  case "martes":
    console.log("Hoy es martes");
    break;
  case "miércoles":
    console.log("Hoy es miércoles");
    break;
  default:
    console.log("Hoy no es lunes, martes o miércoles");
}

Validaciones dentro de los casos:

let numero = "12";
switch (true) {
  case numero > 100:
    console.log("El valor es mayor a 100");
    break;
  case numero % 2 === 0:
    console.log("El valor es múltiplo de 2");
    break;
  default:
    console.log("El valor no cumple con ninguna de las características");
}

switch (variable) {
	case valor1:
	  // código a ejecutar si variable es igual a valor1
	  break;
	case valor2:
	  // código a ejecutar si variable es igual a valor2
	  break;
	default:
	  // código a ejecutar si variable no es igual a ninguno de los valores anteriores
}

const dia = "lunes";
switch (dia) {
  case "lunes":
    console.log("Hoy es lunes");
    break;
  case "martes":
    console.log("Hoy es martes");
    break;
  case "miercoles":
    console.log("Hoy es miércoles");
    break;
  default:
    console.log("Hoy no es lunes, martes o miércoles");
}

let numero = "12";
switch (true) {
  case numero > 100:
    console.log("El valor es mayor a 100");
    break;
  case numero % 2 === 0:
    console.log("El valor es multiplo de 2");
    break;
  default:
    console.log("El valor no cumple con ninguna de las características");
}

En el primer ejemplo, se calcula el resto de la división de 10 por 3, que es igual a 1. En el segundo ejemplo, se calcula el resto de la división de 23 por 7, que es igual a 2.

El operador "%" también se puede utilizar con variables. Es importante tener en cuenta que el resultado siempre tendrá el mismo signo que el divisor. Por ejemplo, `-10 % 3` dará como resultado `-1`, ya que el divisor es positivo.

Espero que esto te ayude a entender cómo usar el operador "%" en JavaScript. Si tienes alguna otra pregunta, no dudes en preguntar.

function evaluateNumbers(num1, num2){
	// ponemos true porque solo acepta un valor el switch
	switch(true){
		// Y hacemos las evaluaciones correspondientes
		case num1 > 5 && num 2 > 5:
			return true
		default:
			return false
	}
}

let numero = "12";
switch (numbero) {
  case > 100:
    console.log("El valor es mayor a 100");
    break;
  case % 2 === 0:
    console.log("El valor es multiplo de 2");
    break;
  default:
    console.log("El valor no cumple con ninguna de las características");
}

// Le pasamos a JS un número como string para hacer la operación
"12" % 2
// Al ser un string, esto no funciona
// Por lo que JS lo convierte a number
12 % 2
// y ahora las cosas funcionan
12 % 2 = 0
//Pero si pasamos un string que no puede ser parseado a number
"hola" % 2 
// Nos daría como error un NaN (not a number)
"hola" % 2  = NaN

switch (variable) {
	case valor1:
	  // código a ejecutar si variable es igual a valor1
	  break;
	case valor2:
	  // código a ejecutar si variable es igual a valor2
	  break;
	default:
	  // código a ejecutar si variable no es igual a ninguno de los valores anteriores
}

const dia = "lunes";
switch (dia) {
  case "lunes":
    console.log("Hoy es lunes");
    break;
  case "martes":
    console.log("Hoy es martes");
    break;
  case "miércoles":
    console.log("Hoy es miércoles");
    break;
  default:
    console.log("Hoy no es lunes, martes o miércoles");
}

let numero = "12";
switch (true) {
  case numero > 100:
    console.log("El valor es mayor a 100");
    break;
  case numero % 2 === 0:
    console.log("El valor es múltiplo de 2");
    break;
  default:
    console.log("El valor no cumple con ninguna de las características");
}

Switch

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios