Proyecto: Construyendo filas y celdas

Clase 17 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Clase anteriorSiguiente clase

Bryan Estiven Silva Mercado

student•

espero que mas adelante se explique la función del principio un poco mas

Guillermo García López

student•

Tratando de explicar la función compose. Tenemos lo siguiente:

La función compose está realizando una composición de funciones. Recordando la notación matemática, y teniendo en consideración las funciones f y g, vemos que la composición de estas es la siguiente (g º f)(x) = g(f(x)). Lo que quiere decir que el resultado de f(x) es pasado a la función g, y g regresa un valor.

Después de esa breve teoría expliquemos el código la función compose. Tenemos que compose está definida de la siguiente forma:

const compose = (...functions) => data => functions.reduceRight((value, func) => 
func(value), data)

Para hacer la lectura de compose más fácil, quitemos las arrow function, por lo que la función quedaría así:

function compose(...functions) { // (*)
  return function(data) { // (**)
    return functions.reduceRight(function(value, func) { // (***)
      return func(value)
    }, data)
  }
}

Y también recordemos la manera en como compose está siendo utilizada en el proyecto del curso, para entender la composición que se está realizando.:

const tableRow = items => compose(tableRowTag, tableCells)(items);

Empecemos por entender qué significa la sentencia ...functions. Esa sentencia está haciendo uso de los rest parameters de JS. Los rest parameters pueden ser utilizados en la definición de una función con los "...". Significan, literalmente, "reune los parámetros restantes en un array". Por lo anterior, y por la forma en cómo está siendo aplicada la función compose, tenemos que:

...functions va a generar el siguiente array, functions = [tableRowTag, tableCells], que va a poder se utilizado dentro de compose.

En la línea (**) vemos que compose está regresando una función, cuyo parámetro es data, eso implica, que al momento de usar compose en nuestro proyecto se le esté pasando la variable items, de otra manera la funcionalidad de compose no se cumpliría por completo.

compose(tableRowTag, tableCells)(items)

En la línea (***), vemos que se está haciendo utilización de la función reduceRight en el array functions, y cuyo initialValue es data. reduceRight funciona de manera invesa a reduce, o sea que empieza a tomar valores de derecha a izquierda.

Para la primera interación de reduceRight, se tienen los siguientes valores:

value = data // pero data = [item.description, item.calories, item.carbs, item.protein, removeButton]
func = tableCells

Y cuya ejecución de código que realiza es:

tableCells([item.description, item.calories, item.carbs, item.protein, removeButton])

El resultado de la función anterior es un string, que va a tener la siguiente forma:

"<td>description</td><td>calories</td><td>carbs</td><td>removeButton</td>"

Para la segunda iteración de reduceRight, tenemos los siguientes valores:

value = "<td>description</td><td>calories</td><td>carbs</td><td>removeButton</td>"
func = tableRowTag

La ejecución que realiza es:

tableRowTag("<td>description</td><td>calories</td><td>carbs</td><td>removeButton</td>")

Y función que realiza la función tableRowTag es agregar la etiqueta tr al elemento que se le pase como argumento.

Por lo que el resultado de haber ejecutado la función compose de esta forma:

compose(tableRowTag, tableCells)(items)

Da como resultado:

"<tr><td>description</td><td>calories</td><td>carbs</td><td>removeButton</td></tr>"

Y esa cadena va a ser agregada al tbody de nuestro proyecto.

Nathaly Stefani Riaño Bejarano

student•

Muchas gracias por la aclaración! Me ayudo a comprender el ejercicio.

Carlos Eduardo Gomez García

teacher•

Vale... no entiendo muy bien la función del inicio pero bueno

Una desventaja que estoy viendo de todo esto es que se está haciendo más difícil de leer el código

Fernanda Aragon

student•

🤯🤯🤯🤯🤯

Francisco Garcia [C6]

student•

Ok, gracias a los compañeros de clases pasadas por la explicacion

Usuario anónimo

user•

Ya veo el por qué de React, Angular, Vue y Svelte, trabajar con el DOM aplicando funciones puras de javascript, es muy... pero muy tedioso. Sinceramente, ¡desgasta! Puedo considerar, que al tema le faltó contexto, porque simplemente, ese tipo de cosas se pueden hacer mucho más fácil... hubiese sido lindo en el curso trabajar un proyecto del lado del backend. Es lo que puedo percibir. Siendo así, ¿quién trabajaría así con javascript del lado del front-End? incluso, con vanillaJS es mucho menos tedioso.

Ariel Chura

student•

Les comparto un ejemplo que me ayudo a entender la funcion compose:

const compose = (...fns) =&gt; x =&gt; fns.reduceRight((acc, curr) =&gt; curr(acc), x);

const mapToDouble = arr =&gt; arr.map(x =&gt; x * 2); //[4, 8, 4]
const mapToObj = arr =&gt; arr.map(value =&gt; ({ value })); //[ { value: 4 }, { value: 8 }, { value: 4 } 
const sumAll = arr =&gt; arr.reduce((acc, curr) =&gt; acc + curr.value, 0); //16 

// function compose(...fns){
//   console.log(fns)
//   return function(x){
//     console.log(x)
//     return fns.reduceRight((acc, curr) =&gt; curr(acc), x);
//   }
// }

const originalArr = [2, 4, 2];

// sin usar compose
const result1 = sumAll(mapToObj(mapToDouble(originalArr)));
// usando compose

const result2 = compose(
  sumAll,
  mapToObj,
  mapToDouble,
)(originalArr);


console.log(`result1: ${result1}`);
console.log(`result2: ${result2}`);

David Leonardo Garzón piña

student•

Lo que veo es un monton de codigo super enredado y nada mantenible ...

Juan Esteban Galvis

student•

Para entender lo de ...functions dejo este vídeo explicando el tema: https://youtu.be/1Q0npMK0Odw?t=203

const compose = (...fns) =&gt; x =&gt; fns.reduceRight((acc, curr) =&gt; curr(acc), x);

const mapToDouble = arr =&gt; arr.map(x =&gt; x * 2); //[4, 8, 4]
const mapToObj = arr =&gt; arr.map(value =&gt; ({ value })); //[ { value: 4 }, { value: 8 }, { value: 4 } 
const sumAll = arr =&gt; arr.reduce((acc, curr) =&gt; acc + curr.value, 0); //16 

// function compose(...fns){
//   console.log(fns)
//   return function(x){
//     console.log(x)
//     return fns.reduceRight((acc, curr) =&gt; curr(acc), x);
//   }
// }

const originalArr = [2, 4, 2];

// sin usar compose
const result1 = sumAll(mapToObj(mapToDouble(originalArr)));
// usando compose

const result2 = compose(
  sumAll,
  mapToObj,
  mapToDouble,
)(originalArr);


console.log(`result1: ${result1}`);
console.log(`result2: ${result2}`);

Proyecto: Construyendo filas y celdas

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones