Código limpio en JavaScript y buenas prácticas

Escribir un código limpio en JavaScript mejora la capacidad de mantenimiento de la aplicación y hace que los desarrolladores sean productivos. Sin embargo, algunos desarrolladores desconocen las características del lenguaje disponibles para mejorar aún más el código.

En este artículo, hablaré de cómo podemos utilizar las características de JavaScript para escribir un código limpio.

Utilizar varios parámetros en lugar de un único parámetro de objeto

Al declarar una función, siempre debemos utilizar múltiples parámetros de entrada en lugar de entradas de un solo objeto. Este enfoque ayuda a los desarrolladores a entender fácilmente el número mínimo de parámetros que hay que pasar mirando la firma del método.

Además, mejora el rendimiento de la aplicación, ya que no es necesario crear parámetros de objetos ni recoger basura.

//recomendado
function CustomerDetail (CustomerName, CustomerType, Order){    
  console.log('Este es ${CustomerName} de ${CustomerType} y necesita ${Order}');
} 
//no recomendado
function CustomerDetail (User){    
  console.log('Este es ${User.CustomerName} de ${User.CustomerType} y necesita ${User.Order}');
}

Ahora estarás pensando: «Pero si tengo un objeto con decenas de entradas, tardaré siglos en declararlas todas y crear nombre de variable decentes…». Y tienes toda la razón del mundo. Obviamente, hay que saber cuándo se puede utilizar esta optimización ya que no es lo mismo un objeto que describa cientos de cosas a un objeto que te devuelva nombre, tipo y pedido. Tienes que saber cuándo es mejor utilizarlo.

En este ejemplo, es mejor usarlo ya que son solo 3 parámetros y los vamos a usar más de una vez, por lo que sería más óptimo declarar una variable para ellos, en el caso de que los parámetros sean muy numerosos, lo mejor es seguir usando el objeto base para llamarlos.

Nota: Si utilizas TypeScript y tienes varios parámetros, es más fácil definir la interfaz de los parámetros para beneficiarse de la comprobación de tipos y las autosugerencias.

Utilizar la desestructuración de objetos como base

La desestructuración de objetos es, en mi opinión, el sumun del código limpio en JavaScript; te permite tomar campos específicos de un objeto y asignarlos a una variable al instante. Reduce el número de líneas de código que necesitamos para extraer las propiedades del objeto y hace que tu código sea más fácil de entender. Este sería el paso lógico para llevar a cabo el punto 1 de este artículo, así, en solo dos líneas podrías declarar y darle a valor a varias variables, en este caso, constantes.

La desestructuración de objetos ahorra una gran cantidad de declaraciones explícitas de variables, y es realmente útil en situaciones en las que:

• Utilizas varias propiedades de un objeto.
• Utilizas la misma propiedad varias veces.
• Utilizas una propiedad profundamente anidada en un objeto.

