Cómo la composición sin puntos te convertirá en un mejor programador funcional

Discover Functional JavaScript fue nombrado uno de los mejores libros nuevos de programación funcional por BookAuthority .

"Estilo sin puntos: tiene como objetivo reducir parte del desorden visual al eliminar el mapeo innecesario de parámetros y argumentos". - Kyle Simpson en JavaScript funcional ligero

Considere el código fluido:

let newBooks = books.filter(point => isTechnology(point))

Ahora mire el mismo código después de eliminar puntos (parámetros / argumentos):

let newBooks = books.filter(isTechnology)

Sin puntos en operaciones de lista

Hagamos operaciones de lista en un estilo sin puntos.

Supongamos que necesitamos encontrar los títulos de tecnología en una lista de libros, preparar el objeto de libro con toda la información para la vista y ordenar los libros por el nombre del autor.

Así es como se vería el código:

function getBooks(){ return books.filter(isTechnology) .map(toBookView) .sort(ascByAuthor); } //Small functions with points function isTechnology(book){ return book.type === "T"; } function toBookView(book){ return Object.freeze({ title : book.title, author : authors[book.authorID].name }); } function ascByAuthor(book1, book2){ if(book1.author  book2.author) return 1; return 0; }

Las devoluciones de llamada isTechnology(), toBookView(), ascByAuthor()son pequeñas funciones con nombres intención de revelar. No están construidos en un estilo sin puntos.

El código que ensambla todas estas funciones no getBooks()tiene puntos.

Descomposición y composición

Nuestra forma natural de lidiar con un problema es dividirlo en pedazos más pequeños y luego volver a armar todo.

Dividimos la tarea más grande en varias funciones que realizan tareas más pequeñas. Luego, volvemos a combinar estas funciones más pequeñas para resolver el problema inicial.

Leamos los requisitos nuevamente:

Necesitamos encontrar los títulos de tecnología en una lista de libros, preparar el objeto de libro con toda la información para la vista y ordenar los libros por el nombre del autor.

Creamos:

  • isTechnology() predicado para comprobar si es un libro de tecnología
  • toViewBook() para construir un objeto con toda la información para la vista
  • ascByAuthorname() ordenar dos libros de forma ascendente por el nombre del autor
  • getBooks() para combinar todas estas pequeñas funciones juntas en un estilo sin puntos
function getBooks(){ return books.filter(isTechnology) .map(toBookView) .sort(ascByAuthor); }

Pasos hacia la composición sin puntos

No hay devolución de llamada anónima adicional cuando se realiza una composición sin puntos. Sin functionpalabra clave, sin sintaxis de flecha => . Todo lo que vemos son nombres de funciones.

  • En la mayoría de los casos, extraiga las devoluciones de llamada en funciones con nombre.
  • En casos simples, simplemente use una función de utilidad de la caja de herramientas para crear la devolución de llamada sobre la marcha. Mira la prop()función, por ejemplo.
  • Escribe la función del coordinador en un estilo sin puntos.

Pequeñas funciones

La consecuencia de escribir código de esta manera son muchas funciones pequeñas con la intención de revelar nombres. Nombrar estas pequeñas funciones requiere tiempo, pero si se hace bien, hará que el código sea más fácil de leer.

Habrá dos tipos de funciones:

  • Funciones que realizan una tarea: son funciones puras o de cierre. Por lo general, no están construidos en un estilo libre de puntos, sino que tienen buenos nombres.
  • Funciones que coordinan muchas tareas: unir estas pequeñas tareas en un estilo sin puntos hace que sea más fácil de leer.

No todo es sin sentido

No pretendo tener todo sin sentido. Mi objetivo es sin puntos en lugares específicos, especialmente al componer funciones.

Discover Functional JavaScript fue nombrado uno de los¡Los mejores libros nuevos de programación funcional de BookAuthority !

Para obtener más información sobre la aplicación de técnicas de programación funcional en React, eche un vistazo a Functional React .

Aprenda React funcional , de una manera basada en proyectos, con Arquitectura funcional con React y Redux .

Seguir en Twitter