Comprender las funciones de orden superior en JavaScript

JavaScript es un lenguaje poderoso compatible con la mayoría de los navegadores modernos y es una excelente opción para los 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 puede usar asignar funciones a variables y pasarlas como parámetros, como otros valores.

¿Qué son las funciones de orden superior?

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 la paradigma de programación funcional. Si usted es recién comenzando con JavaScript, las funciones de orden superior pueden ser un poco difíciles de comprender.

Considere el siguiente ejemplo:

funcióntransformar(fn) {
dejar





instagram viewer
 matrizresultado = [];
devolverfunción (formación) {
para (dejar yo = 0; i < arreglo.longitud; i++) {
 resultadoArray.push (fn (arreglo[i]))
 }
devolver matriz de resultados
 }
}

En el bloque de código anterior, el transformar es una función de orden superior que toma en fn función como un parámetro y devuelve una función anónima que toma en formación como parámetro.

El propósito de transformar La función es modificar los elementos de la matriz. Primero, el código define una variable matriz de resultados y lo une a una matriz vacía.

El transformar función devuelve una función anónima que recorre cada elemento en formación, luego pasa el elemento al fn función para el cálculo, y empuja el resultado en matriz de resultados. Después de completar el bucle, la función anónima devuelve el matriz de resultados.

constante funcion1 = transformar((X) => X * 2)
consola.log (función1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

El bloque de código anterior asigna la función anónima devuelta por el transformar función a la variable constante funcion1. fn devuelve el producto de X que es un sustituto de matriz[yo].

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

consola.log (transformar((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript tiene una función integrada de orden superior que básicamente hace lo mismo que transformar, que veremos más adelante.

Con suerte, está comenzando 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 lo que hace.

funciónfiltrar y transformar(fn, arrayToBeFiltered, condición) {
dejar matrizfiltrada = [];
para (dejar yo = 0; i < arrayToBeFiltered.length; i++) {
si (condición (arrayToBeFiltered[i])) {
dejar y = transformar (fn)([ arrayToBeFiltered[i] ])[0]
 matrizfiltrada.push (y)
 } demás {
 filteredArray.push (matriz a filtrar [i])
 }
 }
devolver matriz filtrada
}

Este bloque de código define una función que hace lo que podría sospechar: comprueba los elementos de la matriz que cumplen una determinada condición y los transforma con la transformar() función. Para usar esta función, haces algo como esto:

filtrarYTransformar((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

A diferencia del transformar función, La filtrar y transformar función toma dos funciones como parámetros: fn y condición. El condición La función verifica si el parámetro pasó, es un número par y devuelve verdadero. De lo contrario, devuelve falso.

Si condición se resuelve como verdadero (la condición se cumple), solo entonces el transformar función llamada. Esta lógica podría ser ú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:

[ 1, 4, 3, 8, 5 ]

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, como están.

La función de orden superior Array.map() en JavaScript

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

dejar matriz = [ 1, 2, 3, 4, 5 ];
dejar matriztransformada = matriz.mapa((X) => X * 2);

cuando inicias sesión matriz transformada en la consola del navegador, deberías obtener el mismo resultado que obtuviste con el transformar función mencionada anteriormente:

[ 2, 4, 6, 8, 10 ]

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 solo matriz.mapa() usted puede lograr los mismos resultados que el filtrar y transformar función. Así es como lo haces:

dejar matriz = [ 1, 2, 3, 4, 5 ];
dejar matriztransformada = matriz.mapa((X) => X % 20? X * 2: X);

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 incorporado mapa funció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 ocurran errores.

La función Array.filter() en JavaScript

Cuando invoques al filtrar 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. El filtrar El método devuelve una matriz que contiene elementos que cumplen la condición pasada. Así es como lo usas.

funciónmarcarPrimeraLetra(palabra) {
dejar vocales = "aeiou"
si (vocales.incluye(palabra[0].toLowerCase())) {
devolver palabra;
 } demás {
devolver;
 }
}
dejar palabras = [ "Hola", "de", "el", "niños", "de", "planeta", "Tierra" ];
dejar resultado = palabras.filtro((X) => comprobarPrimeraLetra (x))

El bloque de código anterior atraviesa el palabras array y filtra cualquier palabra cuya primera letra sea una vocal. Cuando ejecuta el código y registra el resultado variable, debe obtener los siguientes resultados:

[ 'de', 'Tierra' ];

La función Array.reduce() en JavaScript

El reducir() función de orden superior toma en dos parámetros. El primer parámetro es la función de reducción. Esta función de reducción es responsable 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 en una matriz, puede hacer lo siguiente:

dejar un = [ 1, 2, 3, 4, 5];
dejar suma = 0;
para (dejar yo = 0; i < a.longitud; i++) {
 suma = suma + a[i];
}
consola.log (suma);

Si ejecuta el código, suma debe ser 15 También puede adoptar un enfoque diferente con el reducir función.

dejar un = [ 1, 2, 3, 4, 5 ];
suma = a.reduce((do, norte) => c + n);
consola.log (suma);

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: C y norte. C se refiere al elemento actual mientras que norte se refiere al siguiente elemento en la matriz.

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

El poder de las funciones de orden superior

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

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