Introducci贸n a JavaScript
驴Por qu茅 aprender JavaScript?
隆Hola Mundo! en Mac
隆Hola Mundo! en Windows
Anatom铆a de una variable
Tipos de datos en JavaScript
Creaci贸n de strings
Operadores aritm茅ticos
Conversi贸n de tipos: Type Casting y Coerci贸n
Conversi贸n de tipos expl铆cita e impl铆cita
Estructuras de Control y L贸gica
Operadores de comparaci贸n
Operadores l贸gicos
Ejecuci贸n condicional: if
Ejercicio: Adivina el n煤mero
Ejecuci贸n condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatom铆a de una funci贸n
Funciones vs M茅todos
Funciones puras e impuras
Arrow function y enlace l茅xico
Contextos de ejecuci贸n y scope chain
驴Qu茅 es Closure?
Preguntas a Desarrolladores Senior: 驴Por qu茅 aprender Desarrollo Web?
Manipulaci贸n de Arrays
Introducci贸n a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificaci贸n b谩sica del final con push( ), pop( )
Iteraci贸n con map( ) y forEach( )
Filtrado y reducci贸n con filter( ) y reduce( )
B煤squeda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programaci贸n Orientada a Objetos
Anatom铆a de un Objeto
Trabajando con objetos en JavaScript
Funci贸n constructora
驴Qu茅 es una clase?
Prototipos y herencias
Herencia en la pr谩ctica
Prototipos en la pr谩ctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincron铆a en JavaScript
驴C贸mo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
驴C贸mo funciona la web?
驴C贸mo funciona HTTP?
M茅todo GET en JavaScript
M茅todo POST en JavaScript
M茅todo DELETE en JavaScript
Importancia del id en el m茅todo DELETE
ECMAScript 6 y tus siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What is a Switch and how is it used in programming?
The use of the Switch control structure is fundamental in programming to handle multiple scenarios based on a specific expression. Comparable to if, else if, else, Switch allows multiple validations, but with one essential difference: it evaluates only if an expression is true and not multiple conditions.
Unlike the comparative operators in if structures, Switch is used exclusively to validate whether the expression we are evaluating is true. But how do we set up a Switch and what essential components make up its structure?
How does the basic Switch structure work?
The structure of a Switch begins by defining an expression in parentheses. This expression is the condition to be evaluated. Then, by creating multiplecases, we specify what should happen if the expression matches a given value. Let's see how to set it up:
let expression = 'papayas';
switch (expression) { case 'oranges': console.log('Oranges cost 20 pesos a kilo.'); break; case 'apples': console.log('Apples cost 43 pesos a kilo.'); break; case 'bananas': console.log('Bananas cost 30 pesos per kilo.'); break; case 'mangos': case 'papayas': console.log('Mangoes and papayas cost 25 pesos per kilo.'); break; default: console.log('Sorry, we don't have ' + expression);}What is the importance of 'break' and 'default' in Switch?
The break statement in a Switch is crucial because it prevents the execution of subsequent cases once a true has been encountered. In case no condition is met, we can define a default to handle unforeseen scenarios and provide predefined responses.
break: Interrupts the execution of theSwitchso that, once a case has been validated, it does not continue to evaluate the following cases.default: Used as the "else" of aSwitch, providing an output when no condition is true.
When is it ideal to use a Switch instead of if-else?
Switch is ideal when a single variable or expression must be evaluated against multiple literal values. Unlike if-else, which is more flexible for complex comparisons (such as greater than or less than), Switch works only with strict comparison (as if we use the triple equal ===). Therefore, when choosing between the two, consider:
- Higher readability:
Switchfor conditions with many predefined branches. - Simple comparisons:
Switchis more efficient for exact equality. - Special cases: Use
if-elsefor logical complexity or advanced comparisons.
Through the use of Switch, programmers can design more organized and efficient decision flows in situations where only equality of values needs to be checked. Experiment with it and see for yourself the agility it can offer to your codes!
Contributions 26
Questions 1
Sort by:
## Condicion Switch
La condici贸n `switch` en JavaScript es una estructura de control que permite ejecutar diferentes bloques de c贸digo seg煤n el valor de una expresi贸n.
Es especialmente 煤til cuando necesitas manejar m煤ltiples casos basados en el valor de una variable, proporcionando una alternativa m谩s limpia y legible a m煤ltiples declaraciones `if-else`.
### Sintaxis de `switch`
La sintaxis b谩sica de `switch` es la siguiente:
`switch(expresi贸n) {`
` case valor1:`
` // C贸digo a ejecutar si expresi贸n === valor1`
` break;`
` case valor2:`
` // C贸digo a ejecutar si expresi贸n === valor2`
` break;`
` case valor3:`
` // C贸digo a ejecutar si expresi贸n === valor3`
` break;`
` default:`
` // C贸digo a ejecutar si ninguna de las cases coincide`
`}`
* **expresi贸n**: La expresi贸n que se eval煤a y se compara con los valores de cada `case`.
* **case**: Cada `case` contiene un valor a comparar con la expresi贸n. Si coinciden, se ejecuta el bloque de c贸digo asociado.
* **break**: Detiene la ejecuci贸n del `switch` despu茅s de ejecutar el bloque correspondiente. Sin `break`, el flujo continuar谩 con el siguiente `case` (esto se llama "fall-through").
* **default**: Opcional. Es el bloque que se ejecuta si ninguna de las `case` coincide con la expresi贸n.
Ejemplo con `break` y `fall-through`
`let numero = 2;`
`switch (numero) {`
` case 1:`
` console.log("N煤mero es 1");`
` // No hay break, as铆 que el flujo contin煤a`
` case 2:`
` console.log("N煤mero es 2");`
` break;`
` case 3:`
` console.log("N煤mero es 3");`
` break;`
` default:`
` console.log("N煤mero no est谩 en el rango 1-3");`
`}`
En este caso, si `numero` es 2, se imprimir谩 "N煤mero es 2" y luego se detendr谩 porque hay un `break`. Si se omite el `break` en el `case 1`, la ejecuci贸n continuar谩 hasta el siguiente `case`, imprimiendo "N煤mero es 2".
* Consideraciones Adicionales
* **Uso de** `break`: Es crucial usar `break` para evitar el "fall-through" accidental.
* `default`: Siempre es buena pr谩ctica incluir un `default` para manejar casos inesperados.
* **Expresiones Complejas**: Puedes usar expresiones complejas, pero ten en cuenta que pueden afectar la legibilidad.
Les presento mi ejemplo practico de la clase
![]()
No soy fan de Switch, yo prefiero usar Object Literal Pattern:
```js
const switchObject = {
valor1: () => {
// c贸digo a ejecutar para valor1
},
valor2: () => {
// c贸digo a ejecutar para valor2
},
valor3: () => {
// c贸digo a ejecutar para valor3
},
default: () => {
// c贸digo por defecto
}
};
function ejecutar(expresion) {
return (switchObject[expresion] || switchObject.default)();
}
// Uso
ejecutar('valor1');
```
**MIS APUNTES** 馃殌 馃殌**:**
haber, s铆, es posible poner estructuras condicionales en un switch, siempre y cuando la "key" de swith sea true
```js
let fruta = "manzana";
let frutados = "pera";
let cantidad = 5;
//La clave de switch debe ser true para poder agregar estrucutras condicionales
switch (true) {
case (fruta === frutados):
console.log('No son iguales');
break;
case (fruta === "naranja"):
console.log("Es una naranja.");
break;
default:
console.log("Fruta no reconocida.");
}
```
inge por favor aclare esa parte como sea esa parte final del video.
Este fue el ejercicio que yo hice, espero les sirva de algo :)
Ejercicio de la clase utilizando **prompt** para introducir la fruta que deseemos:
```js
let expr = prompt("Ingresa la fruta que desee: ")
switch(expr){
case "Naranjas":
console.log("Las naranjas cuestan $20 el kilo")
break;
case "Manzanas":
console.log("Las manzanas cuestan $43 el kilo")
break;
case "Pl谩tanos":
console.log("El pl谩tano cuesta $30 el kilo")
break;
case "Mangos":
case "Papayas":
console.log("Los mangos y las papayas cuestan $25 el kilo")
break;
default:
console.log(`Lo siento no contamos con ${expr}`)
}
console.log("Hay algo m谩s que desees?");
```
```js
function filterListShop() {
const search = prompt(
"Ingresa lo que deseas buscar en la lista "
).toLowerCase();
switch (search) {
case "tomates":
console.log("Comprar 5 tomates");
break;
case "cebolla":
console.log("Comprar 2 cebollas");
break;
case "papel":
console.log("Comprar papel");
break;
default:
console.log(`No hace falta comprar ${search}`);
break;
}
}
filterListShop();
```
mi ejemplo: 
Una empresa tiene **tres turnos**:
* **Ma帽ana** (6:00 AM - 2:00 PM)
* **Tarde** (2:00 PM - 10:00 PM)
* **Noche** (10:00 PM - 6:00 AM)
Crea un programa que, seg煤n el turno ingresado, muestre el salario por hora y si tiene un bono nocturno.```js
// Una empresa tiene tres turnos: Ma帽ana (6:00 AM - 2:00 PM) - Tarde (2:00 PM - 10:00 PM) - Noche (10:00 PM - 6:00 AM)
// Crea un programa que, seg煤n el turno ingresado, muestre el salario por hora y si tiene un bono nocturno.
const turnoTrabajado = parseInt(prompt("Ingresa la cantidad de horas trabajadas"));
const turno = prompt("Ingresa tu turno: MA脩ANA, TARDE o NOCHE").toUpperCase();
const salarioMensual = 1423500;
const horasMensuales = 240;
const salarioPorHora = salarioMensual / horasMensuales;
const saldoTotal = turnoTrabajado * salarioPorHora;
switch (turno) {
case 'MA脩ANA':
case 'TARDE':
console.log(`Tu salario total es de $${saldoTotal.toLocaleString('es-CO')} COP`);
break;
case 'NOCHE':
const bonoNocturno = saldoTotal * 0.1; // 10% sobre el salario total del turno
const salarioConBono = saldoTotal + bonoNocturno;
console.log(`Tu salario total, incluyendo el bono nocturno, es de $${salarioConBono.toLocaleString('es-CO')} COP`);
break;
default:
console.log("Turno no v谩lido. Ingresa MA脩ANA, TARDE o NOCHE.");
}
```
Efectivamente, la estructura `if-else` en JavaScript permite realizar comparaciones m谩s flexibles, utilizando operadores como `>`, `<`, `==`, `===`, `||` (OR) y `&&` (AND). Esto permite evaluar condiciones complejas. En contraste, `switch` se limita a evaluar la igualdad exacta (comparaci贸n estricta) de una expresi贸n con m煤ltiples casos, sin la posibilidad de usar operadores de comparaci贸n. Utiliza `switch` principalmente para situaciones donde tienes m煤ltiples valores discretos a evaluar, mientras que `if-else` es preferible para condiciones m谩s complejas.
Switch se comporta de manera similar a una serie de condiciones if-else, pero con una sintaxis m谩s clara y menos propensa a errores cuando se eval煤an m煤ltiples valores. En el caso de `if (variable1 === variable2)`, Switch eval煤a la expresi贸n solo con comparaci贸n estricta, lo que puede ser m谩s conveniente para manejar m煤ltiples casos de forma legible. Si se cumple alg煤n caso, se ejecuta el bloque correspondiente, y se puede usar `break` para evitar que otros bloques se ejecuten. Sin embargo, si necesitas realizar comparaciones m谩s complejas o l贸gicas, if-else sigue siendo la opci贸n adecuada.
```js
let numeroJugador = 0
function escribirNumero(){
numeroJugador = parseInt(prompt("Pon un numero (entre 1 y 10)"));
console.log(`Este es el n煤mero que juegas: ${numeroJugador}`);
switch (numeroJugador){
case 1:
console.log("Uno");
break;
case 2:
console.log("Dos");
break;
case 3:
console.log("Tres");
break;
case 4:
console.log("Cuatro");
break;
case 5:
console.log("Cinco");
break;
case 6:
console.log("Seis");
break;
case 7:
console.log("Siete");
break;
case 8:
console.log("Ocho");
break;
case 9:
console.log("Nueve");
break;
case 10:
console.log("Diez");
break;
default:
console.log("N煤mero no v谩lido");
break;
}
}
escribirNumero()
```let numeroJugador = 0
function escribirNumero(){numeroJugador = parseInt(prompt("Pon un numero (entre 1 y 10)"));console.log(`Este es el n煤mero que juegas: ${numeroJugador}`);switch (numeroJugador){聽 聽 case 1:聽 聽 聽 聽 console.log("Uno");聽 聽 聽 聽 break;聽 聽 case 2:聽 聽 聽 聽 console.log("Dos");聽 聽 聽 聽 break;聽 聽 case 3:聽 聽 聽 聽 console.log("Tres");聽 聽 聽 聽 break;聽 聽 case 4:聽 聽 聽 聽 console.log("Cuatro");聽 聽 聽 聽 break;聽 聽 case 5: 聽 聽 聽 聽 console.log("Cinco");聽 聽 聽 聽 break;聽 聽 case 6:聽 聽 聽 聽 console.log("Seis");聽 聽 聽 聽 break;聽 聽 case 7:聽 聽 聽 聽 console.log("Siete");聽 聽 聽 聽 break;聽 聽 case 8:聽 聽 聽 聽 console.log("Ocho");聽 聽 聽 聽 break;聽 聽 case 9:聽 聽 聽 聽 console.log("Nueve");聽 聽 聽 聽 break;聽 聽 case 10:聽 聽 聽 聽 console.log("Diez");聽 聽 聽 聽 break;聽 聽 default:聽 聽 聽 聽 console.log("N煤mero no v谩lido");聽 聽 聽 聽 break;}}
escribirNumero()
Muy bonita clase, me parece super interesante el mundo de la programaci贸n, este curso es el primero que tomo y este ejercicio me gust贸 bastante, es pr谩cticamente un buscador con una base de datos limitada. Gracias Profe, saludos a todos y bendiciones.
let expresion = prompt("Ingrese Una fruta: ")
switch (expresion) {
case "Platano":
console.log ("Los Platanos Cuestan $1000 el Kilo")
break;
case "Naranja":
console.log ("Las Naranjas Cuestan $1300 el Kilo")
break;
case "Mel贸n":
console.log ("El Melon Cuesta $1200")
break;
default:
console.log("No se encuentra disponible")
}
El switch es util tambien por ejemplo cuando ya tenemos una gran cantidad de if y if-else anidados parahacer el codigo mas legible por ejemplo:
```js
var product = "Apples";
if (product === "Apples") {
price = 20;
} else if (product === "Bananas") {
price = 60;
} else if (product === "Berrys") {
price = 190;
} else if (product === "Grapes") {
price = "Wine";
} else {
price = 30;
}
```Aunque este codigo es legible y es correcto es mejor usar un switch case en este caso para que se vea mejor y sea mas sencillo como:```js
var product = "Apples";
var price; // Inicializar la variable price
switch (product) {
case "Apples":
price = 20;
break;
case "Bananas":
price = 60;
break;
case "Berrys":
price = 190;
break;
case "Grapes":
price = "Wine";
break;
default:
price = 30;
}
```var product = "Apples";var price; // Inicializar la variable priceswitch (product) { case "Apples": price = 20; break; case "Bananas": price = 60; break; case "Berrys": price = 190; break; case "Grapes": price = "Wine"; break; default: price = 30;}console.log(price); // Esto imprimir谩 el precio para "Apples", que es 20
```js
let vehiculo = "camioneta"
switch (vehiculo) {
case 'moto':
console.log('Un veh铆culo de dos ruedas, ligero y r谩pido, ideal para el transporte individual y 谩gil en el tr谩fico')
break;
case 'auto':
console.log('Un veh铆culo de cuatro ruedas, dise帽ado para el transporte de personas y con capacidad para varios pasajeros')
break;
case 'camioneta':
console.log('Un veh铆culo de cuatro ruedas, generalmente m谩s grande que un auto, dise帽ado para transportar carga o personas')
break;
case 'camion':
console.log('Un veh铆culo de gran tama帽o, destinado principalmente al transporte de mercanc铆as pesadas o grandes vol煤menes de carga')
break;
case 'colectivo':
console.log('Un veh铆culo de transporte p煤blico, generalmente de gran capacidad, utilizado para trasladar a varias personas por rutas preestablecidas')
break;
default:
console.log(`Lo siento, no se ha encontrado ningun ${vehiculo} existente`)
}
```let vehiculo = "camioneta"
switch (vehiculo) {聽 case 'moto':聽 聽 console.log('Un veh铆culo de dos ruedas, ligero y r谩pido, ideal para el transporte individual y 谩gil en el tr谩fico')聽 break;聽 case 'auto':聽 聽 console.log('Un veh铆culo de cuatro ruedas, dise帽ado para el transporte de personas y con capacidad para varios pasajeros')聽 break;聽 case 'camioneta':聽 聽 console.log('Un veh铆culo de cuatro ruedas, generalmente m谩s grande que un auto, dise帽ado para transportar carga o personas')聽 break;聽 case 'camion':聽 聽 console.log('Un veh铆culo de gran tama帽o, destinado principalmente al transporte de mercanc铆as pesadas o grandes vol煤menes de carga')聽 break;聽 case 'colectivo':聽 聽 console.log('Un veh铆culo de transporte p煤blico, generalmente de gran capacidad, utilizado para trasladar a varias personas por rutas preestablecidas')聽 break;聽 default:聽 聽 console.log(`Lo siento, no se ha encontrado ningun ${vehiculo} existente`)}
const numsecreto = Math.floor(Math.random() \*10 +1 );const
usuario2 = parseInt(prompt("por favor ingrese el numero que desea adivinar"));
switch(true){
聽 case isNaN(usuario2):聽 console.log("Esto no es un n煤mero.");聽 break;
聽 case numsecreto === usuario2:聽 console.log("felicidades has ganado ");聽 break;聽
聽 case 聽numsecreto > usuario2 : 聽聽 console.log("el numero es un poco bajo vuelve a intentar ");聽 break;
聽 case 聽numsecreto < usuario2: 聽 console.log(" el numero es muy alto vuelve a intentar ");聽break;聽
default: console.log("ocurio un error vuelve a intentar ");聽 break;}
console.log("el numero secreo es " + numsecreto + " y tunumero es " + usuario2);
**SWITCH** *segun la documentacion oficial*: Evalua una expresion,comparando el valor de esa expresion con una instancia llamada case y ejecuta declaraciones asociadasa ese case.
La clase trat贸 sobre la estructura de control `switch` en JavaScript. Aqu铆 tienes apuntes clave:
1. **Definici贸n**: `switch` permite evaluar una expresi贸n y ejecutar bloques de c贸digo seg煤n el resultado.
2. **Sintaxis**:
```javascript
switch (expresi贸n) {
case valor1:
// C贸digo a ejecutar
break;
case valor2:
// C贸digo a ejecutar
break;
default:
// C贸digo si no coincide con ning煤n case
}
```
3. **Uso de `break`**: Detiene la ejecuci贸n de m谩s casos. Si omites `break`, el c贸digo del siguiente caso tambi茅n se ejecutar谩.
4. **Caso `default`**: Similar al `else` en `if`, se ejecuta si ninguno de los casos coincide.
5. **Comparaci贸n estricta**: `switch` utiliza comparaci贸n estricta (`===`), solo ejecuta el c贸digo si el tipo y valor coinciden.
6. **Aplicaci贸n**: 脷til para decidir entre m煤ltiples opciones sin usar m煤ltiples `if`.
Estos apuntes te ayudar谩n a reforzar tu comprensi贸n sobre el uso de `switch` en JavaScript.
```js
switch (expr) {
case 'option':
console.log(`yes ${expr}`)
break;
}
```switch() {}
hola profe, como puedo usar la console del navegador, para ejecutar el codigo
me ha pasado en videos anteriores que hablan de la consola pero es algo confuso al inicio y entonces se pierde un poco uno
Solo para confirmar con el respeto de los presentes , para los que son muy nuevos como yo , seria bueno que en este tipo de videos Tambien expliquen como se referencia el Js en el html , de esta manera cuando creen el index puedan correrlo desde la consola del navegador
Want to see more contributions, questions and answers from the community?