Comprender las funciones de orden superior en JavaScript

Descubra cuán flexibles pueden ser las funciones de JavaScript y cómo puede usarlas para crear código flexible y reutilizable.

JavaScript es un lenguaje potente compatible con la mayoría de los navegadores modernos y es una excelente opción para principiantes.

Al igual que muchos otros lenguajes de programación modernos, JavaScript admite funciones que le permiten aislar un bloque de código y reutilizarlo en otro lugar. También puedes usar asignar funciones a variables y pasarlas como parámetros, como otros valores.

La definición más simple de una función de orden superior es una función que realiza operaciones en otras funciones aceptándolas como parámetros o devolviéndolas. Las funciones de orden superior se utilizan mucho en el paradigma de programación funcional. Si recién está comenzando con JavaScript, las funciones de orden superior pueden resultar un poco difíciles de comprender.

Considere el siguiente ejemplo:

En el bloque de código anterior, eltransformarLa función es una función de orden superior que toma enfnfunciona como parámetro y devuelve una función anónima que toma enformacióncomo parámetro.

El propósito detransformar La función es modificar los elementos de la matriz. Primero, el código define una variable.matriz de resultadosy lo vincula a una matriz vacía.

EltransformarLa función devuelve una función anónima que recorre cada elemento enformación, luego pasa el elemento alfnfunción para el cálculo y envía el resultado amatriz de resultados . Después de completar el ciclo, la función anónima devuelve elmatriz de resultados.

El bloque de código anterior asigna la función anónima devuelta por eltransformarfunción a la variable constantefunción1.fndevuelve el producto deXque es un sustituto dematriz[i].

El código también pasa una matriz, como parámetro parafunción1 y luego registra el resultado en la consola. Una forma más corta de escribir esto sería:

JavaScript tiene una función incorporada de orden superior que básicamente hace lo mismo quetransformar, que cubriremos más adelante.

Con suerte, estás empezando a comprender cómo funcionan las funciones de orden superior en JavaScript. Eche un vistazo a la siguiente función y vea si puede adivinar qué hace.

Este bloque de código define una función que hace lo que usted podría sospechar: busca los elementos en la matriz que cumplen una determinada condición y los transforma con eltransformar() función. Para utilizar esta función, haga algo como esto:

A diferencia deltransformarfunción, lafiltrar y transformarLa función toma dos funciones como parámetros:fnycondición . Elcondición La función comprueba si el parámetro pasado es un número par y devuelve verdadero. De lo contrario, devuelve falso.

Sicondiciónse resuelve como verdadero (se cumple la condición), sólo entonces setransformar función llamada. Esta lógica podría resultar útil si está trabajando con una matriz y desea transformar ciertos elementos. Si ejecuta este código en la consola del navegador, debería obtener la siguiente respuesta:

Puedes ver que la función solo transforma los elementos que cumplen una determinada condición, dejando los elementos que no cumplen la condición, tal como están.

Los métodos de matriz como map() son funciones de orden superior que facilitan la manipulación de matrices. Así es como funciona.

Cuando inicias sesiónmatriz transformadaen la consola del navegador, debería obtener el mismo resultado que obtuvo con eltransformarfunción mencionada anteriormente:

matriz.mapa() toma dos parámetros, el primer parámetro se refiere al elemento en sí, mientras que el segundo parámetro se refiere al índice del elemento (posición en la matriz). Con solomatriz.mapa()puedes lograr los mismos resultados que elfiltrar y transformar función. Así es como lo haces:

En el bloque de código anterior, la función devuelve el producto del elemento actual y 2, si el elemento es par. De lo contrario, devuelve el elemento intacto.

Con el incorporadomapafunción, ha logrado eliminar la necesidad de varias líneas de código, lo que da como resultado un código mucho más limpio y menos posibilidades de que se produzcan errores.

Cuando invocas elfiltrar método en una matriz, asegúrese de que el valor de retorno de la función que pasa al método sea verdadero o falso. Elfiltrar El método devuelve una matriz que contiene elementos que cumplen la condición pasada. Así es como lo usas.

El bloque de código anterior atraviesa elpalabras Matriz y filtra cualquier palabra cuya primera letra sea una vocal. Cuando ejecuta el código y registra elresultadovariable, debería obtener los siguientes resultados:

Elreducir() La función de orden superior toma dos parámetros. El primer parámetro es la función de reducción. Esta función de reducción se encarga de combinar dos valores y devolver ese valor. El segundo parámetro es opcional.

Define el valor inicial a pasar a la función. Si desea devolver una suma de todos los elementos de una matriz, puede hacer lo siguiente:

Si ejecuta el código,sumadebería ser 15. También puedes adoptar un enfoque diferente con elreducirfunción.

El bloque de código anterior es mucho más limpio en comparación con el ejemplo anterior. En este ejemplo, la función de reducción toma dos parámetros:Cynorte.Cse refiere al elemento actual mientrasnortese refiere al siguiente elemento de la matriz.

Cuando se ejecuta el código, la función reductora recorre la matriz, asegurándose de agregar el valor actual al resultado del paso anterior.

Las funciones en JavaScript son poderosas, pero las funciones de orden superior llevan las cosas al siguiente nivel. Se utilizan ampliamente en programación funcional y le permiten filtrar, reducir y mapear matrices con facilidad.

Las funciones de orden superior pueden ayudarle a escribir código más modular y reutilizable al crear aplicaciones.

David Uzondu es un desarrollador de JavaScript con más de 3 años de experiencia. Le encanta escribir en su tiempo libre.