Mejores prácticas para las declaraciones condicionales en JavaScript
Este artículo explica las mejores prácticas para las declaraciones condicionales en JavaScript.
YouTube Video
Mejores prácticas para las declaraciones condicionales en JavaScript
Las declaraciones if son una estructura de control fundamental en los programas de JavaScript. Sin embargo, a medida que el código se vuelve más complejo, el número de declaraciones if puede aumentar, haciendo que el código sea más difícil de leer. Esta vez, profundizaremos en las mejores prácticas para diseñar correctamente las declaraciones if en JavaScript con el fin de mejorar la legibilidad y la mantenibilidad.
Simplifica el código usando banderas.
Simplifica condiciones que involucran múltiples criterios utilizando valores booleanos.
Ejemplos a Evitar
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Ejemplos Mejorados
Usa banderas para aclarar las condiciones.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Mantén las declaraciones condicionales sencillas
Cuando una expresión condicional se vuelve compleja, la legibilidad del código disminuye, por lo que es necesario mantener la condición simple.
Ejemplos a Evitar
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Ejemplos Mejorados
Al descomponer la condición en variables con significados específicos, puedes aclarar su intención.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Aclara la precedencia de los operadores lógicos.
En las declaraciones if de JavaScript, malinterpretar la precedencia de los operadores lógicos puede llevar a comportamientos no deseados.
Ejemplos a Evitar
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}Ejemplos Mejorados
Cuando la precedencia de los operadores no está clara, puedes usar paréntesis de manera adecuada para aclarar.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Utilizar la evaluación de cortocircuito
JavaScript admite la evaluación cortocircuitada tanto para los operadores && (AND) como || (OR). La evaluación cortocircuitada significa que cuando se determina el resultado de una condición durante la evaluación, la parte restante no se evalúa.
AND(&&): Si el lado izquierdo se evalúa como falso, el lado derecho no se evalúa y se devuelve su valor.OR(||): Si el lado izquierdo se evalúa como verdadero, el lado derecho no se evalúa y se devuelve su valor.
Ejemplos a Evitar
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Ejemplos Mejorados
En este código, la función user?.someComplexFunction() se llama incluso si user?.isLoggedIn es false.
Comprender la evaluación cortocircuitada puede ayudarte a evitar cálculos innecesarios y a escribir código eficiente.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimiza el uso de declaraciones else
Las declaraciones else pueden aumentar la carga cognitiva al rastrear el código. En su lugar, considera utilizar retornos tempranos.
Ejemplos a Evitar
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Ejemplos Mejorados
Aclara las condiciones con retornos tempranos.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Uso adecuado del operador ternario
Para condiciones simples, el uso de un operador ternario puede acortar tu código. Sin embargo, evita anidar lógica o usar lógica compleja.
Ejemplos a Evitar
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Ejemplos Mejorados
Prioriza la legibilidad dividiendo las condiciones.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}Utilizar valores predeterminados y la evaluación de cortocircuito
Usa valores predeterminados y evaluación de cortocircuito para reducir ramificaciones y simplificar el código.
Ejemplos a Evitar
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Ejemplos Mejorados
En este caso, usar operadores lógicos lo hace más conciso.
1// Good Example
2displayName = user?.name || 'Guest';Diferencia adecuadamente cuándo usar las declaraciones switch.
Cuando se necesitan múltiples condiciones, las declaraciones switch pueden aclarar las intenciones.
Ejemplos a Evitar
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}Ejemplos Mejorados
El uso de declaraciones switch puede ayudar a organizar el código.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}Utilizar cláusulas de protección con condiciones de salida temprana
Una cláusula de protección es una técnica que utiliza declaraciones if para salir de una función de forma temprana.
Ejemplos a Evitar
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}Ejemplos Mejorados
Usa cláusulas de protección para reducir la anidación.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Escribe comentarios para aclarar intenciones.
Para condiciones complejas o ramas críticas, añade comentarios concisos y claros para transmitir la intención del código.
Ejemplos a Evitar
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Ejemplos Mejorados
Añade comentarios para dejar claras las intenciones.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}Conclusión
El uso efectivo de las declaraciones if en JavaScript puede mejorar enormemente la legibilidad y el mantenimiento del código.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.