Funciones compuestas o Function Composition

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

Resumen

Conocemos como Function Composition a las funciones que obtenemos como resultado de combinar otras dos o más funciones, el resultado de cada función es el argumento de la siguiente y así sucesivamente.

Juan Castro

teacher•

Carlos Gómez Mont

student•

Super aporte, gracias!!

Julio J Yépez

student•

La sintaxis que vemos en el min 03:36 es similar a la manera en que se usan los closures, que seguramente se explicará más adelante en el curso. La clave allí es que tag('h1') est[a retornando una función, que espera como parámetro el contenido.

La función tag, podría ser escrita usando un estilo más convencional así:

function tag( t ){
    return function ( content ){
        return `<${t}>${content}</${t}>`
    }
}

Julio J Yépez

student•

También pudo haber sido definida como una función convencional:

function tag( t, content ){
    return `<${t}>${content}</${t}>`
}

¯\_(ツ)_/¯

William Velázquez

student•

De hecho como mencionas se pudo realizar igual con arrow function pero pasando doble parámetro quedando así:

const tag = (t,content) => `<${t}>${content}</${t}>`

Seguiría funcionando igual. :)

Eliseo Geraldo González

student•

Veo que el código es poco “funcional”, no sería mejor utilizar map, en lugar de hacer un for? creía que uno de los conceptos de la programación funcional era no tener que definir como pasaban las cosas, solo, que iba a pasar

David Colin

teacher•

Por supuesto, más adelante hacemos un refactor de esas funciones. Si no estamos acostumbrados a ver código declarativo es más fácil entender los conceptos de forma imperativa, una vez dominados podemos pensar de manera más funcional.

Eliseo Geraldo González

student•

Si, una disculpa, me adelanté con mi comentario

LUIS EDUARDO CASTILLO GARCIA

student•

Lo he realizado de esta manera. Map retorna el nuevo arreglo con n items.

