Transformación de datos en JavaScript – Pipes

En este pequeño artículo veremos como gestionar la transformación de datos en JavaScript y como crear y utilizar de manera sencilla lo que conocemos como «pipes» o «tuberías» en español.

Con un pipe, nos referimos a una función a través de la cual pasamos nuestra información y ésta es procesada y tratada de una determinada manera según nuestras necesidades y nos retorna un resultado ya procesado y listo para mostrar al usuario.

Es muy común las veces que necesitamos obtener una información, tratarla o modificara de determinada manera y utilizar posteriormente en resultado de estas modificaciones para mostrarlo al usuario, por ejemplo modificar el formato de una fecha, realizar un cálculo, capitalizar o modificar una cadena de texto. Sea cual sea el caso, si este proceso se repite varias veces en nuestro código podría llevarnos a la repetición continua de éste una y otra vez, para esto utilizamos funciones que nos realizan este trabajo de manera sencilla y nos retornan el valor modificado, pero… ¿Que pasa si requerimos de varias transformaciones/modificaciones? pues bien, llegados a este punto podemos optar por varias alternativas.

1º Funciones personalizadas por modificación (No recomendada)

Podríamos realizar funciones que cumplieran lo que necesitamos y realizaran todas estas transformaciones, por ejemplo:

  const saludar  = ( nombre ) => 'hola ' + nombre;

  const revertir = ( text ) => text.split('').reverse().join('');

  const saludarYrevertir = ( nombre ) => {
     const saludo = saludar(nombre);
     return revertir( saludo );
  }; 

  // Logs
  saludar('Chema'); // Hola Chema
  revertir( saludo ); // amehC aloh
  saludarYrevertir( 'Chema' ); // amehC aloh

De esta forma podríamos ir creando funciones conforme lo necesitemos, algo funcional pero para nada práctico, ya que si tenemos varias modificaciones acabaríamos escribiendo mucho código innecesario que dificultaría su lectura y mantenimiento posterior.

Para lidiar con podemos optar por otra solución.

2º Encadenar funciones (Poco recomendada)

También podemos optar por encadenar estas funciones de la forma tradicional (incluyendo una dentro de otra).

revertir( saludar('Chema') );

Esta opción quizá sea algo más interesante a la hora de ahorrarnos código innecesario pero el problema viene por la legibilidad, con 2 funciones encadenadas aún nos resulta legible, pero si la cantidad es mayor puede convertirse en un auténtico caos como vemos si añadimos una función más al ejemplo.

const capitalizar = ( nombre ) => nombre.charAt(0).toUpperCase() + nombre.slice(1);

revertir( capitalizar( saludar('Chema') ) ); // amehC aloH

Como ves, con 3 funciones empieza a aumentar la complejidad de su lectura, no digamos ya si seguimos añadiendo… por ello, se han elaborado soluciones más mantenibles y escalables como veremos en el siguiente ejemplo.

3º Crear una función pipe

Con un pipe en JavaScript, nos referimos a una función a través de la cual pasamos nuestra información y esta es procesada y tratada de una determinada manera según nuestras necesidades y nos retorna un resultado ya procesado y listo para mostrar al usuario.

La ventaja con al utilizar este tipo de función es que podemos encadenar diversas transformaciones sin tener que crear funciones para cada variación de nuestras necesidades.

const pipe = (...myFilterfunctions ) => {
    return (params) => myFilterfunctions.reduce( (previous, current) => current( previous ), params )
}

Como vemos, no es más que una función que recibe varias funciones como parámetro y retorna un función, a esta función retornante se le pasa el dato (parámetro) que queremos procesar y gracias al «reduce», ella misma se encarga de ir ejecutando la cadena de funciones pasando como parámetro el retorno de la función anterior.

pipe(saludar, capitalizar, revertir )('Chema') // amehC aloH

Como ves la lectura es infinitamente más sencilla de esta manera ya añadas las transformaciones que quieras el pipe, siempre sera mucho mas sencillo de entender, mantener y escalar.

Si quieres aprender más buenas prácticas te recomiendo visitar el siguiente artículo que detalla diversas buenas prácticas en JavaScript, para que sigas mejorando tu código cada día.

¿A ti que te parece? ¿Te ha parecido interesante este método de pipes en JavaScript para la transformación de datos?

Si es así comparte con tus amigos y conocidos para que sigamos entre todos mejorando cada día en este amplio mundo de la programación

Compartir en: Facebook | Twitter | LinkedIn | Whatsapp

Si tienes alguna duda o aportación no dudes en dejarla en los comentarios.