10 trucos para reducir la complejidad de tu código
JavaScript es un lenguaje de programación popular y versátil, pero a veces puede ser fácil escribir código que sea demasiado complicado y difícil de mantener. En este artículo, te presento 10 consejos para ayudarte a simplificar y reducir la complejidad de tu código en JavaScript.
Divide el código en funciones pequeñas y específicas
Las funciones pequeñas y específicas son más fáciles de entender y mantener que las funciones grandes y complejas. Trata de dividir una función grande en varias funciones más pequeñas y que cada una de estas funciones se encargue de una tarea específica. Por ejemplo:
Por ejemplo, imagína el siguiente código:
function getAgeDescription(age) {
return age < 18 ? "menor de edad" : "mayor de edad";
}
function getStudentDescription(isStudent) {
return isStudent ? "es estudiante" : "no es estudiante";
}
function getJobDescription(hasPartTimeJob) {
return hasPartTimeJob ? "tiene trabajo a tiempo parcial" : "no tiene trabajo a tiempo parcial";
}
function getUserDescription(user) {
return `${getAgeDescription(user.age)}, ${getStudentDescription(user.isStudent)}, ${getJobDescription(user.hasPartTimeJob)}`;
}Como podrás observar, tenemos varios condicionales. Podríamos mejorar esta código añadiendo funciones que nos indiquen la intencionalidad de nuestro código y por ello, que éste sea más legible.
2. Usa constantes en lugar de valores mágicos.
Los valores mágicos son valores hardcoded que no tienen un nombre o contexto claro en el código. En su lugar, es mejor usar constantes con nombres descriptivos que describan su propósito. Por ejemplo:
const DISCOUNT_TYPE_1 = 1;
const DISCOUNT_AMOUNT_1 = 2;
function getDiscount(price, type) {
if (type === DISCOUNT_TYPE_1) {
return price * DISCOUNT_AMOUNT_1;
} else {
return 0;
}
}3. Evita las funciones anidadas y usa closures en su lugar.
Las funciones anidadas pueden hacer que el código sea más complicado y difícil de leer. En su lugar, es mejor usar closures para mantener una referencia a una función externa y tener acceso a su scope.
Ejemplo con funciones anidadas:
function getDiscount(price) {
let discount = 0;
function checkMembership() {
if (membership === "premium") {
discount = 0.15;
} else {
discount = 0.1;
}
}
checkMembership();
return price * discount;
}Con clousures:
function getDiscount(price) {
let discount = 0;
return function(membership) {
if (membership === "premium") {
discount = 0.15;
} else {
discount = 0.1;
}
return price * discount;
}
}
const calculateDiscount = getDiscount(100);
calculateDiscount("regular"); // 10
calculateDiscount("premium"); // 15En este ejemplo, la función getDiscount devuelve una función anónima que tiene acceso a discount y price. La función devuelta toma un parámetro membership que se utiliza para actualizar el valor de discount. La función devuelta también devuelve el precio con el descuento aplicado. Al llamar a getDiscount con un precio, se crea una nueva instancia de la función anónima con su propio scope para discount y price. Después, se puede llamar a la función devuelta con diferentes valores de membership para obtener diferentes descuentos.
4. Usa destructuración para acceder a valores de objetos y arrays de manera más clara y concisa.
La destructuración en JavaScript permite acceder a los valores de objetos y arrays de una manera más clara y concisa.
const person = {
firstName: "John",
lastName: "Doe",
age: 30
};
const { firstName, lastName, age } = person;5. Usa el operador spread para mezclar objetos y arrays
El operador spread en JavaScript permite mezclar objetos y arrays de una manera más sencilla y clara.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 }; // { a: 1, b: 2, c: 3, d: 4 }6. Usa arrow functions para escribir funciones de manera más clara y concisa.
Las arrow functions son una forma concisa y clara de escribir funciones en JavaScript. En vez de esto:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
numbers.forEach(function(number) {
doubledNumbers.push(number * 2);
});Haz esto:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);7. Usa módulos para organizar y reutilizar código de manera más clara y eficiente.
Los módulos en JavaScript permiten organizar y reutilizar código en lugar de tener que escribir código repetitivo
Archivo math.js:
export function sum(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}Archivo index.js:
import { sum, subtract } from './math.js';
console.log(sum(1, 2)); // 3
console.log(subtract(5, 2)); // 38. Usa destructuración de objetos y arreglos para acceder a valores de manera más clara y concisa.
La destructuración de objetos y arreglos en JavaScript permite acceder a valores de manera más clara.
Antes:
const person = { firstName: "John", lastName: "Doe", age: 30 };
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;Con destructuración:
const person = { firstName: "John", lastName: "Doe", age: 30 };
const { firstName, lastName, age } = person;9. Usa operadores ternarios para simplificar condicionales simples
En algunos casos, puede ser útil usar un operador ternario en lugar de un condicional if/else.
Con un condicional if/else:
function checkAge(age) {
if (age >= 18) {
return "mayor de edad";
} else {
return "menor de edad";
}
}Con un operador ternario:
function checkAge(age) {
return age >= 18 ? "mayor de edad" : "menor de edad";
}10. Refactoriza y optimiza tu código regularmente.
Por último, pero no menos importante, es importante refactorizar y optimizar tu código regularmente. Esto te permitirá mantener el código limpio y eficiente, y prevenir la acumulación de código complejo e innecesario. Haz una revisión regular de tu código y considera si puedes eliminar o simplificar cualquier código que ya no sea necesario, o si puedes reorganizar el código para hacerlo más fácil de leer y mantener.