const attrsToString = (obj = {}) => {
  const keys = Object.keys(obj);
  const attrs = (keys.map(key => `${key}="${obj[key]}"`)).join(' ');
  return attrs;
}```

José María Cuevas Ramírez

student•

Si alguien tiene duda sobre la función compuesta que está creando el profesor, tal vez le podría ayudar verlo con una sintaxis más tradicional:

function createTag (tag) {

  return function (content) {

    return `&lt;${tag}&gt;${content}&lt;/${tag}&gt;`
  }
}

. Si lo vemos de este modo es un poco más fácil ver lo que sucede, cuando llamamos a la función

createTag('h1')('hello world')

lo que está sucediendo trás bambalinas es que primero se ejecuta la función principal createTag, cuyo propósito es regresar una función anónima que recibe el parámetro content , ese segundo paréntesis lo que hace es ejecutar esa función anónima pasándole como valor "hello world". Está función anónima lo que hace es regresar un template literal. A pesar de que la primera función createTag ya haya sido ejecutada, si mal no me equivoco, gracias a los closures es que la segunda función sigue teniendo acceso a cualquier variable que tenga la función padre. Es por eso que cuando se regresa el template literal este tiene los valores que mandamos. . Ojalá haya ayudado esta explicación 😅

Eden Gomez Gress

student•

Me gusto tu explicacion companero. Solo tengo una pregunta, porque cuando manda a llamar la funcion compuesta, al momento de pasarle como argumentos el elemento y el contenido, todo dentro de un parentesis. Porque lo hace con dos parentesis?

createTag('h1')('Hello World')

Porque no asi?

createTag('h1', 'Hello World')

José María Cuevas Ramírez

student•

Para poder llamar función como lo propones necesitaríamos reescribirla para que aceptara 2 argumentos, quedaría algo asÍ:

. El problema con esto es que al ejecutarla lo que nos regresaría la función sería la segunda función, no el resultado de la misma, puesto que la segunda función en ningún momento está siendo llamada, recordemos que para llamar una función se usan los ( ).

Si realmente quisiéramos que funcionara la llamada con 2 argumentos tendriamos que modificar aún más la definición de la función por algo así:

Esto tiene una sintaxis más tradicional, el resultado en este caso particular es el mismo, sin embargo, no se estaría siguiendo el patrón de programación funcional y lo más seguro es que el código de futuras clases no funcione 😞

Espero no te haya confundido más 😅

Danelia Sanchez Sanchez

student•

Introducción a la programación funcional en JavaScript — Parte 3: Composición

Irving Juárez

student•

La composicion de funciones no es mas que una funcion que retorna otra funcion, que a su vez nos retorna algo. En el ejemplo que se uso en la clase, la funcion se llama tag, y esa funcion regresa otra funcion que regresa unos template literales, los cuales son lo que nos regresan lo que realmente queremos. En el ejemplo de abajo se hace lo mismo pero de una manera un poco mas desmenuzada

const tag = (t) => {
    return (content) => {
        return `<${t}>${content}</${t}>`
    }
}

En mi opinión no me gusta, ya que creo que se le agrega mucho complejidad a algo que se puede hacer de la siguiente manera:

const tag2 = (tag, content) => `<${tag}>${content}</${tag}>`

Tomas Goldenberg

student•

Una consulta? porque se utiliza doble => => en la funcion tag en lugar de ( t, content)=> ??

Cesar Colina

student•

Es basicamente una composicion de funciones, evalua primero la funcion mas interna y luego vas hacia afuera

Tomas Goldenberg

student•

gracias!

Julio J Yépez

student•

En el min 03:04, la manera de componer una cadena incrustándole variables con el formato ${var} … se le llama template literal y es una característica introducida por EcmaScript. Lo principal es el uso de apóstrofes diagonales o tildes graves como delimitadores de la cadena, en lugar de apóstrofes rectos, usados en JavaScript para cadenas convencionales (sin variables incrustadas).

// cadena regular delimitada por apóstrofes
const hi = 'Hola Mundo'
// Hola Mundo

// template literal delimitada por símbolo de tilde grave
const saludo = `${hi} nuevo`
// Hola Mundo nuevo

Carlos Gómez Mont

student•

Gracias por compartir, saludos!!

Maria Gabriela Rangel

student•

si no esto mal también se llaman backticks

Miguel Angel Vásquez Correa

student•

Manipulando el DOM :heart:

const createElement =
  (tag = "div") =>
  (content = "", atributes = {}) => {
    const element = document.createElement(tag);
    element.innerText = content;
    Object.entries(atributes).map(([key, value]) => {
      element.setAttribute(key, value);
    });
    return element;
  };

createElement("header")("TITLE", { class: "Header black" });

David Leonardo Garzón piña

student•

esta forma me parecio mas funcional!

alberto ayala rodriguez

student•

Vaya fumada de clase, me explotó la cabeza...aún tengo conmociones, no sabía eso y nunca se me había pasado por la mente hacerlo de esa manera, 10/10

Jorge Méndez Ortega

student•

En vez de utilizar Object.keys podríamos utilizar Object.entries con lo que el código que estamos utilizando queda de la siguiente manera.

const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i]
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(` ${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

Documentacion de Object.entries

Gabriel De Andrade

student•

La sintáxis que utiliza el profesor para insertar variables dentro del String se llama “Template Literals” o en Español “Plantillas de cadena de texto”

Plantillas de cadena de texto - MDN Web Docs

Alison Báez

student•

¿Cuál es la diferencia entre "Funciones Compuestas" y "Higher Order Functions"'? . Según mi entendimiento (favor de corregirme si me equivoco), las H.O.F. o Higher order functions, lo que hacen es recibir otra función como parámetro para así ellas poder ejecutarse. Por otra parte, las Funciones compuestas no toman la función a utilizar como parámetro sino que estas simplemente viven dentro de la misma a modo de separación de responsabilidades...?

David Colin

teacher•

HOF recibe una función como parámetro y retorna una nueva función. Function composition nos permite combinar funciones de tal manera que valor que retorna la primera función se convierte en el argumento de la segunda función 😉

Cristobal Peña

student•

Me llama demasiado la atención que la sitaxis correcta sea

console.log(tag(‘h1’)(‘Title’))

y que sea incorrecto colocar un paréntesis más antes de ‘h1’

console.log(tag((‘h1’)(‘Title’))

¿Qué está sucediendo? Mí no entender :S

Gracias.

Cristobal Peña

student•

Bueno, me autoresponderé. La respuesta a esta pregunta tiene que ver con el concepto "currying" que se aborda en la clase 16.

Fernando Quinteros Gutierrez

student•

Alternativa corta a a la función attrsToString 💅

Si te gusta el código corto esta puede ser una solución

const attrsToString = (obj = {}) =>
  Object.keys(obj)
    .map((key) => `${key}="${obj[key]}"`)
    .join("");

Ángel David Roque Ayala

student•

Funciones compuestas

Para crear aplicaciones que resuelvan problemas complejos, debemos dividir estos en problemas pequeños que podamos resolver e implementar, luego componemos estas soluciones. Esto es lo que hacemos cada día como programadores y hoy veremos como hacer esto usando funciones en JavaScript.

En matemáticas, la composición de una función es definida como: (f ◦ g)(x) = f (g(x)).

Ejemplo

// Crearemos una funcion para calcular el promedio
// de salarios de un grupo de usuarios

const users = [
  {
    name: 'Usuario 1',
    salario: 900
  },
  {
    name: 'Usuario 2',
    salario: 1000
  },
  {
    name: 'Usuario 3',
    salario: 1100
  },
];



// Sumar
function sumarSalarios (users) {
  let sumaDeSalarios = 0; 
  for (const i in users) {
    sumaDeSalarios += users[i].salario;
  }

  return sumaDeSalarios;
}


// promedio
const promedio = (users) => sumarSalarios(users) / users.length;

Manuel Rivera

student•

ya que estamos hablando de programación funcional, lo hice de la siguiente manera

function attrsToString (obj = {}) {
  const keys = Object.keys(obj);
  const attrs = [];

  for(const i in keys) {
    let attr = keys[i];
    attrs.push(`${attr}="${obj[attr]}"`);
  }

  const string = attrs.join('');

  return string;
}```

David Antonio Ordóñez Cornejo

student•

Aquí una explicación super interesante de composition Functional programming design patterns by Scott Wlaschin

Carlos Enrique Ramírez Flores

student•

Gracias!

Eder Raúl Abarca Raviela

student•

Utilice reduce para quitar el for..loop

const attrsToString = (obj = {}) => {
  const keys = Object.keys(obj)

  let attrs = keys.reduce((acc, attr) => acc +=`${attr}=${obj[attr]} `,'');

  return attrs
}

Funciones compuestas o Function Composition

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