Cómo simplificar sentencias if en JavaScript

Las declaraciones condicionales son una parte esencial de JavaScript. Le permiten ejecutar código en función de si una condición dada es verdadera o falsa, y puede anidar múltiples de lo contrario declaraciones (y una demás) para evaluar más de una condición.

Pero aquí está el problema: al escribir complejos si... más cadenas, las cosas pueden ensuciarse rápidamente y puede terminar fácilmente con un código que es difícil de leer y comprender.

Aprendamos a refactorizar largos y complejos si... más si... más cadenas condicionales en una versión más concisa, más limpia y más fácil de entender.

Complejo si... más Cadenas

Al escribir sentencias if...else complejas en JavaScript, es esencial que escriba código limpio, conciso y comprensible. Por ejemplo, eche un vistazo a la si... más cadena condicional dentro de la siguiente función:

funciónpuedebeber(persona) {
si(persona?.edad != nulo) {
si(persona.edad





instagram viewer
 < 18) {
consola.registro("Todavía demasiado joven")
 } demássi(persona.edad < 21) {
consola.registro("No en los Estados Unidos")
 } demás {
consola.registro("Permitido beber")
 }
 } demás {
consola.registro("No eres una persona")
 }
}
constante persona = {
 edad: 22
}
canDrink (persona)

La lógica aquí es simple. La primera si declaración asegura que el persona objeto tiene un edad propiedad (de lo contrario, él o ella no es una persona). dentro de eso si bloque, ha agregado un si... más... si cadena que básicamente dice:

Si la persona es menor de 18 años, es demasiado joven para tomar una copa. Si es menor de 21 años, todavía está por debajo de la edad legal para beber en los Estados Unidos. De lo contrario, pueden obtener una bebida legalmente.

Si bien el código anterior es válido, el anidamiento dificulta la comprensión del código. Afortunadamente, puede refactorizar el código para que sea conciso y más fácil de leer usando un cláusula de guardia.

Cláusulas de protección

Cada vez que tienes un si declaración que envuelve todo su código, puede usar una cláusula de guardia para eliminar todo el anidamiento:

funciónpuedebebermejor() {
si(persona?.edad == nulo) devolverconsola.registro("No eres una persona") 
si(persona.edad < 18) {
consola.registro("Todavía demasiado joven")
 } demássi(persona.edad < 21) {
consola.registro("No en los Estados Unidos")
 } demás {
consola.registro("Permitido beber")
 }
}

Al comienzo de la función, definió una cláusula de protección que indica que si no se cumple esa condición específica, desea salir de la puedeBeberMejor() funcione inmediatamente (y registre "No eres una persona" en la consola).

Pero si se cumple la condición, se evalúa el si... más cadena para ver qué bloque es aplicable. Ejecutar el código le da el mismo resultado que el primer ejemplo, pero este código es más fácil de leer.

No use una sola devolución

Usted podría argumentar que la técnica anterior no es una buen principio de programación porque usamos varias devoluciones en la misma función y usted cree que es mejor tener solo una declaración de devolución (también conocida como política de devolución única).

Pero esta es una manera terrible de escribir código porque te obliga a entrar en las mismas situaciones locas de anidamiento que vimos en el primer ejemplo de código.

Dicho esto, puedes usar múltiples devolver declaraciones para simplificar aún más su código (y deshacerse de la anidación):

funciónpuedebebermejor() {
si(persona?.edad == nulo) devolverconsola.registro("No eres una persona") 
si(persona.edad < 18) {
consola.registro("Todavía demasiado joven")
devolver
 } 
si(persona.edad < 21) {
consola.registro("No en los Estados Unidos")
devolver
 }
consola.registro("Permitido beber") 
}

Este código funciona igual que los dos ejemplos anteriores y también es un poco más limpio.

Extraer funciones para código más limpio

Nuestro último bloque de código fue más limpio que los dos primeros, pero aún no es tan bueno como podría ser.

En lugar de tener un largo si... más cadena dentro de una función, puede crear una función separada puedeDrinkResult() que hace la verificación por usted y devuelve el resultado:

funciónpuedeDrinkResult(edad) {
si(edad < 18) devolver"Todavía demasiado joven"
si(edad < 21) devolver"No en los Estados Unidos"
devolver"Permitido beber"
}

Luego, dentro de la función principal, todo lo que necesita hacer es aplicar primero la cláusula de protección antes de llamar al puedeDrinkResult() función (con la edad como su parámetro) para obtener el resultado:

funciónpuedebebermejor() { 
si(persona?.edad == nulo) devolverconsola.registro("No eres una persona") 
dejar resultado = canDrinkResult (persona.edad)
consola.log (resultado)
}

Entonces, en este caso, delegó la tarea de verificar la edad para beber a una función separada y solo la llamó cuando fue necesario. Esto hace que su código sea conciso y más fácil de usar que todos los ejemplos anteriores.

Manténgase alejado de las declaraciones condicionales

Ha aprendido a refactorizar cadenas condicionales anidadas y complejas en otras más cortas y fáciles de leer utilizando cláusulas de protección y la técnica de extracción de funciones.

Trate de mantener el demás declaración lejos de sus condicionales tanto como sea posible mediante el uso de cláusulas de guardia y la técnica de extracción de función.

Si todavía eres nuevo en el uso de JavaScript si... más declaración, comience con lo básico.