❌ EVITA usar SWITCH en tu JAVASCRIPT - (Buenas Prácticas ✅)
HTML-код
- Опубликовано: 11 сен 2024
- Cuando tenemos muchas condiciones pensamos que usar Switch es la mejor opción. ¿Lo es? Te voy a enseñar una forma para mejorar tu código JavaScript cuando tienes que lidiar con este tipo de código.
Suscríbete al canal 🔔
► www.youtube.co...
A ver, no pasa nada con usar switch pero a veces lo usamos por encima de nuestras posibilidades. 🤣
🤥 Y es que intentamos "arreglar" el hecho de concatenar muchos condicionales para ir a peor pensando que usar switch es la mejor forma.
🤭 Al final hay una forma mucho más simple que te permite controlar este tipo de funcionalidades.
🤗 De hecho, este patrón lo puedes usar, no sólo para strings, si no para cuando tienes que ejecutar diferentes funciones dependiendo del valor de una variable. ¡Tiene muchos usos!
💬 ¿Ya lo usas? ¿Qué te parece la idea? ¡Dime en los comentarios!
✅ Mejora tu código JavaScript con parámetros nombrados
• ⭐ MEJORA tu código JAV... 
Наука
![MISSING: SLIM SHADY [Expanded Mourner’s Edition Trailer]](http://i.ytimg.com/vi/xh8qgHrOO1g/mqdefault.jpg)
SUSCRÍBETE a mi canal de RUclips 👇
👉 ruclips.net/user/midudev
Me gusta, tu video por la calidad de audio, video y los colores no tan fuerte y agradable.🍫🍫🍫🔥🔥🇩🇴🇩🇴🇩🇴🇩🇴
ya quiero el video siguiente xD
Que theme estas utilizando para este video, se ve muy comodo y practico
Hay que decir que en programación TODO tiene un costo, y no se menciona en este video.
En este caso, estamos favoreciendo legibilidad, sí, pero el costo es que tenemos una variable más (LOKI_DISFRACES) que ocupa espacio en memoria, y a medida que esta variable aumenta, aumenta el espacio en memoria.
Si bien esto en computadoras modernas podría ser insignificante, existe.
Por ende "buenas prácticas" es muy relativo.
Si vas a trabajar con javascript en microcontroladores que tienen poca memoria, esto no necesariamente es una buena práctica.
TODO tiene un costo, y una habilidad importante como desarrollador es determinar cuál es el costo que nos conviene pagar.
A typescript no le gusta esta buena práctica
Javascript en microcontroladores??????
@@firelordozai5719 si, ha llegado tambien a ese mundo, informate. hay una bibliotoca para todo.
Arreglado:
const loki = LOKI_DISFRACES[adversario] || 'Loki'
el switch es pas pesado que el if.. si vamos a ocupar memoria en procesamiento entonces se ponen 3 if y es mas rapido... pasa lo mismo con PHP y sizeof y count.. una es alias de la otra y a nivel de ejecucion hay diferencias en procesamiento
Sos un gran docente, hace falta mas gente como vos para que mas personas le tomen amor a la programación. Felicidades y ojalá tuvieras una lista de reproducción de buenas practicas.
Me salían tus vídeos en recomendados pero no los miraba, me dio por entrar a este video y la verdad uff, ha cambiado mi perspectiva, supongo que usaba el switch porque es lo que uno lee en la teoría que sirve para varias decisiones, uno se acostumbra tanto a la teoría que no le damos espacio a la creatividad de simplificar las cosas, muchas gracias amigo, me haz dado una perspectiva diferente.
x2
Yo tenia el mismo problema con el SWITCH, tenia que escribir varias lineas por cada condicion; buen video xd
Tengo algunos problemas en el uso de un objeto literal en lugar de un switch:
- Es más lento (casi nada, pero aplicaciones de alto rendimiento se ven beneficiadas con switch)
- Require una variable auxiliar para el default (require entender más código para mantenimiento)
- Más verboso, por lo mismo del caso anterior. Para ejecutarlo hay que llamar al objeto, y a la variable auxiliar.
- Memory allocation (el switch en un método se ejecuta dentro del stack, pero un objeto literal se almacena en el heap, y luego el GC tendrá que encargarse. Los lenguajes de alto nivel nos dejan trabajar sin pensar en ello, pero cuando tenemos mucha gente usando un sistema/servicio cada byte/ciclo afecta a la realción costo/ganancia)
- Un objeto literal compacta todo el código naturalmente, switch lo estructura naturalmente. Esto depende del programador al final, pero realmente nunca vi menos legible el switch, aunque creo que es cuestión de gustos. Incluso switch indica cual es el punto de entrada, antes si quiera de separar el comportamiento.
- Agrupar más de un caso requiere más código, cuando en switch los casos se pueden poner uno a continuación del otro. Al omitir el break, switch permite ejecutar varios casos a la vez.
- No se pueden usar otras variables u objetos como caso para comparar (suele ser útil muchas veces)
Usar un objeto literal tiene como ventaja:
- Ser dinámico. No es una necesidad en la mayoría de los casos, pero en algunos poder añadir más casos al vuelo, puede ser necesario, y el switch no es útil ahí.
- Aceptar proxys (no me acuerdo del nombre del diseño realmente). Pero es útil poder separar la lógica del negocio, de otros controles como puede ser el logging, o formateo de datos, etc.
No creo que usar objetos sea un mal enfoque realmente. Creo que hay que saber en cada caso si realmente es necesario, y si la aplicación se beneficia a todos los niveles de la implementación.
Es genial ver este tipo de videos, me encanta aprender de mejores prácticas y esto se explica de manera sencilla y tremendamente didáctica, ojalá puedas seguir subiendo videos de este estilo! gracias midudev!
Cuenta con ello!!
Me sirvió muchisimo el tip, pase de casi 60 lineas de codigo a 27, y con el código mucho mas legible y ordenado. Muchas gracias Midu.
Esooooo!!! 🤗
Me parece cool el approach, aunque me gustaría el contraste desde el punto de vista en el performance o memoria… se entiende que prácticamente todo lo que vemos son operaciones que son instantánea… pero no se me parece cool ver esa comparación nivel. Muchas buenas vibras.
¡Buenísimo este formato y estos tips midu!!!! 👏👏👏
Me encanta
Excelente Gloria! 🤗
Quier decir que la verdad el video esta super bien explicado me encanta simplificar codigo y dejarlo de manera que se pueda leer y modificar con fasilidad,
aca hice un ejemplo utilizando func, pasa que en c# creo que le tengo que rebuscar:
static string adversario= "Iron-Man";
static string loki = string.Empty;
public static void Sin_Switch_ni_If()
{
Dictionary LOKI_DISFRACES = new Dictionary();
LOKI_DISFRACES.Add("Iron-Man", "Magneto");
LOKI_DISFRACES.Add("Thor", "Odin");
LOKI_DISFRACES.Add("Hulk", "Thanos")
Console.WriteLine("{0} vs Loki-{1}", adversario, LOKI_DISFRACes(LOKI_DISFRACES));
}
public static Func LOKI_DISFRACes = (x) =>
{
return (x.TryGetValue(adversario, out loki) == false) ? "Loki" : loki;
};
Buenísimo! , más contenido como este para que novatos autodidactas dejemos de ser novatos
Cuenta con ello Jordi!
Midu eres un grande!!!
Hice lo mismo pero en php para un proyecto y me ahorraste lineas y lineas de codigo repetido!
Bueno, tambien me ayudo un poco copilot... hizo lo que tenia en mente! xdd
Al principio ley el título del vídeo y me enojé! Porque siempre pensaba que reemplazar los ifs por switch era lo mejor, xD pero ya cuando te das cuenta que la idea no es usar ifs. Que locura y que increíble!!
Yo uso ambos. Hay casos que tiran más hacia un diccionario (como es el caso del vídeo), pero otros en los que no usar break para aglutinar varios cases y tener un único comportamiento, es más feo hacerlo con un diccionario. Otra cosa a favor del switch es el default que, si bien se puede simular como se hace en el vídeo, puede que haya casos en los que el valor "devuelto" en un case sea undefined y usando un diccionario no habría forma de saber si ha cumplido la condición (al menos tal cual se comprueba en el vídeo). La forma correcta para comprobar el caso por defecto con un diccionario sería mirando si la condición se encuentra entre las claves del objeto (Object.keys(LOKI_DISFRACES).includes(adversario)) y la elegancia que se gana con el mapa, se pierde en la comprobación del caso por defecto y tiene una sintaxis más fea y menos legible que con el switch.
Otra cosa del switch es que "se ve" y sabes que ahí hay un un punto donde la lógica puede tomar N decisiones. El mapa "oculta" eso y a veces no es bueno si lo importante es buscar rápidamente en el código "el típico switch" donde se decide qué hacer. En casos simples y directos como los del vídeo usaría sin dudar el mapa, pero en otros creo que el switch deja más claro sus intenciones.
Uuuf, Brutal este contenido que aportas es genial, grande Midu Gracias por aportar tus conocimientos y a por los 100K 📈↗💹
Vamoooooos!! Gracias Ronaldo!!! Poco a poco nos vamos acercando!!! :)
No termino de verlo como consejo general: switch y object son cosas diferentes que cumplen propósitos diferentes. Y usar un diccionario, en lugar de un switch no es necesariamente hacer código más legible... aunque puede que en este ejemplo seleccionado, tenga buen encaje (especialmente si también quiere reutilización del diccionario, como menciona en el vídeo)
Efectivamente es un ejemplo. La lectura es al revés. No digo que no uses nunca Switch. Digo que existe un uso que se le da a switch que es mejor usar un objeto. Y este caso es bastante repetido ya que casi todos los enums en JavaScript se convierten a switch/case.
Es el video que más he revisado de toda tu lista; es simple, legible, minimalista y elegante.
Gracias!
El título no me hace sentido, el argumento para no usar SWITCH es que puedes usar un objeto ? el switch de hecho debería, a mi entender ser más usado ya que es más expresivo que un if, no me confundas, gracias por el aporte, en ese caso que tienes en el video es válido, al menos debiste aclararlo al final, ya que puedes confundir a los que inician, usar switch es bueno, moderadamente, como todo, gracias por compartir midudev.
yo creo que no hay nada mejor que las estructuras, tienes todo tan bien organizado, suelen incluso hasta mejorar el rendimiento, son geniales!
Debo admitir que he visto este video 3 veces , en un lapso de un mes.
Siempre sin entender, pero después de haber resuelto unos problemas sobre objetos finalmente lo entendí.
La calidad de la información no fue el problema, ya que está presentado de manera top. Mi falta de conocimiento fue el problema.
Gracias desde 🇵🇦
Investigue qué es el patrón estrategia, le aseguro que es aún mejor solución
Genial, no me gustaban los if y estaba usando switch. Ahora voy a usar esta tecnica. Gracias¡
pero piensa que este método es mucho más costoso computacionalmente.
llevo rato viendo en tus videos que no te gustaban los switch y ahora que vi este video, entiendo completamente el porque!! Grande Midu!!
Para el ejemplo puede mejorar la lectura del código, pero en rendimiento es peor, el tiempo de acceso a los elementos de un arreglo es mayor que una comparación que es lo que hace un switch, pese a lo que muchos piensen un switch es una estructura de control integrada en el propio lenguaje tanto como un if o un for.
No es un array, es un objeto.
Sí, ¡más videos de estos! Son el tipo de contenido que nos permiten llevar nuestro código al siguiente nivel 🙌
Excelente tutorial, me gustaría que ahondaras mas en el uso de funciones y objetos con esta buena práctica
Hace unos meses descubrí esta función y flipe en colores!! Un código mucho más limpio y simple
Impecable!! animate a hacer mas videos de este tipo, son muy necesarios, es de lo que falta!
Aun no se estrena pero ya le di Like! Pendiente de tus videos! Si todo sale bien entro a trabajar de Frontend con react asi que estos videos me vienen bien! Gracias
Excelente... nos viene muy bien para los que seguimos aprendiendo JS estos videos de buenas prácticas... Gracias midu
eliminaría mucho de código en redux!! ya lo hago para en otras cosas pero en reducers me lio . Y ya por 100k macho, en hora buena y mis mas sinceros respetos crack!! No solo saber, tener pedagogía para enseñar , transmitir y querer mas
midudev podrias hablar en un futuro video sobre children as function? como afectan el performance, si es recomendable segun en que casos. Esto lo pregunto por la primera vez que vi formik. Gracias!!
{({ loading, saludar }) => (
{loading ? "Cargando.." : "Finalizo..!!"}
)}
Me puse a ver invinsible por recomendación de "alguien" y en cada capitulo esperando a ver si iban a programar en js vanilla o en react, y nada.... jejeje muy buena serie gracias... saludos desde Colombia!!
En serio que estos videos ayudan muchisimo a personas que recien inician y tambien a los que vienen programando... se aprende muy buenas practicas!!,. un saludo crack desde Perú.
Todo lo contrario viejo, los recién iniciados deben aprender a usar las sentencias básicas para después poder entrar a estructuras de datos y aprender a evaluar cuándo usar cada tipo.
Para el caso que ilustras sí, pero los switch statements pueden ser muy útiles en ciertos casos.
👍 totalmente de acuerdo. Esto es una forma de evitar switch en un tipo de caso concreto. Que suele ser habitual pero no siempre es para dejar de usar switch.
@@midudev xd a mi el switch me parece una mrd, y con este video, creo q mas nunca lo usaré xD... algún ejemplo donde si toque estrictamente usar un switch ? a mi ni se me ocurre, soy NOOB cabe recalcar
GENIAL!! No uso mucho Java pero para hacer algo parecido me mataba haciendo condicionales anidadas o un bucle con dos arrays (uno de "entradas" y otro de resultados o "salidas") ya que solo podía buscar por posiciones numéricas y no por nombre de la posición como en este video. Gracias por brindarnos estos tips.
Corto y muy práctico... voy corriendo a ver donde elimino switchs en mis proyectos... saludos desde Ecuador
Esos videos que valen oro y te enseñan más de lo que proponen. Increible Midu como siempre, Gracias!
Que bueno! Ojala traigas mas consejos asi.
Me encantaría poder ver más consejos de este estilo. Sólo con estos dos videos me he ahorrado mucho trabajo a futuro 😊
Hoy hice mi segundo ejercicio y use switch jajaja igual estoy empezando llevo dos semanas.
Necesita designar a cada día de la semana un número.
Y Vi que con switch se podía .
Aún no me se muchos comandos pero de a poco se aprende muchachos.
es un caso especial. Para otras operaciones solo serviria un "if else " o el switch
Me encanta este formato de videos, con temas/conceptos especificos y que van sumando a los conocimientos que se tienen, ademas que son puntuales y de no tan larga duración, excelente aporte, genio!
que editor usas?
Me acabas de motivar categóricamente a continuar aprendiendo a programar. Estoy aprendiendo Python, acabo de ver diccionarios y justamente pensé en hacer lo que nos estás mostrando :) me siento feliz 😄
Es curioso. Nunca había pensado en esta posibilidad . Pero usando objetos javascript sustituyes a switch. Hasta podría servir para php.
Gracias por la sugerencia.
Me parece increíble que esto fuera lo que hoy me ha dejado pensativo, no he podido pensarlo en el curro en condiciones y ahora llegas tú y literalmente me solucionas la vida, eres el Mesías, mim gracias Midu, un héroe siempre 🎉
buah, no sabía que es tan pero taaaaan extenso el javascript, de momento aún me cuesta en mi curso este lenguaje entre otros más pero es muy bueno si aprendo a usarlo pronto. Genial para cuando vaya de prácticas en empresa cuando encuentre para este Marzo.
Que curioso, ya había visto este articulo en una publicación, es bastante escuchar una explicación.
Maestro..
Buena... yo también so devoto del switch..
Pero todavía me cuesta entender la POO..
Soy de la guarda dinosauria.... hehehe (mi primer lenguaje fue basic en DOS)
Pero sí, está buen esta manera de afrontar.. una... reduces código.. dos.. más legible.
Puntazo....
Me parece genial.. El que hagas un video sobre la mejor manera de escribir código JS.. Eres un crack tío!
Me acaba de recomendar este vídeo RUclips y me he tenido que suscribir porque me parece muy interesante y muy didáctico el contenido. 👍
Justo ahora tenia un problema que no tenia idea de como solucionarlo, gracias a ti lo pude solucionar en 5 min. Gracias por compartir tu conocimiento! me salvaste de hacer 10 if else o switch jajajaj
Uhh interesante, ahora si puedo entender varias cosas como por ejemplo el uso de formik
Wow!, es impresionante como informó tan bien y de manera clara una nueva técnica en tan poco tiempo. Ya me imagino que sus cursos son muy buenos.
Excelente Midu! Super efectivo
Hola! Oye estaría bien que explicarás cuales son los patrones que usas y así se aprende un poco más de teoría :D (Es este caso la factoría).
PD: Parece mejor solución un "Optional chaining operator" que la ternaria, algo tal que así: "const loki = LOKI_DISFRACES[adversario]?.() || LOKI_DEFAULT_DISFRAZ". Buen video! :D
Gracias, complementando lo que escribiste podríamos escribir : "const loki = LOKI_DISFRACES[adversario]?.() || 'Loki'
Nos ahorraríamos el definir LOKI_DEFAULT_DISFRAZ , ahorrar tiempo y espacio de memoria c:
El ejemplo está bueno para reducir la complejidad accidental, pero la verdad es relativo lo de "Buenas prácticas", principalmente porque se viola el principio de open-close OCP de solid, y a veces uno no le importa si hay más líneas de código si eso genera mantenibilidad y cambiabilidad. Si utilizás el paradigma de POO, hay muchas soluciones que se pueden aplicar sin la necesidad de tener un if o un switch, ya que los mismos, se pueden evitar usando polimorfismo, a excepción de cuando la condición depende de la complejidad esencial. De hecho, qué pasaría si tenés más combinaciones o más personajes? Claramente, no escala. Pero si lo veo como buena alternativa para reemplazar el switch.
Mil gracias!! Justo hoy he usado un switch case que mañana mismo voy a cambiar!! 😋
Me encantan estos nuevos videos con tips rápidos y fáciles de entender, gracias!!!
Bro esta genial que tengas una sección de buenas practicas!
🤙Gracias Kev! Seguiremos!
Para este caso definitivamente si. Para definir lógica en cada caso ahí si le daría la mano al Switch :). Excelente, claro y al grano!
A mi nunca me ha gustado el switch, siempre habia pensado en arrays o en otras estructuras de datos para sustituirlos. Excelente video!.
Me encantó, creo que una vez hize algo parecido pero explicado así veo claramente el pattern, lo voy a usar seguramente. Gracias!!
Como en python!!! Que no existe switch y se usa un dict con fallback en el get(k) como default
Esta super la idea-- definitivamente me pasa que hago muchas condicionales asi y despues a parte de que es mucho codigo es dificil agregar o quitar algo-- Gracias-- definitivamente me sera util-- saludos--
Dale más videos así , me loqueaste... buen trabajo!! por cierto no le puedo dar click a la campanita de tu canal.
Esperando con ansias el siguiente video
Excelente jaja, A mí se me pasó lo mismo por la cabeza cuando estaba haciendo un switch de 100 líneas xd.
Siii mas videos de esto por favor!!!
Ps: lobesno nooooooo jajajajajajaj saludos desde LATAM.
Muy bueno!!! Sencillo, simple, corto, y altamente funcional!!
Muchas gracias por tu recomendación, deberías hacer un curso de buenas prácticas en JavaScript
excelente video estoy comenzando en la programación y lo que mas me falta son buenas practicas para tener mi código mas legible
Sos un genio! pequeñas cosas que hacen la diferencia. No dejes de hacer estas secciones ! Por casualidad tenés algún curso avanzado de react?
wow es verdad exelentemente bueno mil gracias
Mindblowing, me emocioné xd por favor, continua con estos videos de buenas practicas >
genial, justo que estaba buscando una forma de reducir líneas, haz llegado tú con el video!!
Muy pro excelente practica deberías hacer mas sobre este tema muchas gracias :)
Estas pildoras son las que hacen que tu codigo marque la diferencia. Me encantan estos tips
Me encantaría más prácticas así!!! Alguna recomendación de lectura para ver este tipo de prácticas
Me parece genial midu,muchas gracias, definitivamente me falta mucho por aprender.
Todos estamos aprendiendo!
wow buena metodologia, siempre se me olvidaba esa forma de resolver problemas ahora creo que lo recordare mejor.
gracias men, continua con estos temas. ayuda mucho
🚀 lo haré!
Wow! Gran consejo! Muy inteligente!!! :D Me gustaría saber, de hecho cuán eficiente es respecto de las otras opciones (if-else y switch).
Cuando un canal es bueno no necesita pedir que le den like al video ni que se suscriban, simplemente lo hacemos por reconocimiento :)
Grandioso, algo mas que aprender. Gran Tutorial.
Yo quisiera saber @midudev si sabes de alguna buena practica para cuando tienes una variable que es un string muy muy largo!
excelente contendido y manera de explicar ,seria genial tener un video mas sobre esta manera de optimizar y trabajar con js
Muy bien explicado gracias!
estoy empezando a aprender javascript porque me gusta un monton, alguna recomendacion o consejo para ser bastante bueno con el lenguaje
La mejor recomendación es que sigas mi canal y te pases por mis directos de Twitch. Si no mejoras en JavaScript en un año, te devuelvo todo tu dinero.
Muy bueno! Gracias!
Una idea muy sencilla pero que muchos hemos pasado por alto. Muy interesante con el uso de funciones. Como siempre, sublime, midu!!
solo cambiaría el OR (||) por (??) para evitar algunos escenarios desafortunados :)
Creo que para este ejmplo aplica, pero que pasa si necesitamos una logica con valores que solo estan en el scope donde iria el switch y no estan al alcance de la const que se crea?, Muchas gracias!!
me parece que el bytecode tras compilar un switch-case es mas eficiente que el if-then-elseif-else y otras alternativas ... asi que no me parece del todo correcto decir que if-then-elseif-else es mejor, depende de lo que quieras.... si quieres optimizacion sobre legibilidad me parece que el switch-case es mejor opcion
Buena idea para utilizar un diccionario. Muchas veces conocemos las herramientas pero no contamos con la creatividad o practicidad para utilizarlas.
Está genial... pero a este ejercicio le hace falta la mitad para ser más coherente; una vez tenga el resultado del anterior código ... ¿cómo incio otro código o proceso basado en el resultado? ... finalmente termino usando un condicional..
Excelente amigo. Muy elegante la alternativa que propones.
Ya lo habia visto en algun otro lado, pero ahora me ha quedado mas claro.
Que interesante. Me ha encantado el video 💪💪💪
Gracias Daniela! 😍