Como desarrollador, es probable que haya utilizado funciones habituales de JavaScript. Funciones denominadas de primer orden, & nbsp; no toman una funciòn como parámetro ni devuelven una funciòn.
Este artìculo habla sobre funciones de orden superior (HOF). Estas son funciones que ayudan a los desarrolladores a reducir el còdigo para hacerlo más legible pasando una funciòn como argumento o devolviendo una funciòn. Repasaremos algunos ejemplos básicos para presentarle HOF y la programaciòn funcional y hablaremos sobre dos métodos de matriz avanzados populares que hacen uso de la construcciòn de funciones de orden superior para funcionar.
Ejemplos de funciones básicas de orden superior
Hay varias formas diferentes de usar funciones de orden superior en JavaScript.
Calculadora
Comencemos con un HOF básico que toma una funciòn de devoluciòn de llamada como argumento y devuelve esa devoluciòn de llamada con algunos argumentos: & nbsp;
Aquì tenemos dos tipos de funciones: una funciòn de orden superior que devuelve una devoluciòn de llamada y una funciòn de primer orden establecida que realiza una operaciòn en dos n√∫meros. Al final del fragmento, hacemos una llamada de funciòn a upperOrderFunction () . Esta funciòn devuelve el resultado de una invocaciòn del cb que se pasò con los parámetros dados. Si ha escrito una funciòn de devoluciòn de llamada para todos los posibles operadores aritméticos, puede usar la funciòn de orden superior para llamar a la operaciòn que necesite.
Event Listener
Otro ejemplo de una funciòn de orden superior es lo que ocurre cuando agrega un event listener a un elemento en el DOM (modelo de objeto de documento). Tome este ejemplo: & nbsp;
En este ejemplo, creé un botòn en HTML, lo seleccioné usando JavaScript y le agregué un detector de eventos. La estructura del detector de eventos es la de una funciòn simple de orden superior & ndash; que se necesita en una funciòn anònima como segundo argumento.
La secciòn resaltada es su funciòn de orden superior.
El 81% de los participantes declarò que se sintieron más seguros de sus perspectivas laborales después de asistir a un campamento de entrenamiento. Asigne a un bootcamp hoy.
El graduado promedio de bootcamp pasò menos de seis meses en la transiciòn de carrera, desde comenzar un bootcamp hasta encontrar su primer trabajo.
Métodos de matriz incorporados de JavaScript son esas funciones especiales de orden superior nuevas en ES6 que podemos usar para iterar sobre una matriz y manipularla o devolver una matriz completamente nueva cuyos valores han sido manipulados. & nbsp;
A medida que comenzamos a obtener en la resoluciòn de problemas más complejos en JavaScript, comience a pensar en abstraer parte de la lògica que escribimos cuando iteramos sobre matrices. El uso de estos métodos de matriz de funciones de orden superior lo ayuda a convertirse en un mejor desarrollador de JS.
Digamos, por ejemplo, que tenemos una matriz de profesores:
forEach
Si queremos iterar sobre la matriz y manipular cada elemento antes de usar ES6, esto es lo que tenemos que hacer:
La sintaxis de ES6 nos permite reducir el còdigo usando el método forEach:
Este método forEach toma una funciòn de devoluciòn de llamada como su primer parámetro para convertirla en una funciòn de orden superior. Esta funciòn de devoluciòn de llamada es básicamente la "acciòn" realizado en cada elemento que está en la matriz. Además, el método forEach también toma un ìndice y una matriz como su segundo y tercer parámetro opcional. & Nbsp;
El orden importa en estos parámetros en el método forEach (asì como en los otros parámetros creados -en métodos de matriz). La primera es siempre la funciòn de devoluciòn de llamada, la segunda es siempre el ìndice del elemento en la matriz y la tercera es siempre una copia de la matriz en sì.
El método forEach es otra forma de presentar un bucle for en JavaScript. No devuelve nada. El método manipula lo que ya está allì y lo guarda en la matriz con la que está trabajando si especifica lo que desea hacer con él.
Map
El método más cercano a forEach El método es el método del mapa. Funciona de la misma manera, excepto que este método devuelve una nueva matriz. Todo lo que manipule en la funciòn de devoluciòn de llamada no afectará a la matriz original.
Echemos un vistazo a qué mapa solìa verse antes de ES6:
Como puede ver, lo que tuvimos que hacer fue crear una nueva matriz fuera de nuestro bucle for para poder enviarle nuevos valores. ¬°Entonces tenemos que devolver nuestra nueva matriz para poder usarla en otro lugar!
Con ES6 y el método de mapa, podemos abstraer algo de esa lògica para que sea más legible:
La caracterìstica especial sobre el método de mapa, asì como otros métodos de matriz como este, la funciòn de reducir y filtrar en particular, es que puede asignarla a una variable y devolverla o simplemente devolver la toda la funciòn en conjunto! No se necesita empujar a una nueva matriz & ndash; ya está hecho por usted con este método de mapa. ¬°Recuerde tener un valor de retorno en la lògica dentro de la funciòn de devoluciòn de llamada del método de mapa!
Conclusiòn:
Las funciones de orden superior son un concepto extremadamente importante en JavaScript para ayudarte a convertirte en un mejor desarrollador. Te ayudará a abstraer un poco de lògica para que tu còdigo sea más legible y, en algunos casos, más eficaz.
En este tutorial, exploramos algunas de las diferentes formas en que podemos escribir funciones de orden superior, desde métodos básicos de calculadora hasta detectores de eventos y funciones avanzadas de matriz. Una vez que haya dominado esto, estará listo para abordar algunas soluciones más complejas a los problemas.