const empleado = {name: ‘ANE01’, email: ‘Anna@example.com’, phone:’0112–345–6789'};
//con desestructuración
const {name, email, phone} = empleado;
//sin desestructuración
const name = empleado.name;
const email = empleado.email;
const phone = empleado.phone;

El resultado de los dos ejemplos anteriores (con y sin desestructuración) es idéntico. Pero el uso de la desestructuración de objetos hace que el código sea mucho más sencillo y fácil de entender.

Utiliza las funciones de flecha para tu código limpio

Las funciones de flecha proporcionan una forma concisa de escribir funciones de JavaScript y resuelven el problema de acceder a esta propiedad dentro de las devoluciones de llamada. Además de mantener tú código limpio y más legible, es un habitual en las buenas prácticas de las nuevas versiones de JavaScript.

Si utilizas funciones de flecha, las llaves, los paréntesis, la función y las palabras clave de retorno pasan a ser opcionales. Y lo que es más importante, tu código se vuelve más comprensible y claro.

El siguiente ejemplo muestra una comparación entre una función de flecha de una línea sin paréntesis y una función regular.

// Función de flecha
const myOrder = order => console.log(`El cliente necesita ${order}`);
// Función regular
function(order){
   console.log(`El cliente necesita ${order}`);
}

Aunque las funciones de flecha son mucho más sencillas, debemos entender cuándo y cómo utilizarlas.

Por ejemplo, utilizar funciones de flecha no es el mejor enfoque cuando se trabaja con prototipos de objetos, clases u objetos literales.

Además, las funciones de flecha no pueden utilizarse como constructores de funciones. Recibirás un error si utilizas la palabra clave new para crear un nuevo objeto a partir de una función de flecha.

Utiliza la abreviación, JavaScript te lo agradecerá

Al trabajar con condiciones, el método abreviado puede ahorrarte mucho tiempo y espacio. Seguro que ahora me dirías: «Ya Martín, pero lo mejor para que entienda este IF dentro de 6 meses es ser lo más específico dentro de la condición, además no lo tengo muy controlado y pierdo más tiempo buscando la forma abreviada que haciéndolo directamente»

No te falta razón, pero piensa que si necesitas explicar una condición, tienes dos elementos como estos // para explicar encima de cada condición lo que necesitas que te recuerden posteriormente y, además, las formas abreviadas es como todo, una vez que las empieces a usar, se incorporarán poco a poco en tu forma de programar sin quererlo.

Por ejemplo, si escribes una condición para comprobar si una variable es empty, null o undefined, debes escribir 2 condiciones dentro de la sentencia if.

if (x !== “” && x !== null && x !== undefined) { ... }

Sin embargo, si utilizas el operador abreviado, basta con que escribas una sola condición como la siguiente:

if ( !!x ) { ... }

Utilizar literales de plantilla para las concatenaciones de cadenas

Los literales de plantillas son literales delimitados por backticks (`). Proporcionan una forma sencilla de crear cadenas multilíneas y realizar la interpolación de cadenas.

Por ejemplo, podemos definir un marcador de posición en una cadena para eliminar todas las concatenaciones innecesarias.

//antes
var nombre = 'Peter';
var mensaje = 'Hola'+ name + ',';
//después
var nombre = 'Peter';
var mensaje = `Hola ${name},`;

Operador spread (de propagación)

El operador spread (…) es otra característica introducida con ES6. Es capaz de expandir los literales como arrays en elementos individuales con una sola línea de código.

Este operador es realmente útil cuando necesitamos poner un array u objeto en un nuevo array u objeto o para combinar varios parámetros en el array.

El siguiente código muestra cómo combinar 2 arrays utilizando el operador de dispersión. Como puedes ver, hace que el código sea limpio y fácil de entender, ya que no necesitamos utilizar bucles ni condiciones.

let x = [coche, autobús, furgoneta];
let y = [bicicleta, camión, ..x, camioneta]
console.log (y);
// bicicleta, camión, coche, autobús, furgoneta, camioneta

Evita los callbacks

Las devoluciones de llamada o callbacks solían ser la forma más popular en JavaScript de expresar y manejar funciones asíncronas en los programas de JavaScript. Sin embargo, si todavía lo utilizas, espero que ya conozcas el dolor de manejar múltiples devoluciones de llamada anidadas.

Por ejemplo, el siguiente código contiene 4 funciones de devolución de llamada, y será aún más difícil cuando el código empiece a crecer.

function1(function (err, data) { 
  ...  
  function2(user, function (err, data) {
    ...
     function3(profile, function (err, data) {
      ...
      function4(account, function (err, data) {
        ....
      }); 
    }); 
  });
});

Como solución, ES6 y el mal llamado ES7 introdujeron, Promesas y Async/Await para manejar funciones asíncronas, son mucho más fáciles de usar y hacen que tu código sea fácilmente comprensible para los demás.

Además, si utilizas Promises o Async/Await, tu código será limpio y mucho más fácil de entender.

// Promises
function1() 
.then(function2) 
.then(function3) 
.then(function2) 
.catch((err) => console.error(err));
// Async/Await
async function myAsyncFunction() {  
try {    
  const data1= await function1();    
  const data2= await function2(data1);    
  const data3= await function3(data2);    
  return function4(data4);  
} 
catch (e) {    
  console.error(err);  
}}

Conclusión

En este artículo, hablo de cómo podemos utilizar las características de JavaScript para escribir un código limpio.

Como desarrolladores, debemos escribir siempre código limpio, ya que aumenta la legibilidad y facilita la comprensión del código para ti y tu equipo.

En mis años como desarrollador web he aprendido que, al final, lo que importa es que, además de poder usar un código de hace meses en una aplicación nueva, sea fácil de leer ya que así te puedes ahorrar muchas horas de programación al final del día. Además, todos sabemos que el JavaScript, aunque es un lenguaje de programación increíblemente optimizado, si le das un poco de «cancha» acaba sobrecargándose y haciendo nuestras aplicaciones cada vez más lentas, por eso es importante saber crear un código liviano y fácil de mantener.

Espero que estas sugerencias te ayuden a mejorar la legibilidad de tu código y, si tienes alguna sugerencia, compártela con los demás en la sección de comentarios.