Funciones de orden superior: que son y un ejemplo de React

Serie de jerga tecnológica

Hay tantas frases que se lanzan en reuniones y conferencias de tecnología, asumiendo que todos ya conocen la jerga. A menudo no me dejo llevar por la jerga. Es común que los desarrolladores se asombren de que me falte un poco de conocimiento.

La verdad es que a menudo no conozco la palabra correcta. Como humanos, pero especialmente como humanos desarrolladores, nos encanta descartar a aquellos que no "hablan lo que se habla", por lo que esta serie trata sobre obtener una comprensión sólida de los conceptos de programación que uno "debería saber".

Mi primer tema para esta serie son las funciones de orden superior. Estuve en una reunión de tecnología el otro día, y estábamos discutiendo React y lo difícil que puede ser para los novatos de React ingresar al código. Mencioné que los componentes de orden superior (HOC) pueden ser difíciles de entender. Una respuesta fue que se parecen mucho a funciones de orden superior, ¿no estoy de acuerdo? Y dije: "No sé qué es eso". Cuando pedí un ejemplo, me dijeron "mapa". Hice una broma sobre que no tengo ni idea de lo que es "mapa" y seguimos adelante.

Pero aún así: ¿qué es una función de orden superior?

(Nota: todos los ejemplos dados están en Javascript, pero este concepto se aplica a todos los lenguajes de programación).

Funciones de orden superior: una definición

Una función de orden superior es aquella que a) toma una función como argumento ob) devuelve una función.

Si una función no hace ninguna de esas cosas, es una función de primer orden .

Mapa

Vamos a empezar con el ejemplo que me dieron: map.

[1, 2, 3].map(num => num * 2)> [2, 4, 6]

La mapfunción se llama en una matriz y toma una función de "devolución de llamada". Aplica la función a cada uno de los elementos de la matriz, devolviendo una nueva matriz. [1, 2, 3]es nuestra matriz y num => num * 2 es nuestra función. Una devolución de llamada es el argumento de la función que se pasa a nuestra función de orden superior.

Este HOF está integrado en el lenguaje, prototipado en Array ( Array.prototype.map).

Otros ejemplos de Höfs prototipos de matriz son filter, reducey some.

Ejemplo personalizado

Así que escribamos nuestra propia función de orden superior.

Función aprobada

const myFunc = age => age * 2

Función de orden superior

Ahora escribimos una función que acepta una función.

const hof = (customFunc, age) => customFunc(age + 5) 

Pasaremos un número a hof, que agregará 5 y luego llamaremos a nuestra función pasada, que lo duplicará. Si pasamos 10, pasamos 15 a nuestra primera función, que luego se duplica a 30.

Ejemplo personalizado con "componentes" de React

Como señalé anteriormente, este tema surgió en referencia a los componentes de React. Como un componente de React es una función, al pasarlo a otra función, estamos creando nuestra propia función de orden superior, que React llama “componentes de orden superior”. Si está utilizando componentes con estado (y ampliando React Component), ya está utilizando HOC.

Componente sin estado

const details = ({ name, randomNum }) => `${name}, ${randomNum}`

Tenemos una función, llamada details, a la que pasamos props. Los estamos deconstruyendo a medida que ingresan y asignándolos a variables locales namey randomNum. Esta es la sintaxis de ES6: si no le resulta familiar, dele un google (le encantará).

Esta es una función de primer orden : toma un argumento (un propsobjeto) y devuelve una plantilla literal.

Componente de orden superior

const hoc = (component, props) => { const randomNum = Math.floor(Math.random() * 100) return component({ ...props, randomNum }) }

Esta es una función de orden superior : toma una función (the component, a la que luego llama, pasando accesorios adicionales). Este es un ejemplo extremadamente básico de lo que hacen todos los componentes de React sin estado.

Puede emplear este patrón para abstraer código que se comparte entre muchos componentes de su aplicación.

¿Se pregunta si puede anidar funciones de orden superior? ¡Usted puede! Pero ten cuidado. Las abstracciones deberían facilitar la lectura y el trabajo del código . Es fácil seguir un camino aquí donde su código es tan obtuso que nadie puede descubrir cómo hacer nada.

Referencias

  • Función de orden superior, Wikipedia
  • Funciones de orden superior, Javascript elocuente (capítulo 5)
  • Array.prototype Documentos MDN.